这里介绍下自己在实践过程中遇到的一些css布局的问题，一方面做个备忘，也希望给大家带来一点帮助。
如何让div显示为整个页面的高度
我们有时希望一个container显示为整个页面高度，很容易想到将它的高度设置为100%，可是实际显示的效果却不是我们想要的。我用一张张图说明原因：html和body默认高度都是匹配内容高度的，我们想要让container的高度和页面高度一样，得先把html和body的高度设置为100%
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>两列布局</title>
<style>
*{
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html, body{
height: 100%;
}
.container{
height: 100%;
background-color: #B0B0B0;
}
</style>
</head>
<body>
<div class="container">
<div class="left">我是left</div>
<div class="right">我是right</div>
</div>
</body>
</html>- 如何做两列布局，并且做到等高
现实中经常见到这种的页面——左边是导航链接，右边是内容，当显然右边的内容页的高度会比左边的导航页的宽度高，那怎么让左边随着右边的高度增加而增加呢？
其实做到两点就好了，第一：设置左边的宽度为固定值A，float为left，右边的div的margin-left为固定值A；第二：在左边div和右边div的css里分别加上margin-bottom: -2000px;padding-bottom: 2000px; 2000是个很大的值，你可以设得更大。这样就做到了等高。
<style>
*{
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html, body{
height: 100%;
}
.container{
height: 100%;
background-color: #B0B0B0;
}
.left{
float: left;
background-color: #FFFFFF;
width: 150px;
margin-bottom: -2000px;
padding-bottom: 2000px;
padding-left: 20px;
padding-top: 20px;
}
.left ul li{
list-style: none;
}
.left ul li a{
text-decoration: none;
}
.right{
margin-left: 150px;
text-align: center;
background-color: antiquewhite;
/*height: 100%;*/
padding-top: 20px;
margin-bottom: -2000px;
padding-bottom: 2000px;
}
</style>