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布局完整实例