概述
文章目录
- CSS中的height
- auto
- 百分比
- 示例一
- 示例二
- 示例三
CSS中的height
height用来给块级元素（包括行块级元素）设置高度，行级元素设置高度是不生效的。
auto
height默认为auto。浏览器会计算出实际的高度，也就是自子元素的高度。
百分比
height设置为百分比时，高度基于包含它的块级对象的百分比高度。注意是块级父元素。
示例一
<div style="height: 200px;background-color: black">
<div style="height: 50%;background-color: white">
<div style="display: inline;height: 50%;background-color: aqua">
<div style="height: 100%;background-color: blue">hello world</div>
</div>
</div>
</div>
包含hello world的div元素的高度是多少呢？
没错是100px。因为第一个父元素是行级元素，对于子元素来说是没有参考的。第二个父元素是块级元素，而且高度是100px。所以hello world的div元素
高度百分比是相对于第二个父元素的。
示例二
<div style="height: 200px;background-color: black">
<div style="height: auto;background-color: white">
<div style="display: inline;height: 50%;background-color: aqua">
<div style="height: 100%;background-color: blue;line-height: 30px">hello world</div>
</div>
</div>
</div>
该示例中包含hello world的div元素的高度又是多少呢？相对于示例一的区别在于第二个父元素的高度取值auto，也就是自适应。
此时高度为30px，也就是line-height的大小。因为第一个父元素是行级元素，第二个父元素是块级元素，但是高度是auto的。如果高度为auto，浏览器
依据此值计算百分比值时只能得出undefined的值，浏览器对此是不会有任何反应对。所以最终以自身大小为高度。同时第一个和第二个父元素对高度也是
30px，取值为子元素对高度。
示例三
<body style="width: 200px;height: 200px">
<div style="position: relative;width: 20%;height: 20%;border: 1px solid black">
<div style="position: fixed;bottom: 0;left:0;width: 50%;height: 50%;border: 1px solid red">hello world</div>
</div>
</body>
该示例中包含hello world的div元素的高度并没有基于父元素div的高度去计算，而是百分比参考屏幕的。所以高度是浏览器屏幕的50%。
那么如何让包含hello world的div元素的高度是父元素的高度呢（这里是高度等于父元素的高度）？
<body style="width: 200px;height: 200px">
<div style="position: relative;width: 20%;height: 100px;border: 1px solid black">
<div style="position: fixed;bottom: 0;left:0;width: 50%;height: inherit;border: 1px solid red">hello world</div>
</div>
</body>
在代码中可以看到父元素高度是固定值，而且子元素fixed元素的高度取值inherit。这样子元素就可以直接继承父元素的高度了。如果父元素的高度也是百分比，
那么就需要通过js代码的方式来实现了。
最后
以上就是健壮小天鹅为你收集整理的CSS中的heightCSS中的height的全部内容，希望文章能够帮你解决CSS中的heightCSS中的height所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
![[ CSS ] line-height 与垂直居中!](/uploads/reation/bcimg12.png)
发表评论 取消回复