Question

我想让内容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/我还添加了一些丢失的代码。对不起。

Answer 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;
}

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

Div不想填补身体的其余部分

1 个答案: