1

我想让内容 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;
}​

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

拉伸（原文如此）div 以填充身体

CSS：高度 - 填写 div 的其余部分？

使 BODY DIV 填充可用区域

让 div 填充浏览器视口的其余部分

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

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

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

4

1 回答 1

0

如果您知道标题的高度，有一个非常简单的方法可以实现：使用绝对定位。内容将占据整个 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;
}

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

于 2013-03-01T13:34:15.533 回答