Html 将 DIV 与页面底部对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20370396/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Align DIV to bottom of the page
提问by Naveen Gamage
I have a DIV that needs to be aligned to the bottom of a search result page, problemis whenever there is no search resultor less rows of search resultdisplayed on the page, the DIV goes up from the bottom of the page.
我有一个需要与搜索结果页面底部对齐的 DIV，问题是每当页面上没有搜索结果或搜索结果行数较少时，DIV 从页面底部上升。
but it should be placed like this
但它应该像这样放置
and whenever there are more rowsand the page can be scrolled down, the DIV should be place like this.
每当有更多行并且页面可以向下滚动时，DIV 应该像这样放置。
My currrent code looks like this
我当前的代码看起来像这样
<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;
}
回答by Ruddy
Right I think I know what you mean so lets see....
是的，我想我知道你的意思，所以让我们看看......
HTML:
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:
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;
}
This demo have the height of contentheight: 1000px;so you can see what it would look like scrolling down the bottom.
这个演示有内容的高度，height: 1000px;所以你可以看到向下滚动底部的样子。
This demo has the height of content height: 100px;so you can see what it would look like with no scrolling.
该演示具有内容的高度，height: 100px;因此您可以在不滚动的情况下看到它的外观。
So this will move the footer below the div contentbut if content is not bigger then the screen (no scrolling) the footer will sit at the bottom of the screen. Think this is what you want. Have a look and a play with it.
因此，这会将页脚移动到 div 下方，content但如果内容不大于屏幕（不滚动），则页脚将位于屏幕底部。想想这就是你想要的。看一看，玩一玩。
Updated fiddles so its easier to see with backgrounds.
更新了小提琴，以便更容易看到背景。
回答by Nitesh
Try position:fixed; bottom:0;. This will make your div to stay fixed at the bottom.
试试position:fixed; bottom:0;。这将使您的 div 保持固定在底部。
The HTML:
HTML：
<div id="bottom-stuff">
<div id="search"> MY DIV </div>
</div>
<div id="bottom"> MY DIV </div>
The CSS:
CSS：
#bottom-stuff {
position: relative;
}
#bottom{
position: fixed;
background:gray;
width:100%;
bottom:0;
}
#search{height:5000px; overflow-y:scroll;}
Hope this helps.
希望这可以帮助。
回答by levkaster
Finally I found A good css that works!!! Without position: absolute;.
终于我找到了一个很好用的css！！！没有position: absolute;.
body {
display:table;
min-height: 100%;
}
.fixed-bottom {
display:table-footer-group;
}
I have been looking for this for a long time! Hope this helps.
我找这个很久了！希望这可以帮助。
回答by Marco Antonio Aguilar Gomez
It's a quick fix, I hope it helps.
这是一个快速修复，我希望它有所帮助。
<div id="content">
content...
</div>
<footer>
content footer...
</footer>
css:
css：
#content{min-height: calc(100vh - 100px);}
100vh is 100% height of device and 100px is height of footer
100vh 是设备的 100% 高度，100px 是页脚的高度
If the content is higher than height of device, the footer will stay on bottom. And the content is shorter than height of device, the footer will stay on bottom of screen
如果内容高于设备高度，页脚将停留在底部。并且内容短于设备高度，页脚将停留在屏幕底部
回答by Josan Iracheta
Nathan Lee's answer is perfect. I just wanted to add something about position:absolute;. If you wanted to use position:absolute;like you had in your code, you have to think of it as pushing it away from one side of the page.
内森·李的回答是完美的。我只是想添加一些关于position:absolute;. 如果您想像position:absolute;在代码中那样使用，则必须将其视为将其从页面的一侧推开。
For example, if you wanted your divto be somewhere in the bottom, you would have to use position:absolute; top:500px;. That would push your div500px from the top of the page. Same rule applies for all other directions.
例如，如果您希望自己div位于底部的某个位置，则必须使用position:absolute; top:500px;. 这会将您的div500px 从页面顶部推开。相同的规则适用于所有其他方向。
