带有粘性页脚的引导全高答案

【问题标题】：Bootstrap full height with sticky footer带有粘性页脚的引导全高
【发布时间】：2014-06-04 17:39:24
【问题描述】：

当内容不足时，我在尝试覆盖浏览器窗口的整个高度时遇到了一个小问题。我在 Orchard CMS 中使用引导程序，以防这有任何相关性。

问题可以看这里的图片

页面结构非常基本：

<body style="background-color: #b0a2b0;">
<div id="layout-wrapper" style="margin: 0px auto -75px; padding: 0px 0px 75px;">
    <div class="container">
        .... stuff ...
    </div>
    <div class="container">
        ... other stuff
    </div>
</div>
<div id="footer" style="height: 75px;">
    <div class="container">
    </div>
</div>
</body>

html、body 和 #layout-wrapper 都将高度设置为 100%。到目前为止，我的聪明想法是添加一个额外的容器并相应地调整它的大小。问题是我需要注意窗口调整大小时以及页面上是否隐藏或显示某些内容（因为这会改变可用高度）。

我尝试将此填充 div 设置为 height: 100%，但它似乎超出了页脚，最终基本上比页面长，向下滚动最终将页脚向上拖动。

作为最终结果，我希望页脚粘在底部并且页面是全长的，即使在调整大小或显示/隐藏时也是如此。

有什么想法吗？

【问题讨论】：

是的，我确实尝试了其他方法，确实#layout-wrapper div 延伸到了 100% 的高度，但其中的容器并没有填满所有可用空间。
+1。溢出专家可能认为这是一个答案显而易见的愚蠢问题，但是我对 CSS 和 Bootstrap 都是一个菜鸟，并且遇到了完全相同的问题。感谢这个问题和包含的链接，我现在有一些东西可以 (a) 解决我的问题，并且 (b) 我明白了！

标签： html css twitter-bootstrap

【解决方案1】：

感谢大家，主要是为了让我找到正确的搜索方向。我在 SO 上找到了这个精彩的答案：CSS 100% height with padding/margin

基本上我给了我的垂直填充以下 CSS：

.verticalFiller {
    display:block;
    position:absolute;
    height:100%;
    bottom:0;
    top:0;
    left:0;
    right:0;
    z-index: -9999;
}

这将使填充物成为一个全高 div，位于所有 .containers 后面并显示所需的白色部分。

【讨论】：

这种方法可行，但由于内容在.container 后面，因此您无法点击其中的任何内容（表单元素、按钮...）
这个div的目的只是在页面底部的内容和页脚之间提供额外的白色背景（看帖子中的图像）。它应该没有内容。

【解决方案2】：

对于纯 CSS 解决方案：将页脚的位置设置为绝对位置，将 top 值设置为 100% 并且边距等于负高度，因此页面在底部上方准确地显示 height页。我也发现它有助于缩小身体。

body {
   height:95%;
}

.footer {
    position:absolute;
    top:100%;
    height:20px;
    margin-top:-20px;
    width:100%;
}

demo

编辑：

刚刚意识到如果页面不是全长，您希望页脚移动。在我的网站上，我只是确保背景颜色保持一致，这样页脚就不会显得格格不入，否则我猜想 JS 解决方案能够更好地考虑到这种情况。

【讨论】：

【解决方案3】：

嗯，我们解决这个问题的方法是使用 JS。在我们的布局中，我们总是包含一个小的 JS 代码，它会在文档准备好时进行检查，并且它还绑定到屏幕调整大小事件。

基本上，我们确实有一个容器，用于输出我们的内容。所以，我们用

检查用户的屏幕高度

$(window).height();

如果这个尺寸小于内容+页脚+页眉；然后我们必须像这样调整容器高度：container.hegiht = screen.height - (footer.height + header.height)

为了让它更柔和，我们应用了动画。

检查代码（JS）：

function(container){
  var footer = $('.footer').height();
  var header = $('.navbar').outerHeight() + parseInt($('.navbar').css('margin-bottom'));
  var screenHeight = $(window).height();
  if ( ! ( screenHeight < ( (container.outerHeight() + parseInt(container.css('margin-bottom')) ) + footer + header) ) ) {
    // If it is, resize container
    // container.height( screenHeight - (header + footer ) );
    var height = screenHeight - (header + footer );
    container.animate({height: height }, 500);
  }
}

这是我们的做法，到目前为止进展顺利。

别忘了在 DOM 上调用这个函数 - 准备好和调整窗口大小。

希望对你有帮助！

【讨论】：

在 CSS 中有很多方法可以做到这一点，使用 JavaScript 是完全错误的方式。
是的，忘了说我们已经有了 JS 解决方案，但这还不够。您需要记住在页面上的元素显示和隐藏时也应用它，因为这会改变周围 div 的高度。