Question

我正忙着制作三个列（不是页眉或页脚，但是包含在colmask和threecol中的div中包含的所有内容。

我已经让body和html标签有100％的高度。我已经尝试使#wrapper div高度为100％，colmask div高度为100％，但这会延伸到页面上（如果没有页眉或页脚，那将是正确的）。帮助将不胜感激。

Answer 1

您需要Sticky Footer。没有它你将无法做很多事情，让你的网站达到100％的高度很有趣。

基本上，您可以像这样布局网站：

<div id="wrapper">
  <header>
    ...
  </header>

  <div id="main">
    ...
  </div>
</div>

<div id="footer">
  ...
</div>

然后加入magical CSS。根据您的需要调整它，因为它不会开箱即用。

Answer 2

一个简单的javascript答案是（使用jQuery）：

var hdr_hght = $('#header').height();
var ftr_hght = $('#footer').height();
var set_height = function () {
  $('.colmask').css({ height: $(window).height - hdr_hght - ftr_hght});
}
$(window).resize(set_height);
set_height();

询问您是否需要标准（非jQuery）版本。

Answer 3

您还可以使用类似于footerStickAlt的内容，其中包含以下格式的HTML：

<html>
    <body>
        <div id="nonFooter">
            <div id="content">
                ...
            </div>
        </div>
        <div id="footer">
        </div>
    </body>
</html>

适用的CSS为explained by The Man in Blue。

Answer 4

所以，我在@ Blender的解决方案中搞砸了一段时间，无法让它完全按照我的意愿行事。所以，我采用了一种不同的，类似的解决方案，对我来说似乎相当优雅。

http://brassblogs.com/blog/sticky-footer

三列，流体中心柱，页眉，页脚，我需要的所有功能。活泉！

使列扩展页面的整个高度

4 个答案: