HTML给div设置百分比高度无效的解决方式 - 库塔姆斯 - CSDN博客

最新推荐文章于 2021-06-15 16:21:12 发布

weixin_30391339

最新推荐文章于 2021-06-15 16:21:12 发布

阅读量141

点赞数

原文链接：http://www.cnblogs.com/lonelyxmas/p/10956710.html

版权

HTML给div设置百分比高度无效的解决方式 - 库塔姆斯 - CSDN博客

原文: HTML给div设置百分比高度无效的解决方式 - 库塔姆斯 - CSDN博客

给div设置height:100%;

<!DOCTYPE html> 
<html>   
<head> 
    <meta charset=utf-8>   
    <title>div高度</title>  
    <style>
        *{margin:0;padding:0}
        .nav{
            width:200px;
            height:100%;
            background-color:#c7c7c7;
        }
    </style>
</head>   
<body>  
  <div class="nav">  
    divdivdiv
  </div>  
</body>   
</html>

可div并没有按照所想的那样展开，但将div设置固定高度时能够正常展开，这是什么原因?
01.png-3.1kB
经过查找资料后，在给元素设置百分比高度时要制定父布局高度。正常情况下最外层的父布局是根据内容来确定的，正如上图，div的高度是21px。html的高度也是21px。既然知道问题原因后，那下面的事情就好办了。

解决方法一：
给外层设置高度为：100%

<!DOCTYPE html> 
<html style="height:100%">   
<head> 
    <meta charset=utf-8>   
    <title>div高度</title>  
    <style>
        *{margin:0;padding:0}
        .nav{
            width:200px;
            height:100%;
            background-color:#c7c7c7;
        }
    </style>
</head>   
<body style="height:100%">  
  <div class="nav">  
    divdivdiv
  </div>  
</body>   
</html>

02.png-3.1kB

解决方法二：

<!DOCTYPE html> 
<html>   
<head> 
    <meta charset=utf-8>   
    <title>div高度</title>  
    <style>
        *{margin:0;padding:0}
        .nav{
            width:200px;
            height:100%;
            position:fixed;
            background-color:#c7c7c7;
        }
    </style>
</head>   
<body>  
  <div class="nav">  
    divdivdiv
  </div>  
</body>   
</html>