Div不想填满身体的其余部分答案

【问题标题】：Div doesn't want to fill rest of bodyDiv不想填满身体的其余部分
【发布时间】：2012-09-18 03:36:52
【问题描述】：

我想让内容 div 填充页面的其余部分。但它只会填满它所拥有的，然后不会填满页面的其余部分。基本上，如果内容的高度是视口的 20%，则 div 将填充视口的其余部分而不填充任何内容（不透明度为 80% 的白色背景）。但是如果内容超过视口的高度，它应该包裹到内容中。我有以下代码：

<body>
    <div id="page-wrapper">
        <div id="header-wrapper">
            <!--Fixed size header, 180px-->
        </div>
        <div id="content-wrapper"> <!-- Wrapper for the content, this bit should fill the rest of the view port unless content is larger than the view port, to which this div then wraps... -->
            <div id="content-banner"> <!-- A scrolling image banner with photos -->
            </div>
            <div id="content"> <!-- The actual content of the page -->
                Some Mock content
            </div>
        </div>
    </div>
</body>

这是我的 CSS：

html, body {
    height: 100%; 
    color:black;
    margin: 0;
}

body {
    background:black;
    margin:0px;
}

#page-wrapper {
    background:blue;
    display:block;
    margin-top:0px;
    width:900px;
    position:absolute;
    left:50%;
    margin-left:-450px;
    height:100%;
    border:thin solid black;
}

#header-wrapper {
    background:green;
    display:block;
    margin-top:0px;
    width:900px;
    height:180px;
    border-bottom-left-radius:75px;
    box-shadow:0 0 10px #000;
}

#content-wrapper {
    background:white;
    display:inline-block;
    position:relative;
    top:25px;
    width:900px;
    border-top-right-radius:75px;
    overflow:scroll-y;
    box-shadow:0 0 10px #000;
    margin-bottom:-125px;
}

#content-banner {
    background:red;
    display:inline-block;
    position:relative;
    margin:10px 10px 0 10px;
    width:880px;
    height:160px;
    border-top-right-radius:65px;
    overflow:hidden;
}

#content-banner img {
    border-top-right-radius:65px;
    width:880px;
    height:160px;
}

#menu-wrapper {
    background:green;
    display:inline-block;
    position:relative;
    width: 200px;
    margin-left:10px;
}

#content {
    display:inline-block;
    position:relative;
    margin-top:10px;
    line-height:30px;
    vertical-align:top;
}

另外，在所有重复的人都带着你的链接来到这里之前；）我已经通读并尝试了所有这些问题：

Streching (sic) div to fill body

CSS: height- fill out rest of div?

Make the BODY DIV Fill the Available Area

make div fill the rest of the browser viewport

有人可以帮助我吗？为此，我想远离 javascript。

编辑 1：27/09/2012 08:35 CAT

我添加了一个 jsFiddle 示例来向您展示我的意思。可以在这里查看：http://jsfiddle.net/vwKcs/2/ 我还添加了一些缺失的代码。对此感到抱歉。

【问题讨论】：

HTML/CSS 非常挑剔。我认为除非您发布带有图像工作路径的完整代码等，否则您无法获得任何帮助。包括所有内容，甚至可能在某处在线托管页面链接。然后你很可能会得到一些帮助。你上面的东西在 jsFiddle.net 中对我根本不起作用
啊，我知道我错过了一些代码......我的错。编辑了原始问题。

标签： css html

【解决方案1】：

如果您知道标题的高度，有一个非常简单的方法可以实现：使用绝对定位。内容将占据整个 100% 的高度，并且其中的第一个元素有一个 margin-top。在这个空白处，您再次使用position: absolute; 定位您的标题

（只是效果所需的代码）

#header-wrapper {
    position: absolute;
    height: 180px;
    width: 900px;
    top: 0;
    left: 0;
}

#content-wrapper {
    position: absolute;
    height: 100%;
    width: 900px;
    top: 0;
    left: 0;
}

#content-wrapper>*:first-child {
    margin-top: 180px;
}

但我不得不对斯通说：请发布解决您的问题所需的代码。如果我必须解决布局问题，我对任何图像路径都不感兴趣

【讨论】：