让一个div粘到父母的底部 [英] Make a div stick to bottom of parent

查看:87
本文介绍了让一个div粘到父母的底部的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我试图在这里创建一个布局,如下所示:这里是小提琴

 < 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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆