容器高度w.r.t兒童

我們使用CSS3和HTML5。我試圖寫一個頁面，其中將有一個div來顯示一些漸變，然後是標題，然後是一個容器。容器高度w.r.t兒童

這是我寫的，工作正常，直到我介紹了一些虛擬線。 Click here看樣品，這是代碼片段

CSS，

html { 
    height: 100%; 
} 
body { 
    margin: 0px; 
    height: 100%; 
} 
.container { 
    height: 100%; 
} 
.oss-gradient { 
    height: 5px; 
    min-width: 1024px; 
    background: yellow; 
} 
.header { 
    height: 40px; 
    min-width: 1024px; 
    background: #def; 
} 
.content-wrapper { 
    width: 1024px; 
    height: calc(100% - 45px); 
    background: #defabc; 
    margin: 0px auto; 
}

我的HTML，

<div class="container"> 
    <div class="oss-gradient"> 
    </div> 
    <div class="header"> 
    </div> 
    <div class="content-wrapper"> 
     <!-- some dummy lines here //--> 
    </div> 
</div>

然後，我改變了內容包裝的高度屬性爲最小高度。然後它運行良好。當我嘗試更改縮放級別和瀏覽器窗口的大小時，它工作得很好。然後我打開了螢火蟲，並在contianer div，body和html元素上徘徊。我注意到content-wrapper元素來自容器div。換句話說，容器，body和html沒有使用content-wrapper元素進行擴展。

然後我爲container div添加了min-height屬性，認爲它會擴展wrt content-wrapper。然後我縮小頁面，發現內容包裝並未擴展可用高度。

然後我刪除了容器上html，body和min-height屬性的height屬性。現在，所有三個元素都擴展到了孩子身上。但是，當我刪除所有虛擬線我不能看到內容包裝div。

我該如何解決這個問題？

來源

2013-12-19 Krishna Chaitanya

您需要使用min-height您body元素和你html元素

Demo（覆蓋整個頁面）

Demo 2上使用background（隨着越來越多的內容）

body { 
    margin: 0px; 
    min-height: 100%; 
}

你可以參考我的問題here類似的問題。

來源

2013-12-19 06:23:23

@ mr-alien這不能解決我的問題。首先我的網站是爲1024X768像素設計的。如果我想爲我的content-wrapper div創建背景怎麼辦？我改變了背景並縮小了網頁。我再次看到一些問題。 –

@KrishnaChaitanya你看過我的演示了嗎？如果你只想保留content div的背景，而不是去尋找一個js解決方案，如果你是多餘的移動背景 –

@ mr-alien：是的，我看到你的演示，甚至閱讀你提到的鏈接。我知道有沒有簡單的方法來實現這一點。我將使用身高的html和min-height。這使得身體在放大和縮小時擴展整個視口。但是我的容器不佔用視口高度或身體的高度。當我在容器和縮放上添加背景時，它看起來很難看。對於zoomin其工作正常 –

容器高度w.r.t兒童

回答

相關問題