Html 使 div 粘在父级的底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20474335/
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
Make a div stick to bottom of parent
提问by user1240679
I am trying to create a layout here which looks like the following: Here's the fiddle
我正在尝试在此处创建一个如下所示的布局：这是小提琴
<body>
<div class="wrapper">
<div class="header">
Header
</div>
<div class="content">
This is the content section
</div>
<div class="stream-content">
This is the stream content.
</div>
<div class="push">
</div>
</div>
<div class="footer">
</div>
<body>
I want the content sectionto take up the full space between the headerand footersection. There is an additional section called [stream-content] which if there (will be there only on home page) has to take the position just before the footer. And in that case, the contentsection should take up space all the between headerand stream-contentsection. I tried doing the same with absolute positioning but all my elements were going haywire, so wanted to understand the correct way of doing this. Thanks in advance for all help!
我希望content section占据header和footer部分之间的全部空间。还有一个名为 [ stream-content]的附加部分，如果有（将仅在主页上）必须在footer. 在这种情况下，该content部分应占用header和stream-content部分之间的所有空间。我尝试用绝对定位做同样的事情，但我的所有元素都变得混乱，所以想了解这样做的正确方法。在此先感谢所有帮助！
回答by Irfan TahirKheli
回答by user3034378
If I understand correctly then one way to do it would be to put [steam content] outside the wrapper, as wrapper is the one that is keeping the footer at the bottom. If you must have the [steam content] inside wrapper than you can try something like this http://ryanfait.com/sticky-footer/to keep it at the bottom together with the footer
如果我理解正确，那么一种方法是将 [steam content] 放在包装器之外，因为包装器是将页脚保持在底部的包装器。如果您必须将 [steam content] 包装在包装内，那么您可以尝试这样的操作http://ryanfait.com/sticky-footer/将其与页脚一起放在底部
