Question

我想在水平方向上实现同样的目标，而 see here 垂直和IE9+兼容

[编辑]：我想溢出的中间内容有滚动条，在这种情况下，tabling不会有帮助。

的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

使用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/

Answer 2

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

此外，当您将高度更改为自动时，请根据您的页面需要更改中间div的margin-top。

<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>

灵活的高度标题和页脚div之间的灵活div高度

问题：没有javascript和任何固定值可以吗？

2 个答案: