1

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

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

1 回答 1

0

这对你有用吗：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;
}
于 2013-07-28T22:09:31.907 回答