0

我正在使用引导程序，没有任何修改。布局非常简单。我有一个顶部导航栏。然后是主容器。最后，我有一个页脚。就像是：

<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>

有两件事不能做。

1）每当主容器类中的内容较少时，我需要在屏幕底部对齐页脚。我试过 min-height:100% 但做错了什么。

2）我需要页脚有不同的背景颜色，一旦主容器结束，页脚应该占据屏幕的其余部分。页脚可以有一个最小高度，也可以根据页脚内的内容采用高度。

.footer {
height:80px;
margin-top:-80px;
position:relative;
clear:both;
padding-top:20px;
background-color:#F4F4F4;
border-top:1px solid #ddd;
clear:both;
}

这里发生了什么？

JSfiddle：http: //jsfiddle.net/m7dkt/13/

4

3 回答 3

1

这应该为您解决问题：http: //jsfiddle.net/panchroma/ru2BD/

不要试图弄清楚如何为页脚着色并将其扩展到页面底部，而是将正文颜色设置为页脚颜色所需的颜色，然后为页眉和页脚之间的内容区域着色。 

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;
}

更新

如果我理解正确，您还希望页脚文本与窗口底部对齐。看看这看起来如何：http:
//jsfiddle.net/panchroma/D7YXP/

它是上述技术与粘性页脚的组合。

于 2013-01-10T14:38:23.970 回答
0

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

html, body, #wrapper{
    height:100%;
}
于 2013-01-10T06:28:56.213 回答
0

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

HTML

<div id="wrap">
   <div id="clearfooter"></div>
</div>
<div id="footer">
</div>

CSS

#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;
}
于 2013-01-10T06:17:07.773 回答