Question

我一直在尝试使用以下功能创建布局：

3个流体柱
全高的
标题
粘性页脚

我在这里找到了类似的问题：CSS layout with header, footer and multiple 100% min-height content columns

作者使用基于表格的布局解决了这个问题。我想尽可能避免使用表格，这样我就可以轻松地在较小的屏幕上隐藏外部列。

以下是我目前创建的代码：http://cdpn.io/DqGfp

正如您在我的codepen演示中所看到的，我几乎就在那里。刷新会在所有情况下产生正确的布局，但理想情况下，这也应该在调整大小时发生。

以下是我正在尝试修复的调整大小错误：

从高大的窗口移动到短窗口会导致不必要的滚动条。
从宽窗口移动到薄窗口会导致中间列中的内容位于页脚下方。

我尝试过使用

$(window).height()

而不是

$(document).height()

但这会导致一大堆新错误。

非常感谢任何帮助！

Answer 1

试试这个：

<强> HTML：

<div class="wrapper">
    <header>
        The header
    </header>
    <div class="column green">
        Column 1
    </div>
    <div class="column blue">
        Column 2
    </div>
    <div class="column yellow">
        Column 3
    </div>
    <footer>
        Sticky footer
    </footer>
</div>

<强> CSS：

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

.wrapper {
    height: 100%;
}

header {
    background-color: orange;
}

.green {
    background-color: green;
}

.blue {
    background-color: blue;
}

.yellow {
    background-color: yellow;
}

.column {
    width: calc(100%/3);
    min-height: 100%;
    display: inline-block;
    float: left;
}

footer {
    position: absolute;
    bottom: 0;
}

Fiddle.

Answer 2

您可以通过两种方式解决此问题，

使用re-size jQuery函数在窗口调整大小时再次执行操作。

$(window).resize(function(){
     ////Write your code here again
})

或者您可以使用css属性将DIV定位在底部。

position:fixed; bottom:0; left:0; right:0; height:100px;

Answer 3

所以我明白了。我需要清除所有强制列高度，然后在调整窗口大小时重新计算它们。

以下是有关我的解决方案的帖子的链接：http://benpearson.com.au/web-development/3-column-fluid-layout-with-header-sticky-footer-and-100-percent-height-columns/

感谢您的帮助。

流体3列布局，带有标题，粘性页脚和全高列

3 个答案: