jquery - 带有页眉、粘性页脚和全高列的流畅 3 列布局

Question

我一直在尝试创建具有以下功能的布局：

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

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

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

这是我到目前为止创建的代码：http: //cdpn.io/DqGfp

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

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

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

我试过使用

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

小提琴。

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/

谢谢您的帮助。