具有固定元素和多个滚动条的特定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

这是你想要的吗？ DEMO

删除

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

更新 DEMO

*
{
    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，其余部分是流畅的。