在过去的几天里,我对网站想要的特定布局有一些问题。我添加了一张图片来解释布局以及我在下面尝试的一些 CSS 代码。我尝试使用浮动布局、绝对定位和各种组合来修复布局,但我似乎无法做到正确。我希望你们中的任何人都可以帮助我解决这个问题。
这是布局图像:
这是CSS代码:
html, body {
overflow:hidden;
}
* {
margin:0;
padding:0;
}
.header {
background-color:#CCC;
position:fixed;
left:0;
top:0;
width:100%;
height:40px;
}
.wrapper {
position:absolute;
width:100%;
top:40px;
bottom:40px;
}
.left {
float:left;
overflow-y:scroll;
width:30%;
min-width:300px;
height:100%;
}
.right {
float:left;
overflow-y:scroll;
right:0;
width:70%;
height:100%;
}
.footer {
background-color:#000;
position:fixed;
bottom:0;
left:0;
width:100%;
min-width:500px;
height:40px;
}