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

我剛剛通過我的一位朋友介紹了Zurb Foundation 4框架。有趣的東西。但我有一個我似乎無法理解的問題。我有一個基於4行（標題，導航欄，內容，頁腳）的網站;在zurb-foundation中設置div的最小高度

<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％。頁眉和導航欄的大小是固定的，頁腳也是如此。但是我不希望網站主體div留下剩餘空間，因此頁腳始終放置在屏幕底部（至少）。

我在這裏錯過了什麼？非常感謝你的幫助。

來源

2013-04-22 Obelix

你會希望有一個固定的身體標籤寬度以及 – Nina 2013-04-22 21:44:30

嗨尼娜，道歉我最近的反應，忙碌的日子。嘗試設置與身體固定，不起作用。唯一發生的事情是，我的完整版面向左移動，但頁腳仍然在底部下方，而不是在底部徘徊。在此期間，我還嘗試創建一個小的js腳本，它動態確定視口的高度（正確加載）並以像素爲單位指定身體的最小高度。但這並不奏效，zurb框架介於兩者之間:) – Obelix 2013-05-06 17:46:55

基本上你需要的是將你的頁腳粘貼到頁面底部。就這樣，即使你的主要內容很小，你也會擁有一個完整的身體。你可以看看這個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;}

來源

2013-04-23 01:58:39

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

回答

相關問題