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