2

我刚刚通过我的朋友介绍了 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;
}

我遇到的问题是 sitebody div 没有拉伸到完全 100%。页眉和导航栏是固定大小的，页脚也是如此。但我不希望 sitebody div 占用剩余空间，以便页脚始终放置在屏幕的底部（至少）。

我在这里想念什么？非常感谢你的帮助。

4

1 回答 1

0

基本上，您需要将页脚粘贴到页面底部。这样，即使你的主要内容很小，你也会有一个完整的身体。您可以查看这个SO question以了解它是如何实现的。那里可能会发生很多事情，因为该布局有点复杂。所以我为您做了一个示例，您可以将其用于更简单的布局。这是来自其他 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;}
于 2013-04-23T01:58:39.457 回答