内部div填充屏幕的其余部分（受包装页边距和填充限制）

我需要内容div来“填充”标题后剩余的屏幕剩余部分。我想保留包装填充&保证金。使用绝对位置不起作用，因为内容div停止在视觉上嵌套在包装中。（如果绝对必要，header div可以是一个固定的高度，但我更喜欢它是动态的。）非常感谢。内部div填充屏幕的其余部分（受包装页边距和填充限制）

* { 
    margin:0px; 
    padding:0px; 
} 

html, 
body { 
height: 100%; 
} 


#wrapper { 
    background-color:#eee; 
    margin:20px; padding:20px; 
    border: solid 1px #333; 
} 

#header { 

} 

#content { 
    background-color:red; 
}

。

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

</div> 

</body>

小提琴这里： http://jsfiddle.net/jHLhK/

来源

2012-05-30 Mike Thrussell

指定宽度和高度设置为100%到您的内容股利。

#content { 
    background-color:red; 
    width:100%; 
    height:100%; 
}

该100%意味着它会像它有周围元素的空间一样多。

或者您可能只想要height或只有width根据您的要求为100%。

来源

2012-05-30 14:40:55 Sarfraz

这不会造成视觉上的变化。在示例代码中，我希望页面的其余部分在标题后填充红色。 –

内部div填充屏幕的其余部分（受包装页边距和填充限制）

回答

相关问题