2 sinat 32546159 sinat_32546159 于 2016.03.12 22:19 提问

为什么.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个回答

showbo
showbo   Ds   Rxr 2016.03.13 12: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%;
}
u010319440
u010319440   2016.03.12 22:28

父级元素要全屏,,,body要全屏width:100%

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
iOS开发-关于UI界面未能铺满全屏的问题
如题,多半是因为Launch Screen File未处理好, 默认设置是选择Launch Screen File为LaunchScreen, 如下图:
Android将照片铺满全屏
仿微信QQ查看图片思路的其中一步
设置100%却无法铺满屏幕
设置了宽度为100%,如果直接 .class-name or #id-name{width:100%;height:  px;} 无法实现铺满屏幕,必须设置整个的页面的margin,padding. 即在最开始设置 *{margin:0;padding:0;} 即可实现
css 背景图铺满整个屏幕无滚动条
kk总结了两种方式实现背景图铺满整个屏幕并且无滚动出现的方式,下面来一一介绍:方法一:先上个效果图html页面:一个用来放背景图的容器.bg&amp;lt;body&amp;gt; &amp;lt;div class=&quot;main&quot;&amp;gt; &amp;lt;div class=&quot;bg&quot;&amp;gt;&amp;lt;/div&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;script&amp;gt;st
HTML,img,video无法铺满屏幕解决方法,同视频做网页背景无法全屏的解决方法
我在这里用视频做为网页背景,给视频设了100%宽高,在firebug也显示video的宽高和页面是一样的,但是效果却没出来,视频没有铺满屏幕。下面是我的代码(原代码,错误的) *{margin: 0;padding: 0} html,body{width: 100%;height: 100%} video{ width: 100%;height: 100
css的img布满全屏
1. background-image的布满全屏'background-image': 'url', 'width':'100%', 'max-width':'100%', 'max-height':'500px', 'height': '330px', 'background-size':'100% 100%', '-moz-background-size':...
android应用程序界面不能铺满模拟器的整个屏幕
新建一个模拟器 1024 X 768 的屏幕,自己建了应用程序一直不能暂满全屏,内容是完整的,只在屏幕的中间显示,像被缩小了似的。 后来经高人指点,才知道是应用程序要指定SDK的最小版本,而且版本要不能小于8,即android2.2,在AndroidManifest.xml中增
ScrollView 使用fillViewport铺满全屏
当scrollview的子布局不足以铺满全屏的时候,scrollview的高度就是子布局高度之和,这个时候如果我们想让scrollview铺满全屏只需要设置 fillViewport=true就好了 android:fillViewport="true"举例:比如scrollview有一个子布局linerlayout,如果没有android:fillViewport=”true”,即使给linerl
table铺满全屏
无标题页        HTML,BODY,FORM     {         height:100%;     }          AAAAAAAAAA      AAAAAAdddAAAA
iPhone X 屏幕适配,没有铺满屏幕的情况
今天在适配iPhone X的时候,发现iPhone X的屏幕上下没有铺满。新建的项目,以及写的Demo都是铺满屏幕的。        经过反复查看项目后,发现原来是很久以前,项目因为启动页用的是Launch Image Source,因为用不到Launch Screen File 所以把LaunchScreen.storyboard 给删除了,Info.plist 里面也就没