将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下方，但如果内容不大，则屏幕（不滚动）页脚将位于屏幕底部。认为这就是你想要的。看看和玩它。

更新了小提琴，因此更容易看到背景。

Answer 2

试试position:fixed; bottom:0;。这将使你的div保持固定在底部。

<强> WORKING DEMO

HTML：

<div id="bottom-stuff">
  <div id="search"> MY DIV </div>
</div>
<div id="bottom"> MY DIV </div>

CSS：

#bottom-stuff {

    position: relative;
}

#bottom{

    position: fixed; 
    background:gray; 
    width:100%;
    bottom:0;
}

#search{height:5000px; overflow-y:scroll;}

希望这有帮助。

Answer 3

内森·李的回答非常完美。我只想添加一些关于position:absolute;的内容。如果您想在代码中使用position:absolute;，则必须将其视为将其从页面的一侧推开。

例如，如果您希望div位于底部的某个位置，则必须使用position:absolute; top:500px;。这会将您的div 500px从页面顶部推出。所有其他指示同样适用。

DEMO

Answer 4

这是一个快速修复，我希望它有所帮助。

List<X2>

的CSS：

<div id="content">
content...
</div>
<footer>
content footer...
</footer>

100vh是设备的100％高度，100px是页脚高度

如果内容高于设备的高度，则页脚将保持在底部。 并且内容比设备的高度短，页脚将停留在屏幕的底部

Answer 5

简单的2020年绝招方法：

body {
    display: flex;
    flex-direction: column;
}

#footer {
    margin-top: auto;
}