CSS属性之height

65 阅读 0 评论 43 点赞

我是靠谱客的博主光亮洋葱，最近开发中收集的这篇文章主要介绍CSS属性之height，觉得挺不错的，现在分享给大家，希望可以做个参考。

height与width大致是一样的，都是用来限制元素尺寸的，但是，它们在不少地方还是有明显区别的。这是因为CSS的默认渲染方式是水平方向的，宽度是有限的，而高度是无限的。因此高度的分配会根据浏览器差异和不同，高度就显得比较随意。

1.height:auto;

与width:auto;那么多讲究不同，height：auto;在正常情况下子元素多高，或者内容多高，它就多高。

如果子元素具有绝对定位或者浮动这表现会有不同，这需要看具体场景。

2.height:100%；

当你想要设置一张背景图充满整个页面时：

div{
width:100%;/*多余*/
hieght:100%;/*无效*/
background:url(bg.jpg);
}

然后发现div的高度确实0，其实这是因为百分比高度值想要生效，其父级必须有一个可以生效的高度值！

此时你就需要加上：

html,body{
height:100%;
}

为什么会出现这种情况呢？这是因为如果包含快即父元素的高度没有显示指定（高度由内容决定），并且该元素不是绝对定位，则计算值为auto。而‘auto’*100/100=NaN

当然还有一种方法可以使height生效，就是使用绝对定位：

div{
height:100%;
position:absolute;
}

文章参考张鑫旭《CSS世界》

以上就是光亮洋葱为你收集整理的CSS属性之height的全部内容，希望文章能够帮你解决CSS属性之height所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。