html - 灵活高度页眉和页脚 div 之间的灵活 div 高度

Question

我想在水平方向上实现与您在垂直方向和兼容 方面看到的相同的目标IE9+

[编辑]：我希望溢出的中间内容有滚动条，在这种情况下，表格将无济于事。

jsFiddle

CSS：

.container{
    width: 100%;
    height: 100%;
    position: relative;
    background-color: silver;
}

.top{
    width: 50px;
    height: 100%;
    position: relative;
    float: left;
    background-color: red;
}

.bottom{
    width: 50px;
    height: 100%;
    position: relative;
    float: right;
    background-color: green;
}

.middle{
    background-color: blue;
    overflow: hidden;
    height: 100%;
}

HTML：

<div class="container">
    <div class="top"></div>
    <div class="bottom"></div>
    <div class="middle"></div>
</div>

---

问题：没有 javascript 和任何固定值是否可行？

我不想做这样的事情：

.top-div {
    height: 50px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
.middle-div{
    top: 50px;
    bottom: 50px;
    left: 0;
    right: 0;
    position: absolute;
}
.bottom-div{
    height: 50px;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
}

在这种情况下，如果我想更改页脚或页眉的高度，我不得不使用 JavaScript。

Answer 1

现在你必须给你的容器高度。准备好内容后，只需将高度更改为自动。

此外，当您将高度更改为自动时，请根据您的页面需要更改中间 div 的边距顶部。

<style>
.container div{
    float:left; }
  .container{
    width: 100%;
    height: 100%;
    position: relative;
    background-color: silver;
}

.top{
    width: 100%;
    height: 100px;
    position: fixed;
    top:0;
    background-color: red;
}

.bottom{
    width: 100%;
    height: 100px;
    position: fixed;
    bottom:0;
    background-color: green;
}

.middle{
    margin-top:100px;
    width: 100%;
    background-color: blue;
    height: 1000px;
}
</style>
<div class="container">
    <div class="top"></div>
    <div class="bottom"></div>
    <div class="middle"></div>
</div>

Answer 2

使用 css3 中的 calc

样式：

body,html{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.container{
    height: 100%;
    background-color: silver;
}
.container,.top, .bottom, .middle{
    display:block;
    clear:both;
    position: relative;
    width: 100%;
}
.top{
    height: 50px;
    width: 100%;
    background-color: red;
}

.bottom{
    height: 50%;
    position: relative;
    background-color: green;
}

.middle{
    background-color: blue;
    overflow: hidden;
    -webkit-height: calc(100%  -  100px);
    -moz-height: calc(100%  -  100px);
    height: calc(100%  -  100px);
}

标记：

<div class="container">
    <div class="top"></div>
    <div class="middle"></div>
    <div class="bottom"></div>
</div>

演示：http: //jsfiddle.net/YL4f3/1/