将所有内容与页面底部对齐？答案

【问题标题】：Align all content with the bottom of the page?将所有内容与页面底部对齐？
【发布时间】：2013-01-21 09:10:55
【问题描述】：

我正在尝试将 html 页面与浏览器窗口的底部对齐。这是我的方法：

<body>
  <div class="outer-wrapper">
  </div>
</body>

.outer-wrapper{
    min-height: 950px;
    width: 100%;
    position: absolute;
    bottom: 0;
}

这个解决方案的问题是，当屏幕高度小于 950px 时，外包装的顶部会在屏幕上方消失，并且不会添加滚动。主体和外包装都有背景图像。

这是一个示例，如您所见，红色框的顶部在主体上方。 http://jsfiddle.net/C5Nce/1/

【问题讨论】：

包装器的最小高度是否必须为 950 像素？
是的，里面有图形（还有内容）。虽然我可以设置高度 950px
所以你想要一些固定在页面底部的东西，但如果 body 小于绝对定位的元素，也可以获得滚动条？

标签： css

【解决方案1】：

如果我正确理解您想要的内容，以下演示应该可以工作：

http://jsfiddle.net/C5Nce/10/show/

我只是使用媒体查询来检测页面何时小于 550 像素，并将元素设置为固定到顶部：

@media screen and (max-height: 550px) {
       .outer_wrapper {
           top: 0;
       }
}

我已将其涂成绿色，以便您知道查询何时触发。

【讨论】：

【解决方案2】：

.outer {
    position:absolute;
    height:100%;
    width:100%;
    background-color:#aaaaaa;
    margin:0;
    padding:0;
}
.content {
    position:relative;
    width:90%;
    height:90%;
    background-color:#444444;
    margin:5%;
}
.inner {
    position:absolute;
    height:20%;
    width:100%;
    background-color:#eeeeee;
    bottom:0;
    margin-bottom:10%;
}

<div class="outer">
    <div class="content">
        <div class="inner"></div>
    </div>
</div>

http://jsfiddle.net/L8H9J/

1) 从内部类中移除 margin-bottom 样式

2) 你在内部类中添加的所有内容都会与底部对齐

3) 由于 HTML 中的文档流，您不能明确地将它们与底部

4) 你可以使用这个技巧，但是内部类中的所有元素都将是 position:static的流量

5) 使用 JavaScript 来确定内部每个元素的合适边距内部类

提示： Use percentages; although you want the wrapper to be of height ~950px, but if you can use percentages for the dimensions, you would really love watching your web applications scale with the browsers:

【讨论】：

【解决方案3】：

我只想给你的outer-wrapper 100% 的高度（连同 html、body）：

html, body {
    height: 100%;
    padding: 0;
    margin: 0;
}

.outer-wrapper {
    height: 100%;
    width: 100%;
    position: absolute;
    bottom: 0;
    overflow-y: auto;
    background-position:bottom; //Edit
}

那么outer-wrapper会一直保持body的高度。不需要 950px 最小高度，因为如果视口太小，您希望它无法滚动，而在另一种情况下，视口大于 950px - 嗯，它大于 950px - 这是一件好事。

【讨论】：

这个解决方案的问题是 .outer-wrapper 有背景。当我滚动时，背景不会显示在折叠下方。
outer-wrapper 背景仍会随着 div 内容滚动。如果要更改此设置，可以使用 background-attachment 属性。
我正在尝试将背景与文档底部对齐。
@KristofferNolgren 你可以使用background-position?查看我的更新
是的，我可以，但是，问题是如果我不将 .outer-wrapper 定位为底部：0，则外包装在折叠处结束。

【解决方案4】：

从您的代码here编辑部分

.outer_wrapper 
{
    background-color:red;
    /*min-height: 550px;*/
    margin-left: -75px; 
    top:auto;
    bottom: 0;
    position: absolute;
    left:50%;
}

并且您正在指定您的红色框在主体上方，如果您将它放在主体内，它应该像它一样放置，因为您还指定了容器的min-height。

【讨论】：

如果我添加 top:0，.outer-wrapper 与页面顶部对齐，而不是底部...
我指定了零，因为我认为您想要一个容器，它可以在调整页面大小时保持其大小，因为它对我有用。
你能发一张它的屏幕截图吗？
我在问题中添加了一个 JS-fiddle，PS。不是我否决了你的建议。