身高：如果另一個div存在，CSS的屏幕太大，100％的屏幕太大

我通過其他100％的CSS解決方案閱讀，但其中大多數只是不適合我的項目不幸（如使用位置：固定等）。身高：如果另一個div存在，CSS的屏幕太大，100％的屏幕太大

基本上我有一個標誌和一個內容窗口。該徽標高度爲100px，寬度爲100％，我希望內容窗口覆蓋整個剩餘區域。如果內容窗口超出窗口高度（例如，使用最小高度屬性），我也希望它自動擴展。

你能指點我嗎？

我的問題是，內容窗口高度似乎總是引用原始大小，而不是父容器的大小，因此即使內容很短，也會出現滾動條。

下面我（縮短）代碼：

CSS：

html, body 
{ 
height: 100%; 
min-height: 100%; 
margin: 0; 
padding: 0; 
background-color:#000000; 
} 

#wrapper 
{ 
height: 100%; 
min-height: 100%; 
} 

#header 
{ 
height:100px; 
} 


#content { 
background-color:#eee; 
min-height:100%; 
}

HTML：

<body> 

<div id="wrapper"> 
<div id="header"></div> 
<div id="content"> 
    content.. 

</div> 
</div>

謝謝！

來源

2012-01-29 Muppet

HTML：

<div class="wrapper"> 
    <div class="header"></div> 
    <div class="content"></div> 
</div>

CSS：

.wrapper{ 
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
} 

.header{ 
    background:red; 
    height:100px; 
} 

.content{ 
    background:blue; 
    position:absolute; 
    top:100px; 
    left:0; 
    right:0; 
    bottom:0; 
}

小提琴：http://jsfiddle.net/rVRFF/

注：.header height和。內容top值必須匹配。

來源

2012-01-29 23:11:46 Joseph

差不多，但不幸的是當內容容器中的文本超出窗口區域時，藍色區域不擴展：http://jsfiddle.net/r9JRy/（向下滾動） – Muppet 2012-01-29 23:35:49

這是你想要的嗎？ http://jsfiddle.net/r9JRy/2/ – 2012-01-29 23:58:57

啊，你的意思是最小高度是填滿屏幕，並擴大內容超過。確切地說， – Joseph 2012-01-30 00:04:47

身高：如果另一個div存在，CSS的屏幕太大，100％的屏幕太大

回答

相關問題