html - 具有两列和一个页脚的液体布局

Question

我正在尝试构建一个带有两列和底部固定页脚的液体布局。我已经在这里得到了一些帮助，上面有一个例子。

http://jsfiddle.net/kpDDM/18/

我的例子的问题是它有一个固定的高度。当我在内容 div 上移动到 100% 高度时，内容会崩溃。

Answer 1

你需要这样的东西吗：http: //jsfiddle.net/kpDDM/44/

HTML

<div class="all">
    <div class="content">
      <div class="left">&nbsp;</div>  
      <div class="right">&nbsp;</div>
    </div>
    <div class="footer"></div>
</div>

CSS

.all {
    position: relative;
    height: 100%;
    width: 100%;
}

body,html{
    height:100%;
}

.content {
    display:inline-block;
    height: 90%;
    width: 100%;
}

.left {
    display: inline-block;
    float: left;
    width: 60%;
    height: 100%;
    background-color: red;
}

.right {
    display:inline-block;
    float: left;
    width: 40%;
    height: 100%;
    background-color: blue;
}

.footer {
    display: inline-block;
    width: 100%;
    height: 10%;
    background-color: green;
}

解释

问题是body标签本身并不是100%。你必须将它分配给身体，然后它会起作用。在上面的示例中，我假设内容 + 页脚共享 100% 的高度。90% + 10%