将所有内容与页面底部对齐？ [英] Align all content with the bottom of the page?
问题描述
我试图将html页面与浏览器窗口的底部对齐。这是我的apporach：
I'm trying to align a html-page with the bottom of the browser-window. This is my apporach:
<body>
<div class="outer-wrapper">
</div>
</body>
.outer-wrapper{
min-height: 950px;
width: 100%;
position: absolute;
bottom: 0;
}
此解决方案的问题是当屏幕小于950像素高时，外部封装的顶部在屏幕上方消失，并且不添加滚动。身体和外包装都有一个背景图像。
The problem with this solution is that when the screen is smaller than 950px high, the top of the outer-wrapper disapears above the screen and no scroll is added. Both the body and the outer-wrapper has a background-image.
这里是一个示例，如您所见，红色框的顶部在正文之上。
http://jsfiddle.net/C5Nce/1/
Here is a sample, as you can see, the top of the red box is above the body. http://jsfiddle.net/C5Nce/1/
推荐答案
如果我明白你想要什么，下面的演示应该可以工作：
The following demo should work, if I understand what you want correctly:
http://jsfiddle.net/C5Nce/10/show/
我刚刚使用媒体查询来检测页面是否小于550px，并将元素固定到顶部，而不是：
I just used a media query to detect when the page is less than 550px and set the element to be pinned to the top instead:
@media screen and (max-height: 550px) {
.outer_wrapper {
top: 0;
}
}
我的颜色为绿色，该查询触发。
I've coloured it green so you can tell when the query fires.
这篇关于将所有内容与页面底部对齐？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
