不能全屏这个问题，看完了下面所有解决方法一个一个试了怎么我是不能全屏呢-慕课网

首页课程实战体系课手记专栏慕课教程

不能全屏这个问题，看完了下面所有解决方法一个一个试了怎么我是不能全屏呢

来源：2-2 导航页面切换（2）

ffffff追风筝的人

2016-01-19 21:53

css样式：

html,body,.container,.st-container{height:100%;}

a{ text-decoration:none;

color:#555;

}

.clr{ width:0;

height:0;

overflow:hidden;

clear:both;

padding:0;

margin:0;

}

.st-container{

width:100%;

height:100%;

position:absolute;

overflow:hidden;

left:0;

top:0;

}

.st-container > input,

.st-container > a{

width:20%;

height:34px;

line-height:34px;

position:fixed;

bottom:0;

cursor: pointer;

}

.st-container > input{

opacity:0;

z-index:1000;

}

.st-container > a{

z-index:10;

font-weight:700;

font-size:16px;

background:#e23a6e;

text-align:center;

color:#fff;

text-shadow:1px 1px 1px rgba(151,24,64,0.2);

}

#st-control-1,#st-control-1 + a{

left:0%;

}

#st-control-2,#st-control-2 + a{

left:20%;

}

#st-control-3,#st-control-3 + a{

left:40%;

}

#st-control-4,#st-control-4 + a{

left:60%;

}

#st-control-5,#st-control-5 + a{

left:80%

}

.st-container input:checked + a,

.st-container input:checked:hover + a{

background:#821134;

}

.st-container input:checked + a:after{

content:"";

width:0;

height:0;

overflow:hidden;

border:20px solid transparent;

border-bottom-color:#821134;

position:absolute;

bottom:100%;

left:50%;

margin-left:-20px;

}

.st-container input:hover + a{

background:#AD244F;

}

.st-scroll,

.st-panel{

width:100%;

height:100%;

position:relative;

color:red;background:#333;

left:0%;top:0%;

}

结构：

<body>

<div class="container">

<div class="st-container">

<input type="radio" name="radio-set" checked="checked" id="st-control-1">

<a href="#st-panel-1">Serendipity</a>

<input type="radio" name="radio-set" id="st-control-2">

<a href="#st-panel-2">Happiness</a>

<input type="radio" name="radio-set" id="st-control-3">

<a href="#st-panel-3">Tranquillity</a>

<input type="radio" name="radio-set" id="st-control-4">

<a href="#st-panel-4">Positivity</a>

<input type="radio" name="radio-set" id="st-control-5">

<a href="#st-panel-5">Herendipity</a>

<div class="st-scroll">

<div class="st-panel" id="st-panel-l">

<div class="st-deco" data-icon="H"></div>

<h2>Serendipity</h2>

<p>Banksy adipisicing eiusujj mi sed Squid stmpt fffdf sdsdgf ffee eregg</p>

</div>

<div class="st-panel st-color" id="st-panel-2">

<div class="st-deco" data-icon="H"></div>

<h2>Serendipity</h2>

<p>Banksy adipisicing eiusujj mi sed Squid stmpt fffdf sdsdgf ffee eregg</p>

</div>

<div class="st-panel" id="st-panel-3">

<div class="st-deco" data-icon="H"></div>

<h2>Serendipity</h2>

<p>Banksy adipisicing eiusujj mi sed Squid stmpt fffdf sdsdgf ffee eregg</p>

</div>

<div class="st-panel st-color" id="st-panel-4">

<div class="st-deco" data-icon="H"></div>

<h2>Serendipity</h2>

<p>Banksy adipisicing eiusujj mi sed Squid stmpt fffdf sdsdgf ffee eregg</p>

</div>

<div class="st-panel" id="st-panel-5">

<div class="st-deco" data-icon="H"></div>

<h2>Serendipity</h2>

<p>Banksy adipisicing eiusujj mi sed Squid stmpt fffdf sdsdgf ffee eregg</p>

</div>

</div>

</div>

</div>

</body>

写回答关注

5回答

最不强程序员

2016-12-15 16:25:15

<body>
<div class="container">

<div class="container-st">
<input type="radio" id="set-1" name="set-radio" checked="checked"><a href="#set-1">汪大东</a></input>
<input type="radio" id="set-2" name="set-radio"><a href="#set-2">雷霆</a></input>
<input type="radio" id="set-3" name="set-radio"><a href="#set-3">中万钧</a></input>
<input type="radio" id="set-4" name="set-radio"><a href="#set-4">球球</a></input>
<input type="radio" id="set-5" name="set-radio"><a href="#set-5">那个谁？</a></input>
</div>
</div>

<div class="st-scroll">
<section class="st-panel" id="set-1">
<div class="st-desc" data-icon="H"></div>
<h2>汪大东</h2>
<p>233333333333333333333333333333333333333</p>
</section>
<section class="st-panel st-color" id="set-2">
<h2>雷霆</h2>
<p>233333333333333333333333333333333333333</p>
</section>
<section class="st-panel" id="set-3">
<div class="st-desc" data-icon="H"></div>
<h2>中万钧</h2>
<p>233333333333333333333333333333333333333</p>
</section>
<section class="st-panel st-color" id="set-4">
<div class="st-desc" data-icon="H"></div>
<h2>球球</h2>
<p>233333333333333333333333333333333333333</p>
</section>
<section class="st-panel" id="set-5">
<div class="st-desc" data-icon="H"></div>
<h2>那个谁？</h2>
<p>233333333333333333333333333333333333333</p>
</section>
</div>
</body>
</html>

1 0

慕运维847...

老师的代码是没有分开的导航和内容大块都在一个container里面

2018-06-04 16:37:58

共 1 条回复 >
最不强程序员

2016-12-15 16:24:51

不能全屏是因为导航条的div和上面内容的div必须要分开定义

0 0
qq_鸠羽千夜_0

2016-10-23 23:50:04

我的跟你一模一样就是不能全屏不知道哪里出现问题了

0 0
不打伞的人

2016-04-06 14:29:03

给container定义height：100%
我就是这样解决的

0 0
Eyeland

2016-01-20 22:32:09

不能全屏基本是父元素没定义100% 自己看看是不是吧

1 1

奥芬

父元素都定义 height：100%，然而还是没有全屏

2016-08-18 16:49:24

共 1 条回复 >

css3实现网页平滑过渡效果

CSS3 打造页面之间的平滑过渡效果，带来神奇的体验

54371 学习 · 372 问题

相似问题

不能全屏的看这里~

回答 3

不能全屏的问题有答案了吗？

回答 2

还有谁解决了全屏的问题？

回答 2

不能全屏啊

回答 2

全屏问题已解决

回答 7

打开慕课网App查看更多内容