在CSS中100％的中间div？ [英] Middle div with 100% in CSS?
问题描述
可能重复：
CSS - 高度百分比
我无法得到3的中间格以适应100％的可用空间。
< body>
< div id =container>
< div id =header>
< / div>
< div id =content>
< / div>
< div id =footer>
< / div>
< / div>
< / body>
我的CSS是：
html，body {
margin：0;
padding：0;
border：1px;
vertical-align：top;
font-family：Trebuchet MS，Arial，Helvetica，sans-serif;
font-size：14px;
颜色：＃333;
身高：100％;
}
#container {
height：100％;
宽度：100％;
}
#header {
height：100px;
宽度：100％;
背景：＃069;
}
#content {
height：100％;
宽度：100％;
背景：＃F60;
}
#footer {
height：75px;
宽度：100％;
背景：＃060;
}
Center div实际上是100％，但它不适合可用空间。
它是这样做的：
如果屏幕是500px
30px
100％（500px）
30px
我需要的是：
30px
100％（ 460px）
30px
这可能不使用javascript？
非常感谢
编辑：
抱歉，我的意思身高我有3个元素，标题，中间和页脚。页眉和页脚有固定的高度，但我希望中间可以容纳所有可用空间
找到另一种基于其他stackoverflow问题的解决方案：
* {margin：0; padding：0}
html，body {
margin：0;
padding：0;
vertical-align：top;
font-family：Trebuchet MS，Arial，Helvetica，sans-serif;
font-size：14px;
颜色：＃333;
身高：100％;
border：0;
}
#header
{
height：100px;
背景：＃C60;
}
#container
{
min-height：100％;
height：auto！important; / *导致页脚在IE 6 * /
高度：100％;
margin：0 auto -100px; / *允许页脚高度* /
vertical-align：bottom;
背景：＃096;
}
#footer
{
height：100px; / * Push必须与页脚高度相同* /
背景：＃C60;
HTML
<身体GT;
< div id =container>
< div id =header> < / DIV>
< div id =content> < / DIV>
< / div>
< div id =footer> < / DIV>
< / body>
试试这样的 jsfiddle 。
html
< body>
< div id =wrap>
< div id =container>
< div id =header> header
< / div>
< div id =content> qweW
< / div>
< / div>
< / div>
< div id =footer> footer
< / div>
< / body>
css
* {margin：0; padding：0}
html，body {
margin：0;
padding：0;
border：1px;
vertical-align：top;
font-family：Trebuchet MS，Arial，Helvetica，sans-serif;
font-size：14px;
颜色：＃333;
身高：100％;
背景：＃F60;
}
#container {
width：100％;
padding-bottom：75px;
}
#wrap {min-height：100％;}
#header {
height：100px;
宽度：100％;
背景：＃069;
}
#content {
height：100％;
宽度：100％;
}
#footer {
position：relative;
margin-top：-75px;
明确：两者;
height：75px;
宽度：100％;
背景：绿色;
}
我调整了HTML以在容器div周围添加包装器 ，并将页脚移出两者。
Possible Duplicate:
CSS - percentage height
I can't get the middle div of 3 divs to fit 100% of available space.
<body>
<div id="container">
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
</body>
My CSS is:
html, body {
margin: 0;
padding: 0;
border:1px;
vertical-align:top;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:14px;
color:#333;
height: 100%;
}
#container {
height: 100%;
width: 100%;
}
#header {
height: 100px;
width: 100%;
background: #069;
}
#content {
height: 100%;
width: 100%;
background: #F60;
}
#footer {
height: 75px;
width: 100%;
background: #060;
}
Center div is in effect being 100%, but its not fitting available space.
It is doing something like this: If the screen is 500px
30px
100% (500px)
30px
What I need is:
30px
100% (460px)
30px
Is this possible withouth using javascript?
Thanks a lot
EDIT:
Sorry I meant Height I have 3 elements, header, middle and footer. Header and footer have fixed height, but I want middle to fit all available space
Found another solution based on other stackoverflow question:
* { margin: 0; padding: 0 }
html, body {
margin: 0;
padding: 0;
vertical-align:top;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:14px;
color:#333;
height: 100%;
border: 0;
}
#header
{
height: 100px;
background:#C60;
}
#container
{
min-height: 100%;
height: auto !important; /*Cause footer to stick to bottom in IE 6*/
height: 100%;
margin: 0 auto -100px; /*Allow for footer height*/
vertical-align:bottom;
background:#096;
}
#footer
{
height: 100px; /*Push must be same height as Footer */
background:#C60;
}
HTML
<body>
<div id="container">
<div id="header"> </div>
<div id="content"> </div>
</div>
<div id="footer"> </div>
</body>
Try something like this jsfiddle.
html
<body>
<div id="wrap">
<div id="container">
<div id="header">header
</div>
<div id="content">qweW
</div>
</div>
</div>
<div id="footer">footer
</div>
</body>
css
* { margin: 0; padding: 0 }
html, body {
margin: 0;
padding: 0;
border:1px;
vertical-align:top;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:14px;
color:#333;
height: 100%;
background: #F60;
}
#container {
width: 100%;
padding-bottom: 75px;
}
#wrap {min-height: 100%;}
#header {
height: 100px;
width: 100%;
background: #069;
}
#content {
height: 100%;
width: 100%;
}
#footer {
position: relative;
margin-top: -75px;
clear:both;
height: 75px;
width: 100%;
background: green;
}
I tweaked your HTML to add a "wrapper" around the "container" div, and move the "footer" out of both.
这篇关于在CSS中100％的中间div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
