为什么我的“height：100%”失效了？？？！！！

来源：互联网发布：h3c端口聚合编辑：程序博客网时间：2024/04/19 02:25

我相信很多朋友都遇到过这样一个问题，就是想把一个div的高度设为100％，以此来自适应不同分辨率下的窗口（比如一侧的导航条）。

但是问题来了，我们打算做一个左侧的导航栏，高度为100％。我直接使用了以下代码：

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><style type="text/css">.aa{height: 100%;width: 100px;background-color:black; }</style></head>  <div class="aa"></div><body></body></html>

但是，奇怪的事情发生了，打开页面什么东西也没有。

检查元素发现宽度100px；高度为0；

那么我的height：100%去哪了呢？？？

你需要理解浏览器是如何计算高度和宽度的。web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度。如果你不给宽度设定任何缺省值，那浏览器会自动将页面内容平铺填满整个横向宽度。

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

因为页面没有缺省的高度值，所以，当设置百分百的高度时，无法根据父元素获取高度，也就无法设置绝对高度。换句话说，父元素的高度只是一个缺省值height：auto。只有子元素撑开父元素。

那么要解决这个问题其实很简单，只要给父元素设置一个缺省值。代码如下：

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><style type="text/css"> html,body{margin: 0;padding: 0;height: 100%;width: 100%;}.aa{height: 100%;width: 100px;background-color:black; }</style></head>  <div class="aa"></div><body></body></html>

给他的父元素一个高度参数，这样问题就问没解决了。自适应的高度百分百就完成了。

0 0