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

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

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

来源

2013-07-28 StackOverflowNewbie

这是否会为你工作：

代码： 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-28 22:09:31

邮件和回复表单不应位于页脚中，因为它在语义上不正确。任何其他想法？ – StackOverflowNewbie

嗯是的，我明白你的意思;更新以增强语义 –

有一点需要注意：根据消息的高度，css'.push'高度和'.wrapper'高度都将被更改。避免这种情况的一种可能是将消息div固定为“overflow：auto”风格。 –

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

回答

相关问题