您的位置：首页 > Web前端

前端小知识:为什么你写的 height:100% 不起作用？

2018-01-25 10:18 225 查看
这个知识不算冷门的，但是用的时候可能还是会有些懵逼，不能生效时搜一搜就能找到答案了，但是你真的懂了吗？为什么想要设置一个全屏元素的时候，高度不受%的控制？


1.百分比宽高的设定

按照w3c中的width和height属性，可以明确%设定宽高是根据父元素的宽高来的：
http://www.w3school.com.cn/cssref/prdimwidth.asp http://www.w3school.com.cn/cssref/prdimheight.asp



2.width:100%;

我们写下这样一段代码，随意设置一个背景色便于观察元素


<body>


 
 <divstyle="width:100%;height:100%;background-color:blueviolet;">


 
 width:100%;height:100%;


 
 </div>


</body>


//宽100%，我们现在看到的高是属于font-size的，而不是100%；






<body>


 
 <divstyle="width:100%;height:200px;background-color:blueviolet;">


 
 width:100%;height:200px;


 
 </div>


</body>


//效果如下




可以看到基本上宽的100%很容易就实现的，但是这里的height却不能设置成%比的（该元素会消失看不见），这是为什么呢？

3.浏览器是如何计算高度和宽度的
Web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度。如果你不给宽度设定任何缺省值，那浏览器会自动将页面内容平铺填满整个横向宽度。即我们不设置宽，会自动填满整个横向宽度，如下：


<divstyle="height:100%;">height:100%;</div> 




但是高度的计算方式完全不一样。事实上，浏览器根本就不计算内容的高度，除非内容超出了视窗范围(导致滚动条出现)。或者你给整个页面设置一个绝对高度。否则，浏览器就会简单的让内容往下堆砌，页面的高度根本就无需考虑。

因为页面并没有缺省的高度值，所以，当你让一个元素的高度设定为百分比高度时，无法根据获取父元素的高度，也就无法计算自己的高度。

即父元素的高度只是一个缺省值：height: auto;我们设置height：100%时，是要求浏览器根据这样一个缺省值来计算百分比高度时，只能得到undefined的结果。也就是一个null值，浏览器不会对这个值有任何的反应。

各个浏览器对于宽高的解析也不相同，大家可以自己搜索一下。

参考：http://www.webhek.com/post/css-100-percent-height.html

4.如何解决
现在你知道了吧，%是一个相对父元素计算得来的高度，要想使他有效，我们需要设置父元素的height;

要特别注意的一点是，在之中的元素的父元素并不仅仅只是，还包括了。

所以我们要同时设置这两者的height，只设置其中一个是不行的：


 
     html,body{


 
         height:100%;


 
         margin:0;


 
         padding:0;


 
     }





5.关于line-height居中的一点误解？


<!DOCTYPE
html>


<htmllang="en">




<head>


 
 <metacharset="UTF-8">


 
 <metaname="viewport"content="width=device-width,
initial-scale=1.0">


 
 <metahttp-equiv="X-UA-Compatible"content="ie=edge">


 
 <title>Document</title>


 
 <style>


 
     html,body{


 
         height:100%;


 
         margin:0;


 
         padding:0;


 
     }


 
     div {


 
         color: white;


 
         text-align: center;


 
         font-size:30px;


 
         line-height:100%;


 
         background-color: blueviolet;


 
     }


 
 </style>


</head>




<body>


 
 <!-- <div style="width:100%;height:100%;">width:100%;height:100%;</div> -->


 
 <divstyle="height:100%;">height:100%;</div>


 
 <!-- <div style="width:100%;height:200px;">width:100%;height:200px;</div> -->


</body>




</html>


全部代码如上，可以看到设置了line-height为100%没有居中，这是为什么呢，因为这时候的%是相对于字体尺寸的？所以直接作用于没有绝对高度的元素是不行的。



line-height属性说明：http://www.w3school.com.cn/cssref/prdimline-height.asp

这时候要想居中，可以如下，做一个div嵌套，一个负责高度，一个负责居中，虽然感觉并不会这样用到，但是居中还是很灵验的~


<!DOCTYPE
html>


<htmllang="en">




<head>


 
 <metacharset="UTF-8">


 
 <metaname="viewport"content="width=device-width,
initial-scale=1.0">


 
 <metahttp-equiv="X-UA-Compatible"content="ie=edge">


 
 <title>Document</title>


 
 <style>


 
     html,


 
     body {


 
         height:100%;


 
         margin:0;


 
         padding:0;


 
     }




 
     .div1 {


 
         background-color: blueviolet;


 
         position: relative;


 
     }




 
     .div2 {


 
         font-size:30px;
   


 
         color: white;


 
         text-align: center;                    


 
         width:400px;


 
         position: absolute;


 
         left:50%;


 
         top:50%;


 
         transform: translateX(-50%)
 translateY(-50%);


 
     }


 
 </style>


</head>




<body>


 
 <!-- <div style="width:100%;height:100%;">width:100%;height:100%;</div> -->


 
 <divstyle="height:100%;"class="div1">


 
     <divclass="div2">height:100%;</div>


 
 </div>


 
 <!-- <div style="width:100%;height:200px;">width:100%;height:200px;</div> -->


</body>




</html>





6.源码
https://github.com/JiaXinYi/ife-study/blob/master/height/height.html

我有一个还不错的订阅号，里面有很多it学习资料以及最新资讯，可以微信搜索“itheimaCS”关注，等待你的到来，不要迷路了。
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航