小编Pau*_*aul的帖子

我有一个带有bootstrap模式的页面(手册:http://getbootstrap.com/javascript/#modals).

我想在页面加载时打开这个模态.然而,这并没有发生.

<!-- Modal -->
<div class="modal fade" id="memberModal" tabindex="-1" role="dialog" aria-labelledby="memberModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="memberModalLabel">Thank you for signing in!</h4>
      </div>
      <div class="modal-body">
        <p>However the account provided is not known.<BR>
        If you just got invited to the group, please wait for a day to have the database synchronized.</p>

        <p>You will now be shown the Demo site.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button> …

我试图在页面底部显示一个页脚.如果页面比1个屏幕更长,我喜欢页脚只能在滚动到底部后显示.所以我不能使用'position:fixed',因为它会一直显示出来.

我正在尝试复制以下示例:http://peterned.home.xs4all.nl/examples/csslayout1.html

但是,当我使用以下内容时,由于某种原因,页脚显示在我的长页面的中间.

position: absolute; bottom:0 

我有短页和长页,我希望它在两者的底部.

如何在长页面上保持页脚的底部？

小提琴

我创建了这些小提琴以显示问题并测试代码.请用您的解决方案发布一个工作示例.

• 短页

• 长页面

我的页脚css:

html,body {
    margin:0;
    padding:0;
    height:100%; /* needed for container min-height */
}

.content {
    position:relative; /* needed for footer positioning*/
    margin:0 auto; /* center, not in IE5 */

    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/

    min-height:100%; /* real browsers */
}

/* --- Footer --- */
.footerbar {                                position: absolute;
                                            width: 100%;
                                            bottom: 0;

                                            color: white;
                                            background-color: #202020;
                                            font-size: …