Question

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

我正在使用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;
}

Answer 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 - 粘性页脚+粘性“消息表单”

1 个答案: