在zurb-foundation中设置div的最小高度

Question

我刚刚通过我的一个朋友介绍了Zurb Foundation 4框架。有趣的东西。但我遇到了一个我不能理解的问题。我有一个网站的基础上4行(标题，导航栏，内容，页脚)；

<div class="row siteBase">

   <div class="row siteHeader" id="siteHeader">
     <div class="large-12 c7olumns">
       <h2>Welcome to Foundation</h2>
       <p>This is version 4.1.2.</p>      
     </div>
   </div>

   <div class="row siteNavbar" id="siteNavbar">      
    navbar
   </div>

   <div class="row siteBody" id="siteBody">
    base
   </div>

   <div class="row siteFooter" id="siteFooter">
    footer
   </div>

</div>

这是我的CSS

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%; 
}

.siteBack {
    background-color: #545454;      
}

.siteBase { 
    /*base size and color*/
    width: 1280px;      
    min-height: 100%;
    margin: 0 auto;
    background-color: #f2f2f2;  

    /* exact fit the contents to the border */
    padding-left:15px;
    padding-right:15px;

    /* border size and color */
    border-style: solid;
    border-left-width: 4px;
    border-top-width: 0px;
    border-right-width: 4px;
    border-bottom-width: 0px;
    border-color: #7da500;

    /* add some shadows to the borders */
    -moz-box-shadow: 0 0 10px 5px #272727;
    -webkit-box-shadow: 0 0 10px 5px #272727;
    box-shadow: 0 0 10px 5px #272727;
}

.siteHeader
{
    width: 100%;
    height: 250px;
    background-color: #7da500;
}

.siteNavbar
{
    height: 50px;
    background-color: #1d1d1d;
}

.siteBody
{
    min-height: 100% auto;
    margin: 0 auto;
    background-color: #f2f2f2;  
}

.siteFooter
{
    height: 50px;
    background-color: #7da500;
}

我遇到的问题是站点主体div没有扩展到100%。页眉和导航栏的大小是固定的，页脚也是如此。但是我不想让sitebody div占用剩余的空间，这样页脚总是放在屏幕的底部(至少)。

这里我漏掉了什么？非常感谢你的帮助。

Answer 1

基本上你需要的是把你的页脚放在页面的底部。这样，即使你的主要内容很小，你也会有一个完整的正文。您可以查看此SO question以了解它是如何实现的。这里面可能会有很多东西，因为布局有点复杂。因此，我为您做了一个示例，您可以将其用于a more simple layout。这是来自另一个SO问题的修改后的css。

html, body, #wrapper{ height: 100%; }
body > #wrapper{height: auto; min-height: 100%;}
#main { padding-bottom: 75px; /*  same height as the footer */
    overflow:hidden;
    top: 75px; bottom: 0; left: 0; right: 0;            
    background-color:yellow;           
}  
#footer { 
    position: relative;
    margin-top: -75px; /* negative value of footer height */
    height: 75px;
    clear:both;
} 

.clearfix:after {content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
.clearfix {display: inline-block;}