让一个div粘到父母的底部 [英] Make a div stick to bottom of parent
问题描述
我试图在这里创建一个布局,如下所示:这里是小提琴
< body>
< div class =wrapper>
< div class =header>
标题
< / div>
< div class =content>
这是内容部分
< / div>
< div class =stream-content>
这是流内容。
< / div>
< div class =push>
< / div>
< / div>
< div class =footer>
< / div>
< body>
我希望内容部分
占用标题
和页脚
部分之间的全部空格。还有一个叫做[ stream-content
]的部分,如果有(只在主页上)必须在页脚
。在这种情况下, content
部分应占用头部
和流之间的所有空间-content
部分。我试图用绝对定位来做同样的事情,但是我所有的元素都会出现故障,所以想要了解这样做的正确方法。
添加位置:相对
到你的包装类。
将位置:绝对;底部:0;
添加到流内容类中。
检查它这里。
小提琴
I am trying to create a layout here in 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 section
to take up the full space between the header
and footer
section. 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 content
section should take up space all the between header
and stream-content
section. 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!
Add position:relative
to your wraper class.
Add position:absolute;bottom:0;
to the stream-content class.
Check it here. Fiddle
这篇关于让一个div粘到父母的底部的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!