想让子元素撑满父元素，首先想到的就是 height:100% ，但是却经常无效……
究其原因，大概是因为其父元素没有“固定”的高度--无法在子元素全部绘出之前计算出其高度，那么子元素的100%高度也就没有意义了。
典型的情形一，设置div的高度撑满浏览器窗口。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css height 100</title>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
}
.div-1 {
width: 200px;
height: 100%;
background-color: red;
}
</style>
</head>
<body>
<div class="div-1"></div>
</body>
</html>典型的情形二、设置子元素的完全覆盖父元素。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css height 100</title>
<style>
.div-1 {
position: relative;
width: 200px;
height: 200px;
background-color: gold;
}
.div-2 {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: red;
}
/* 下面这种写法也可以, 这里主要是说height=100%，所以用了上面的写法 */
/* .div-2 {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background-color: red;
} */
</style>
</head>
<body>
<div class="div-1">
www.zhuige.com
<div class="div-2"></div>
</div>
</body>
</html>-
css详解系列：10-Flex项目属性orderorder 属性 用来设置或检索弹性盒模型对象的项目（子元素）在容器中出现的順序。
-
css详解系列：11-Flex项目属性align-selfalign-self属性定义flex子项单独在侧轴（纵轴）方向上的对齐方式。
-
css实现点击切换图片效果的方法在css中我们可以使用伪类选择器来实现点击切换图片的效果，看看如何实现的。
-
css样式表的三种样式css（级联样式表）主要有三种样式定义方式
-
如何在css中实现样式优先级在css中，样式优先级是由一系列规则决定的，这些规则决定了当多个样式规则应用于同一个HTML元素时，哪个规则会优先生效。
-
css文本超出显示3个点的方法在css中，如果你想让超出特定长度的文本显示为三个点（...），你可以使用text-overflow属性，配合overflow和white-space属性。
暂无评论，抢个沙发...