css高度自适应以及高度塌陷总结
Posted 月疯
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css高度自适应以及高度塌陷总结相关的知识，希望对你有一定的参考价值。
高度塌陷：
场景：子元素有浮动，父元素没有设置高度或者设置最小高度，父元素会出现高度塌陷
高度塌陷的解决方法：
1、给高度塌陷的元素设置：overflow：hidden（原理：因为overflow：hidden触发了一个BFC，块格式上下文，有一个布局规则，计算BFC高度的时候，里面的浮动元素也参与计算的）。弊端：会隐藏掉定位在当前元素外面的内容。
2、给出现高度塌陷的元素里面，放在浮动元素的后面，添加空的div，并且给div{clear：both}
原理：忽略上面的浮动元素预留出来的空间
弊端：形成不必要的空标签，代码冗余
3、万能清除法：
选择符：after{content:".";display:block;height:0;clear:both;overflow：hidden；visibolity：hidden；}（谁出现高度塌陷，谁就拥有选择符的样式）
解释：after？
伪对象选择符：
：after{content："在什么后添加内容"；}
：befor{content:"在什么之前添加内容"；}
：first-letter{第一个}
：first-line{第一行}伪对象选择符用在块装元素下面。
高度自适应第一种方法：
高度自适应第一种情况：
当height：auto或者是height不设置，子元素撑开父元素height需求：
a、当内容少，让父元素保持一个最小高度
b、当内容多，让父元素被内容撑开最小高度的设置方法：
min-height（最小高度）
高度自适应第二种方法：
高度自适应第二种方法：
需求：让子元素的高度跟着父元素高度进行变化。
height：100%；（就是跟着父元素的100%）
需求：让元素铺满浏览器的宽度和高度
宽度：
width：去掉。默认就是100%，只有浮动和定位的情况下必须设置成100%。否则消失。
如果输入内容，宽度就是根据文本宽度。实现一个元素在浏览器窗口铺满。前提条件，必须设置html、body{height:100%}
让一个元素铺满浏览器的宽和高的方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
/* 元素铺满整个网页 */
body,html{
height:100%
}
.box{
width: 100%;
height: 100%;
background: orange;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
以上是关于css高度自适应以及高度塌陷总结的主要内容，如果未能解决你的问题，请参考以下文章
CSS之div嵌套问题及高度自适应问题的五种实现--个人总结