Question

当内容不足时，我遇到一个小问题，试图覆盖浏览器窗口的整个高度。我在Orchard CMS中使用bootstrap，这有任何意义。

问题可以在这里看到

Gutters bleeding into content

页面结构非常基础：

<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%，但它似乎从页脚开始拍摄，结束时间基本上比页面长，向下滚动最终会向上拖动页脚。

我最喜欢的结果是，即使有大小调整或显示/隐藏的内容，页脚也会粘在底部，页面也会全长。

有什么想法吗？

Answer 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;
}

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

Answer 2

对于纯CSS解决方案：将页脚的位置设为绝对，将top值设置为100％，并将边距设置为负高度，以便页面在上面显示height页面底部。我也发现收缩身体会有所帮助。

body {
   height:95%;
}

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

demo

编辑：

刚刚意识到如果页面不是全长，你想要页脚移动。在我的网站上，我确保背景颜色一致，所以页脚看起来不合适，否则我想JS解决方案会更好地考虑这种事情。

Answer 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上调用此函数 - Ready和on window resize。

希望它有所帮助！

引导全高度与粘性页脚

3 个答案: