Div在包含div的全高（背景）

我正在使用twitter bootstrap來創建我的新網站，但我對背景有困難。以下是我擁有的：

<body> 
    <div class="wrapper"> 
     <div class="navbar navbar-inverse navbar-fixed-top"> 
       ... 
     </div> 
     <div id="header"> 
      ... 
     </div> 
     <div id="content"> 
      ... 
     </div> 
     <div class="push> 
     </div> 
    </div> 
    <div class="footer"> 
     .... 
    </div> 
</body>

導航欄固定在頂部。（固定高度）標題（標題內容）與頁面一起滾動並且高度固定。頁腳在頁面的底部，但如果有更多的內容（不固定在底部，但固定高度）滾動

我想要的是內容具有所有可用空間的背景（從右後頁眉直到頁腳） Image to clarify

Full HTML & CSS(without bootstrap css) code

來源

2013-01-04 Cpt_superfly

所以，你要的內容區域要少至少100％的頁眉和頁腳這麼說？

這是我應該怎樣做：

演示： http://jsbin.com/ofijap/1/edit

.head { 
    height:100px; 
    background-color:green; 
} 
.wrap { 
    min-height:100%; 
    background-color:red; 
} 
.footer { 
    height:100px; 
    background-color:grey; 
    margin-top:-100px; 
} 
.content { 
    padding-bottom:100px; 
} 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
</head> 
<body> 
    <div class="wrap"> 
     <div class="head">Head</div> 
    <div class="content">content</div> 
    </div> 
    <div class="footer">footer</div> 
</body> 
</html>

編輯：如果你想要的東西來填滿所有的垂直空間

作爲一個經驗法則，它可能需要最小高度：100％;但是，它的父母也應該有100％的身高，等等等等。

來源

2013-01-04 10:57:36 user1721135

HTTP ：//jsbin.com/ipecuc/1/edit這就是我在你的粘貼bin中得到的，但是在我的asp.net MVC4網站中，它並沒有把「白色」部分的全部高度。同樣在jsbin中，你可以獲得比屏幕更多的內容。圖片：http：//www.sharepic.org/public/view/full/171 –

使用紅色部分造型，而不是白色部分。設置實際內容透明的白色部分，使用紅色元素進行造型 – user1721135

，那麼我應該如何讓中心部分變成白色呢？但仍保持左右邊緣的紅色（它們對於屏幕大小是可變的，並且將保持爲100px） –

爲了誰希望看到我的最終結果的人：感謝@ user1721135;） http://jsbin.com/udoxet/2/edit

現在我要去嘗試，並將其移植到自己的網站，看看是否能工程:)

來源

2013-01-04 12:21:15

Div在包含div的全高（背景）

回答

相關問題