Div不想填补身体的其余部分 [英] Div doesn't want to fill rest of body
问题描述
我想让内容div填充页面的其余部分。但它只填充了它的内容，然后不填充页面的其余部分。基本上，如果内容的高度是视口的20％，则div将填充视图端口的其余部分（80％不透明度为白色背景）。但如果内容超过视图端口的高度，它应该包装到内容。我有以下代码：
< body>
< div id =page-wrapper>
< div id =header-wrapper>
<！ - 固定尺寸标题，180px - >
< / div>
< div id =content-wrapper> <！ - 包装内容，这个位应该填充视图端口的其余部分，除非内容大于视口，然后这个div会包装到... - >
< div id =content-banner> <！ - 带照片的滚动图像横幅 - >
< / div>
< div id =content> <！ - 页面的实际内容 - >
一些模拟内容
< / div>
< / div>
< / div>
< / body>
以下是我的CSS：
html，body {
height：100％;
颜色：黑色;
保证金：0;
}
body {
background：black;
margin：0px;
}
＃页面包装（
background：blue;
display：block;
margin-top：0px;
width：900px;
位置：绝对;
剩下：50％;
margin-left：-450px;
身高：100％;
边框：细实心黑色;
}
＃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;
职位：亲属;
top：25px;
width：900px;
border-right-right-radius：75px;
overflow：scroll-y;
box-shadow：0 0 10px＃000;
margin-bottom：-125px;
}
＃content-banner {
background：red;
display：inline-block;
职位：亲属;
margin：10px 10px 0 10px;
width：880px;
height：160px;
border-right-right-radius：65px;
overflow：hidden;
}
＃content-banner img {
border-top-right-radius：65px;
width：880px;
height：160px;
}
＃menu-wrapper {
background：green;
display：inline-block;
职位：亲属;
width：200px;
margin-left：10px;
}
#content {
display：inline-block;
职位：亲属;
margin-top：10px;
line-height：30px;
vertical-align：top;
}
另外，在所有重复的人员来到这里之前，已经阅读并尝试了所有这些问题：
让div填充浏览器视口的其余部分
a>
有人可以帮助我。我希望远离javascript。
编辑1：2012年9月27日08:35 CAT
我添加了一个jsFiddle示例来向您展示我的意思。它可以在这里查看： http://jsfiddle.net/vwKcs/2/ 我还添加了一些丢失的代码。
如果您知道标题的高度，可以使用绝对定位。内容将占据整个高度的100％，其中的第一个元素具有边缘顶部。在这个空白处，你再次使用 position：absolute;
来定位标题（只是需要的代码）
＃header-wrapper {
position：absolute;
height：180px;
width：900px;
top：0;
剩下：0;
}
＃content-wrapper {
position：absolute;
身高：100％;
width：900px;
top：0;
剩下：0;
}
＃content-wrapper> *：first-child {
margin-top：180px;
}
但是对于Stone，我不得不说：请只发布需要的代码解决你的问题。如果我必须解决布局问题，我对任何图像路径都不感兴趣
I want to make the content div fill in the rest of the page. But it only fills up what it has and then doesn't fill the rest of the page. Basically, if the height of the content is 20% of the view port, the div will fill in the rest of the view port with nothing (a white background with a 80% opacity). BUT it should wrap to the content if the content is more than the height of the view port. I have a the following code:
<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>
And here is my 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;
}
Also, before all the duplicate people come here with your linkage ;) I've already read through and tried all these questions:
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
Could someone please assist me. I would like to stay away from javascript for this.
EDIT 1 : 27/09/2012 08:35 CAT
I've added a jsFiddle example to show you what I mean. It can be viewed here: http://jsfiddle.net/vwKcs/2/ I also added some missing code. Sorry about that.
There ist a pretty easy way to achieve that if you know the height of your header: use absolute positioning. The content will take the whole 100% of the height and the first element inside it has a margin-top. in this white space, you position your header again with position: absolute;
(just the code which is needed for the effect)
#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;
}
but against Stone i have to say: please just post the code which is needed to solve your problem. I am not interested in any image paths if I have to solve a layouting issue
这篇关于Div不想填补身体的其余部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
