望月归乡 2016-03-12 14:19 采纳率: 57.1%
浏览 1456
已采纳

为什么.st-scroll,.st-panel 没有铺满全屏

 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>
  • 写回答

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%;
    }
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题