一个简单的盒型布局方式,上中下,中间分为左边菜单,右边content。大致效果如截图所示。
头部固定在上方,底部固定在下方,中间左边菜单部分固定,中间右边content根据内容的长度出现滚动条。
上部,底部,固定使用fixed,然后中间部分设置为absolute,后设置top,bottom大小。不多说了,还是看代码吧!
HTML:
css:
.header {
margin: 0 auto;
width: 100%;
height: 60px;
position: fixed;
top: 0;
background: #464C5B;
}
.main {
width: 100%;
position: absolute;
top: 60px;
bottom: 30px;
overflow: auto;
padding-top: 10px;
}
.menu {
width: 250px;
position: fixed;
top: 60px;
left: 0;
bottom: 30px;
}
.content {
margin-left: 250px;
overflow: auto;
}
.footer {
width: 100%;
margin: 0 auto;
position: fixed;
bottom: 0;
height: 30px;
line-height: 30px;
background: #464C5B;
}
html,body{
height:100%;
margin:0;
padding:0;
}
这个就可以啦,如果不想要底部,去掉就好,在设置一下bottom就好啦。