HTML中固定宽度，高度为100％的对象

Question

所以，也许我只是在搜索上很烂，但是我真的很难找到一种方法来做到这一点，所以这里...

我有一个具有固定图像背景的网页（平铺，非滚动）。 现在，我想在其上方（700像素宽，100％高度，居中）放置一个彩色div，然后可以在其中放置更多内容（不一定是div，我只想在中间放置一个彩色区域）

这是我正在努力的图像： http ://bit.ly/g5qgj0浅色区域（位于其上方的是所有其他内容）是我要实现的目标。

在此先感谢您，我仍然逐渐了解HTML / CSS，这让我发疯了XP

Answer 1

html, body{
    margin:0;
    padding:0;
    height:100%;
}
body{
    background:transparent url(...) repeat 0 0;
}
div{
    margin:0 auto;
    width:700px;
    height:100%;
    background:white;
}

在http://jsfiddle.net/TGt4A/查看工作示例

Answer 2

我认为您最安全的方法将涉及Javascript / jQuery，这是我在JSFiddle中所做的 。 如果禁用了Javascript或其他功能，则可能要在该#container上添加CSS min-height作为后备。