css样式:
html,body,.container,.st-container{height:100%;
width: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">
<!--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>
为什么.st-scroll,.st-panel 没有铺满全屏
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
- 邀请回答
-
2条回答
- Go 旅城通票 2016-03-13 04:05关注
css的注释是/**/,不是<!--->
还有注意去掉空白边
html,body,.container,.st-container{height:100%;width:100%;padding:0;margin:0} h2{padding:0;margin:0}
/*<!--内容-->*/ .st-scroll, .st-panel{ width:100%; height:100%; position:relative; color:red;background:#333; left:0%;top:0%; }
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥30 这是哪个作者做的宝宝起名网站
- ¥60 版本过低apk如何修改可以兼容新的安卓系统
- ¥25 由IPR导致的DRIVER_POWER_STATE_FAILURE蓝屏
- ¥50 有数据,怎么建立模型求影响全要素生产率的因素
- ¥50 有数据,怎么用matlab求全要素生产率
- ¥15 TI的insta-spin例程
- ¥15 完成下列问题完成下列问题
- ¥15 C#算法问题, 不知道怎么处理这个数据的转换
- ¥15 YoloV5 第三方库的版本对照问题
- ¥15 请完成下列相关问题!