Css 无法获取页脚占用屏幕的其余部分_Css_Twitter Bootstrap

Css 无法获取页脚占用屏幕的其余部分

css twitter-bootstrap

Css 无法获取页脚占用屏幕的其余部分,css,twitter-bootstrap,Css,Twitter Bootstrap,我使用的是引导，没有任何修改。布局非常简单。我有一个顶级导航栏。然后是主容器。最后，我有了一个页脚。比如： <head> <style> body { padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */ background-color: #ECECEC; } </style&g

我使用的是引导，没有任何修改。布局非常简单。我有一个顶级导航栏。然后是主容器。最后，我有了一个页脚。比如：

<head>
 <style>
      body {
        padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
    background-color: #ECECEC;
      }
 </style>
</head>

<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
    // navbar elements
    </div> <!-- end of class navbar -->

    <div class="container">
    // fluid-row class with two column structure
    </div> <!-- end of class container -->

    <div class="footer">
        <div class="container"> <!-- using container to left-align footer to the main content -->
        // some content
     </div> <!-- end of class footer -->
</body>

这是怎么回事

JSfiddle:

我使用了这个技巧：我希望它对您有用

HTML

尝试将以下css添加到您的css中：

html, body, #wrapper{
    height:100%;
}

这将为您带来好处：

不要试图弄清楚如何给页脚上色并将其延伸到页面底部，而是将页脚颜色设置为所需的主体颜色，然后给页眉和页脚之间的内容区域上色

body {
background-color: #F4F4F4; /*same as footer color */
}

/* don't need to explicitly set footer colour now, it's set above */  

/* .footer {
background-color:#F4F4F4;   
}   */  

/* wrap page content and set the background colour */  

#wrapper{       
padding-top:10px;
background-color:#ECECEC;
}

更新

如果我理解正确，您还希望页脚文本与窗口底部对齐。看看这个样子：

这是上述技术与粘性页脚的结合。

谢谢！但这会产生一个粘性的页脚。如果主容器的内容较少，我希望页脚在末尾显示。否则，页脚应显示在容器下方的正常位置。这可能吗？谢谢，但这并不能解决问题1：如果容器的内容较少，页脚会一直移动到屏幕底部。如果容器的内容超过屏幕的高度，那么页脚应该在内容在底部结束后显示。如何使其工作？请参阅上面的更新以强制页脚文本位于窗口底部

#clearfooter {
    display: block;
    height: 50px;
}

#wrap{
    padding-bottom:69px;
    overflow:hidden;
}

#footer{
    width:100%;
    height:69px;
    background:#8dc63f;
    overflow:hidden;
    clear:both;
    color:#FFF;
    position:fixed;
    bottom:0;
    opacity:0.9;
}

html, body, #wrapper{
    height:100%;
}

body {
background-color: #F4F4F4; /*same as footer color */
}

/* don't need to explicitly set footer colour now, it's set above */  

/* .footer {
background-color:#F4F4F4;   
}   */  

/* wrap page content and set the background colour */  

#wrapper{       
padding-top:10px;
background-color:#ECECEC;
}