HTML给div设置百分比高度无效的解决方式

最新推荐文章于 2021-10-27 10:16:58 发布

_Royal

最新推荐文章于 2021-10-27 10:16:58 发布

阅读量3.6w

点赞数 6

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/HobHunter/article/details/73611192

版权

前端专栏收录该内容

3 篇文章 2 订阅

订阅专栏

给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>

可能会疑问为什么要用position:fixed。先看下W3C手册怎么说的吧~

03.png-50.2kB

是不是秒懂的节奏！？？

两种方法各有不同。可以根据实际情况来做判断用哪种

_Royal

关注

6
点赞
踩
19

收藏

觉得还不错? 一键收藏
7
评论
HTML给div设置百分比高度无效的解决方式

给div设置height:100%;<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>div高度</title> <style> *{margin:0;padding:0} .nav{ width:200px;
复制链接

扫一扫