Question

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

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

Answer 1

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

<强>解释

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

液体布局有两列和一个页脚

1 个答案: