html - 将 DIV 对齐到页面底部

Question

我有一个 DIV 需要与搜索结果页面的底部对齐，问题 是当没有搜索结果 或行数较少时搜索结果显示在页面上，DIV从页面底部上升。

但是应该这样放

每当有更多行并且页面可以向下滚动时，DIV 就应该像这样放置。

我当前的代码是这样的

        <div id="bottom-stuff>

            <div id="bottom">
                             // DIV stuff
            </div>

        </div>


#bottom-stuff {
    padding: 0px 30px 30px 30px;
    margin-left:150px;
    position: relative;
}

#bottom{

    position: absolute; bottom: 0px; 
}

Answer 1

好吧，我想我知道你的意思，所以让我们看看......

HTML:

<div id="con">
   <div id="content">Results will go here</div>
   <div id="footer">Footer will always be at the bottom</div>
</div>

CSS:

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
div {
    outline: 1px solid;
}
#con {
   min-height:100%;
   position:relative;
}
#content {
   height: 1000px; /* Changed this height */
   padding-bottom:60px;
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;
}

这个演示有内容的高度height: 1000px; 所以你可以看到向下滚动底部的样子。

DEMO HERE

这个演示有内容的高度 height: 100px; 所以你可以看到没有滚动的样子。

DEMO HERE

因此，这会将页脚移动到 div content 下方，但如果内容不大于屏幕(无滚动)，页脚将位于屏幕底部。认为这就是你想要的。看看并玩一玩。

更新了 fiddles，以便更容易看到背景。