CSS佈局幫助 - 將div拉伸到頁面底部

我試圖創建一個帶有「標題」區域的佈局，其中包含徽標和一些鏈接，然後是需要擴展到頁面底部的內容區域。這是我陷入困境的地方。CSS佈局幫助 - 將div拉伸到頁面底部

我已經用一個容器div包含了標題和內容，其高度爲100％，這工作正常。但我不能讓內容div伸展到容器div的底部，因爲它的最小高度爲100％似乎佔用了頁面主體的高度，所以我最終得到了一個滾動條在頁眉的頂部被標題佔據。

這裏有一個線框這使得希望什麼，我試圖實現更清楚一點......

Mockup

下面是一個簡單的CSS例子，這個工作，除了有一直處於一個滾動條這似乎是標題區域的高度...

html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    color: #fff; 
} 
body { 
    background-color: #000; 
} 
#container { 
    position: relative; 
    margin: 0 auto; 
    width: 1000px; 
    min-height: 100%; 
} 
#header { 
    padding-top: 26px; 
} 
#logo { 
    width: 194px; 
    height: 55px; 
    margin: 0 auto; 
    background-color: #fff; 
} 
#content { 
    margin-top: 10px; 
    position: absolute; 
    width: 1000px; 
    min-height: 100%; 
    background-color: #fff; 
}

來源

2010-09-07 Accelebrate

只是測試我的答案就這一個，只要你的頭有一個固定的高度工作正常。 – 2010-09-07 09:52:33

感謝您的幫助。剛剛更新了我的示例，爲我的標題添加了固定高度，並將內容的「頂部」值設置爲標題和邊距的高度。不過，我仍然看到一個滾動條。 – Accelebrate 2010-09-07 10:19:38

刪除內容的最小高度div – 2010-09-07 10:57:28

使容器的div位置：relative和content div位置：絕對。然後給內容div頂部：<標頭高度>和底部：0

不能立即測試此權限，但我認爲像這樣的應該工作。

來源

2010-09-07 09:11:47

或者，你可以在加載後使用javascript來解決這個問題，但那不是我的首選選擇（雖然我不得不在這些網站中使用這種方法） – 2010-09-07 09:54:25

這應該在IE7 +中起作用。看看我的[示例100％高度佈局]（http://jsfiddle.net/thirdender/q9yL6/）。 – thirdender 2012-08-20 20:04:08

http://jsfiddle.net/CZayc/

這部作品通過包裝的標題和正文中一個div推頁腳下來

的index.html

<div id="wrap"> 
    <div id="header"> 
     header 
    </div> 
    <div id="main"> 
     main<br/>main<br/>main<br/>main<br/>main<br/>main<br/> 
    </div> 
</div> 
<div id="footer"> 
    footer 
</div>

的style.css

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0; 
    padding:0; 
} 
#header { 
    border-top:20px solid #fff; 
    height: 33px; 
    line-height: 33px; 
    text-align: center; 
    background-color: green; 
} 
html { height: 100%; } 
body { height: 100%; width: 90%; margin: auto; } 
#wrap { min-height: 100%;background-color:gray;} 
#main { 
    overflow: auto; 
    padding-bottom: 53px; /* must be same height as the footer */ 
    background-color: red; 
    height: 90% 
} 
#footer { 
    position: relative; 
    margin-top: -53px; /* negative value of footer height */ 
    height: 33px; 
    line-height: 33px; 
    border-bottom:20px solid #fff; 
    text-align: center; 
    background-color:blue; 
}

來源

2010-09-07 15:46:00

這只是一個鏈接，而不是答案。你能從鏈接中獲取一些信息嗎？ – Joe 2015-07-03 22:51:25

限制：標題高度應該是靜態的，用a絕對高度。

內容高度是動態的。

CSS代碼：

* { 
    padding:0; 
    margin:0; 
} 
html, body { 
    height: 100%; 
    color: #fff; 
} 
#header { 
    background: red; 
    position: absolute; 
    z-index:20; 
    height: 7em; 
    overflow:hidden; 
    width:100%; 
} 
#content { 
    background: blue; 
    position: absolute; 
    top: 0; 
    padding-top: 7em; 
    min-height: 100%; 
    box-sizing: border-box; 
}

內容一路延伸至底部，即使文字很短。

當內容的文本比我們的窗口高度長 - 我們得到的自動滾動

例子： http://jsfiddle.net/fixit/p3B4s/3/

來源

2014-07-13 09:23:58

CSS佈局幫助 - 將div拉伸到頁面底部

回答

相關問題