CSS - 粘性页脚 + 粘性“消息表单”答案

【问题标题】：CSS - sticky footer + sticky "message form"CSS - 粘性页脚 + 粘性“消息表单”
【发布时间】：2013-07-29 08:40:44
【问题描述】：

我有一个带有粘性页脚的页面。在该页面中，我需要在页面的最底部显示消息列表 + 回复表单。消息列表容器的高度应取决于屏幕高度；无论屏幕高度如何，回复表单的位置都应该在底部。

我正在使用 Ryan Fait 的粘性页脚：http://ryanfait.com/resources/footer-stick-to-bottom-of-page/。但是，我似乎无法将相同的概念应用于消息列表 + 回复表单。

这是在 jsFiddle 上的一次失败尝试：http://jsfiddle.net/PjCUS/。有什么建议吗？

HTML：

<body>
    <div class="wrapper">
        <p>Your website content here.</p>
        <div class="messages-wrapper">
            <ol>
                <li>Message One</li>
                <li>Message Two</li>
                <li>Message Three</li>
            </ol>
            <div class="messages-push"></div>
        </div>
        <form action="#">
            <fieldset>
                <input type="text"></input>
                <button type="submit">Send</button>
            </fieldset>
        </form>
        <div class="push"></div>
    </div>
    <div class="footer">
        <p>Copyright (c) 2008</p>
    </div>
</body>

CSS：

*              {
                   margin: 0
               }
html,
body           {
                   height: 100%
               }
.wrapper       {
                   height: auto !important;
                   height: 100%;
                   margin: 0 auto -4em;
                   min-height: 100%;
               }
.footer,
.push          {
                   height: 4em
               }

.messages-wrapper {
    background-color: pink;
    height: auto !important;
    height: 100%;
    margin: 0 auto -20px;
    min-height: 100%;
}
.messages-push {
    background-color: blue;
    height: 20px;
}
form, .messages-push {
    background-color: green;
    height: 20px;
}

【问题讨论】：

标签： css

【解决方案1】：

这对您有用吗： http://jsfiddle.net/NickWilde/ZRFwD/2/

代码： html:

<body>
    <div class="wrapper">
        <p>Your website content here.</p>
        <div class="push"></div>
    </div>  
    <div class="messages">
        <ol>
                <li>Message One</li>
                <li>Message Two</li>
                <li>Message Three</li>
            </ol>
            <div class="messages-push"></div>
        <form action="#">
            <fieldset>
                <input type="text"></input>
                <button type="submit">Send</button>
            </fieldset>
        </form><br />
    </div>
    <div class="footer">
        <p>Copyright (c) 2008</p>
    </div>
</body>

css:

*              {
                   margin: 0
               }
html,
body           {
                   height: 100%
               }
.wrapper       {
                   height: auto !important;
                   height: 100%;
                   margin: 0 auto -10em;
                   min-height: 100%;
               }
.push {
                   height: 10em;
               }

}
form {
    background-color: green;
    height: 40px;
}

【讨论】：

消息和回复表单不应出现在页脚中，因为这在语义上不正确。还有其他想法吗？
需要注意的一点：css .push 高度和 .wrapper 高度都希望根据消息的高度进行更改。避免这种情况的一种方法是将消息 div 设置为固定高度并应用 overflow:auto 样式。
.push 和 .wrapper 需要根据消息的高度进行更改吗？我认为这不应该是目标。根据屏幕大小，消息的高度应尽可能高。并且回复表单应该被推到底部。