3

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

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

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

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

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

4

4 回答 4

0

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

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

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

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

我把它涂成绿色，这样你就可以知道查询何时触发。

于 2013-05-15T06:58:04.930 回答
0

我只想给你outer-wrapper100% 的高度（连同 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将永远保持身体的高度。不需要 950px 最小高度，因为如果视口太小，您希望它无法滚动，而在另一种情况下，视口大于 950px - 嗯，它大于 950px - 这是一件好事。

于 2013-01-21T09:20:08.973 回答
0 
.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:

图像-1 图像-2

于 2013-01-21T09:40:51.133 回答
-1

在此处从您的代码中编辑部分

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

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

于 2013-01-21T09:17:37.130 回答