スティッキー フッターのあるページがあります。そのページでは、ページの一番下にメッセージのリストと返信フォームを表示する必要があります。メッセージのリストのコンテナーの高さは、画面の高さに依存する必要があります。画面の高さに関係なく、返信フォームの位置は一番下にある必要があります。
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;
}