不能全屏這個(gè)問題 ，看完了下面所有解決方法 一個(gè)一個(gè)試了怎么我是不能全屏呢
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;
}
<!--內(nèi)容-->
.st-scroll,
.st-panel{
width:100%;
height:100%;
position:relative;
color:red;background:#333;
left:0%;top:0%;
}
結(jié)構(gòu)：
<body>
? <div class="container">
? ? ?<div class="st-container">
? ? ?<!--nav begin-->
? ? ? ? ? ?<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>
? ? ? ? ? ?<!--nav end-->
? ? <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>
2016-12-15
<body>
<div class="container">
<!--nav begin-->
<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">那個(gè)誰？</a></input>
</div>
</div>
<!--nav end content begin-->
<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>那個(gè)誰？</h2>
<p>233333333333333333333333333333333333333</p>
</section>
</div>
</body>
</html>
2016-12-15
不能全屏是因?yàn)閷?dǎo)航條的div和上面內(nèi)容的div必須要分開定義
2016-10-23
我的跟你一模一樣就是不能全屏不知道哪里出現(xiàn)問題了
2016-04-06
給container定義height：100%
我就是這樣解決的
2016-01-20
不能全屏基本是父元素沒定義100% ?自己看看是不是吧