Html 如何使div向下浮动？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14064424/
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
how to make a div to float down?
提问by Prakash GPz
I have 4 divs. One is outer wrapper, and other 3 are header, content and footer respectively. All the are of same(fixed) width. But height of outer wrapper and content div are variable.
我有 4 个 div。一个是外部包装器，其他三个分别是页眉、内容和页脚。所有的都具有相同（固定）的宽度。但是外部包装器和内容 div 的高度是可变的。
irrespective of the size of these, i want the footer div to stick at the bottom of outer wrapper. I have tried using the following CSS
无论这些大小如何，我都希望页脚 div 粘在外包装的底部。我曾尝试使用以下 CSS
position: relative;
bottom: 0px;
But it didn't work. Does anybody know a solution?
但它没有用。有人知道解决方案吗？
回答by Thomas C. Rodriguez
To align a div to bottom, you have to first make the parent div's position relative. then make the required div's position to absolute and set the bottom property to zero.
要将 div 与底部对齐，您必须首先使父 div 的位置相对。然后将所需的 div 位置设置为绝对位置并将底部属性设置为零。
<div style="position: relative; height: 100px; border: solid;">
<div style="position: absolute; height: 10px; border: solid; bottom: 0; right: 0; left: 0; ">
</div>
</div>回答by d-_-b
The footer divwill need to be either:
在页脚DIV将需要两种：
position:absolute;bottom:0;; This will push it to the bottom of its container, however, when you scroll down past the container, the footer will scroll with it.position:fixed;bottom:0;; This is used more often for stickyfooters. This will place the footer atbottom:0of your screen. so no matter where you scroll, what you see is what you get (it will not move around while scrolling)position:relative;bottom:0;; could be used, but it will be relative to it's siblings (i.e. unless the content divis pushing it to the bottom, it won't go there), or, I believe if the container is relative then it may work (but pleasecorrect me if I'm wrong).
position:absolute;bottom:0;; 这会将其推到其容器的底部，但是，当您向下滚动经过容器时，页脚将随之滚动。position:fixed;bottom:0;; 这更常用于粘性页脚。这会将页脚放在bottom:0屏幕的底部。所以无论你在哪里滚动，所见即所得（滚动时它不会四处移动）position:relative;bottom:0;; 可以使用，但它将相对于它的兄弟姐妹（即，除非内容 div将它推到底部，否则它不会去那里），或者，我相信如果容器是相对的，那么它可能会工作（但请更正如果我错了，我）。
Based on your question: i want the footer div to stick at the bottom of outer wrapper.it sounds like you want to use absolutepositioning for the footer, so that it'll always stick to the bottom of its container....
根据您的问题：i want the footer div to stick at the bottom of outer wrapper.听起来您想对absolute页脚使用定位，以便它始终坚持其容器的底部....
If you want the footer to stay on the bottom of the screen no matter where the user scrolls to, then I'd recommend fixedpositioning.
如果您希望页脚无论用户滚动到何处都停留在屏幕底部，那么我建议您使用fixed定位。
Definitely check out some... tutorialsand most importantly, mess around and experiment yourself!
you can make us a jsfiddleand maybe it'll shed more light on what you're trying to accomplish. good luck!
你可以让我们成为一个jsfiddle，也许它会更清楚你想要完成的事情。祝你好运！
回答by phnkha
You can let the wrapper's position is relative and the inner Divs position are absolute.
您可以让包装器的位置是相对的，而内部 Div 的位置是绝对的。
<div style="position: relative; height: 200px">
<div style="position: absolute; top: 0px; height: 20px; background-color:red">
header
</div>
<div style="position: absolute; top: 20px; bottom: 20px; overflow-y: auto">
content
</div>
<div style="position: absolute; bottom: 0px; height: 20px; background-color:red">
footer
</div>
</div>
Try this http://jsfiddle.net/YAaA3/
回答by Drew Dahlman
use a clear to get the footer below the content.
使用 clear 获取内容下方的页脚。
simply -
简单地 -
#header {
clear:both;
}
#footer {
clear: both;
}
That should force the header to be on top, and the footer to fall below the floated elements.
这应该强制页眉位于顶部，页脚位于浮动元素下方。
回答by Jeffrey
<div>
<div style="position: relative; height: 10%; top: 90%; ">
</div>
</div>
回答by Cdeez
[UPDATED]
[更新]
Here is the CSSthat alwayssticks the footer to the bottom.
下面是CSS这始终坚持页脚底部。
*演示*
CSS-
CSS-
* {
margin: 0;
}
html, body {
height: 100%;
}
#ou {
position:relative;
background-color:grey;
min-height: 100%;
height: auto !important;
height: 100%;
width:400px;
margin: 0 auto -30px; /* the bottom margin is the negative value of the footer's height */
}
#he
{
height:30px;
background-color:red;
}
#fo{
background-color:yellow;
height: 30px; /* .push must be the same height as .footer */
position:relative;
width:400px;
margin:0 auto;
}
