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