html - 具有固定元素和多个滚动条的特定 CSS 布局

Question

在过去的几天里，我对网站想要的特定布局有一些问题。我添加了一张图片来解释布局以及我在下面尝试的一些 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;
}

Answer 1

这是你想要的吗？演示

消除

.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%;
}

用。。。来代替

div.left, 
div.right {
    display:inline;
    float: left;
    position: relative;
    height: 100%;
    overflow-y: scroll;
}

.left {
    width: 30%;
}

.right {
    width: 70%;
}

更新 演示

*
{
    margin:0;
    padding:0;
}

div.wrapper {
    width: 100%;
    min-width: 600px; /* If the window gets bellow 600px .left will stay 30% of 600 and .right will stay 70% of 600*/
}

div.left, 
div.right {
    display:inline;
    float: left;
    position: relative;
    height: 100%;
    overflow-y:scroll; 
}

.left {
    width: 30%;
    background: red;
}

.right {
    width: 70%;
    background:green;
}

.header
{
    background-color:#CCC;
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:40px;
}

.wrapper
{
    position:absolute;
    width:100%;
    top:40px;
    bottom:40px;
}



.footer
{
    background-color:#000;
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    min-width:500px;
    height:40px;
}​​​

Answer 2

我们最终使用了 flex-box 布局，以便能够使用例如 300px 并让其余部分保持流畅。