Div向下延伸頁面

我有一個左側的菜單，將不正確的頁面大小。如果內容不必滾動頁腳應位於底部，菜單div應向下延伸以觸摸頁腳。我嘗試了粘腳步技巧或者叫它......但是沒有菜單的運氣。

這裏是我的CSS：

html, body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    font-family: Arial, Helvetica, sans-serif; 
    background: #999966 url(bgbottom.png); 
    background-attachment: fixed; 
    background-position: bottom; 
    background-repeat: repeat-x; 
} 

a { 
    color: #29211D; 
} 
h2 { 

    font-size: 26px; 
    font-weight: normal; 
} 

.head { 

    background-image: url(bg.jpg); 
    width: 100%; 
    border-bottom: 4px solid #29211D; 
    overflow: hidden; 
    height: 185px; 
} 

.nav { 

    background-color: #29211D; 
    width: 150px; 
    color: white; 
    padding: 10px; 
    height: auto !important; 
    min-height: 100%; 
    font-size: 14px;  
    float: left; 
} 

.content { 

    font-size: 14px; 
    width: 80%; 
    float: left; 
    padding-left: 10px; 
    padding-right: 10px; 
    height: auto !important; 
    min-height: 70%; 
    background-color: #FFF; 
    border: 2px #666 solid; 
    margin-left: 2%; 
    margin-top: 1%; 
} 

.footer { 

    background-image: url(bg.jpg); 
    border-top: #29211D solid 3px; 
    border-bottom: #29211D solid 3px; 
    text-align: center; 
    font-size: 12px; 
    padding-top: 3px; 
    padding-bottom: 3px; 

}

這裏是網站：http://www.pomaceaproject.org/dev/test.asp

來源

2011-01-11 Bri

其實，我想知道如果做一個--bannersize px保證金會解決這個...？ – Bri 2011-01-11 21:54:43

更新：這樣做沒有工作... – Bri 2011-01-11 21:58:32

如果我明白你正在嘗試做的，你想要的導航部分接觸到頁腳的底部？如果是這樣，這是一個簡單的變化：

變化從min-height: 70%;您.nav類的最小高度屬性min-height: 100%;

Demo (obviously without all the pictures on it)

當前的CSS：

@charset "utf-8"; 
/* CSS Document */ 

html, body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    font-family: Arial, Helvetica, sans-serif; 
    background: #999966 url(bgbottom.png); 
    background-attachment: fixed; 
    background-position: bottom; 
    background-repeat: repeat-x; 
} 

a { 
    color: #29211D; 
} 
h2 { 

    font-size: 26px; 
    font-weight: normal; 
} 

.head { 

    background-image: url(bg.jpg); 
    width: 100%; 
    border-bottom: 4px solid #29211D; 
    overflow: hidden; 
    height: 185px; 
} 

.nav { 

    background-color: #29211D; 
    width: 150px; 
    color: white; 
    padding: 10px; 
    height: auto !important; 
    min-height: 73%; 
    font-size: 14px;  
    float: left; 
    overflow: auto; 

} 

.content { 

    font-size: 14px; 
    width: 80%; 
    float: left; 
    height: auto !important; 
    padding-left: 10px; 
    padding-right: 10px; 
    background-color: #FFF; 
    border: 2px #666 solid; 
    margin-left: 2%; 
    margin-top: 1%; 
} 

.footer { 

    background-color: #999966; /* Can probably be removed as you will have a background image */ 
    width: 100%; 
    position: absolute; 
    bottom: 0; 
    background-image: url(bg.jpg); 
    border-top: #29211D solid 3px; 
    border-bottom: #29211D solid 3px; 
    text-align: center; 
    font-size: 12px; 
    padding-top: 3px; 
    padding-bottom: 3px; 
    z-index: 100; /* Since it is will need to overlay the background of the navigation behind it */ 
}

希望幫助:)

來源

2011-01-11 21:59:44

Div向下延伸頁面

回答

相關問題