将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;因此您可以看到向下滚动的内容.

在这里演示

此演示具有内容的高度,height: 100px;因此您可以看到没有滚动的情况.

在这里演示

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

更新了小提琴,因此更容易看到背景.

Answer 2

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

工作演示

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

2020年简单无技巧方法：

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

#footer {
    margin-top: auto;
}

Answer 4

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

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

css：

#content{min-height: calc(100vh - 100px);}

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

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