Question

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

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

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

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

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

Answer 1

我只会给你的outer-wrapper高度100％（以及html，正文）：

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将始终保持身体的高度。不需要950px高度min，因为在视口太小的情况下你想要滚动它而在另一种情况下视口大于950px - 好吧，它大于950px - 那个＆＃39是一件好事。

Answer 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:

Answer 3

如果我理解你想要的东西，下面的演示应该有效：

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

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

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

我将其着色为绿色，以便您可以判断查询何时触发。

Answer 4

从您的代码here

编辑部分

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

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

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

4 个答案: