如何填充页眉和页脚之间的空白垂直空间答案

【问题标题】：How to fill empty vertical space between header and footer如何填充页眉和页脚之间的空白垂直空间
【发布时间】：2014-07-10 19:26:34
【问题描述】：

我有一个带有文本及其填充的标题；页脚，带有文本及其填充以及内容。内容具有背景图像和文本，具有相对边距。我希望内容填充页脚和页眉之间的空白空间，因此页面已满。我该怎么做？谢谢！

编辑：我有这个代码：

<header>
    <ul class="breadcrumbs">
        <li><a href="#1">1</a></li>
        <li><a href="#2">2</a></li>
        <li><a href="#3">3</a></li>
    </ul>
</header>

<main>
    <h1>hello</h1>
</main>

<footer>
    <h1>bye</h1>
</footer>

使用js，我将页脚和页眉的高度减去窗口的高度：

$('main').height($(window).height() - $('header').height() - $('footer').height());

但这并不准确，我还有一点垂直滚动。

【问题讨论】：

您将不得不添加一些代码来显示您为自己完成此任务所付出的努力。在您向此展示您当前的相关代码后，您将更有可能获得帮助。

标签： css

【解决方案1】：

我已经解决了，我已经将减法上的 height() 替换为 outerHeight(true)，并在三个元素（主要、页眉、页脚）中添加了“溢出：隐藏”以避免折叠边距效果.

【讨论】：