Css Div不'；我不想填满身体的其他部分_Css_Html

Css Div不'；我不想填满身体的其他部分

css html

Css Div不'；我不想填满身体的其他部分,css,html,Css,Html,我想让content div填充页面的其余部分。但它只会填满它所拥有的，然后就不会填满页面的其余部分。基本上，如果内容的高度是视图端口的20%，div将填充视图端口的其余部分，而不填充任何内容（白色背景，不透明度为80%）。但是，如果内容超过视图端口的高度，则应将其包装到内容中。我有以下代码的密码： <body> <div id="page-wrapper"> <div id="header-wrapper">

我想让content 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>

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

谁能帮我一下吗。为此，我想远离javascript

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

我添加了一个JSFIDLE示例来向您展示我的意思。可以在这里查看：我还添加了一些缺少的代码。很抱歉。

如果你知道你的头的高度，有一个非常简单的方法来实现这一点：使用绝对定位。内容将占据整个高度的100%，其中的第一个元素有一个边距顶部。在这个空白处，您再次使用

position:absolute
（只是效果所需的代码）
但我不得不对斯通说：请把解决问题所需的代码贴出来。如果要解决布局问题，我对任何图像路径都不感兴趣HTML/CSS非常挑剔。我不认为你能得到任何帮助，除非你发布完整的代码和图像的工作路径等。包括一切，甚至可能在网上某个地方托管一个链接到页面。那么你很可能会得到一些帮助。在jsFiddle.netAh中，您上面的内容对我来说根本不起作用，我发现我遗漏了一些代码。。。我的错。编辑了原始问题。
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;
}

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