HTML 布局

网站可以使用 <div> 或者 <table> 元素来进行网页布局，但是<table>不是布局工具，推荐使用<div>。以下实例都采用 <div>

布局实例

布局中，为了让页面主体内容占满屏幕，一般都会有以下设置：

html,body{  
	width:100%;
	height: 100%;
}

1.浮动布局

浮动布局主要用到 float 样式。图一中分头部，中间，底部。中间部分用到 calc() 方法。高度需要减去头部和底部的高度。 calc 是 css 函数，用于动态计算长度值，需要注意的是，运算符前后都需要保留一个空格。

.content{ height: calc(100% - 100px); }

中间部分又分左右，这里用到 float 样式。

.sidebar{ 
	width: 200px;
	height: 100%;
	float: left;
}

查看浮动布局完整实例

2.margin 布局

margin 布局跟浮动局部不一样的是中间部分的左右划分。左边使用了绝对定位， 右边用 margin-left（左外边距），其值为左边的宽。

.sidebar{
	position: absolute;
	left: 0;
	top: 0;
	width: 200px;
	height: 100%;
}
.main{
	height: 100%;
	overflow: auto;
	margin-left: 200px;
}

查看margin布局完整实例