Question

我正在尝试在此处创建一个如下所示的布局：这里是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>

我希望content section占用header和footer部分之间的完整空间。还有一个名为[stream-content]的部分，如果那里（仅在主页上）必须在footer之前占据位置。在这种情况下，content部分应占用header和stream-content部分之间的所有空间。我尝试用绝对定位做同样的事情，但我的所有元素都变得混乱，所以想要理解这样做的正确方法。提前感谢您的帮助！

Answer 1

将position:relative添加到您的包装类中。将position:absolute;bottom:0;添加到流内容类。

在这里查看。 Fiddle

Answer 2

如果我理解正确，那么一种方法是将[steam content]放在包装器外面，因为包装器是将页脚保持在底部的包装器。如果您必须在内部包装中使用[蒸汽含量]，那么可以尝试使用此类http://ryanfait.com/sticky-footer/之类的内容将其与页脚一起保持在底部

将div粘贴到父母的底部

2 个答案: