如何让兄弟div动态填充父项？

我基本上有一些兄弟divs，标题，内容，页脚。我希望内容在窗口大小调整时动态地填充页眉和页脚左侧的父空间。如何让兄弟div动态填充父项？

我试过使用身高：100％在所有或其中一些，并始终使元素太高。我不想要一个滚动条。这可以用CSS来完成，还是必须使用Jquery？

HTML

<html class="fill"> 
    <body class="fill"> 
     <div>header</div> 
     <div class="content">content</div> 
     <div>footer</div> 
    </body> 
</html>

CSS

.fill 
{ 
    height:100%; 
} 
.content 
{ 
    height:100%; 
}

来源

2012-09-19 Tim

分100％到3部分构成。标题20％页脚20％，内容60％。 –

@ Siamak.A.M我只希望内容是动态的，而不是页眉和页脚。 – Tim

查看我的回答:)希望能帮到 –

如果你有固定的页眉和页脚的高度，你可以通过设置顶部和底部上的内容做这个div即

<style type="text/css"> 
html, body{width: 100%; height: 100%; margin: 0; padding: 0} 
.header{position: absolute; top: 0; width: 100%; height: 100px; background: #888} 
.content{position: absolute; width: 100%; top: 100px; bottom: 100px} 
.footer{position: absolute; bottom: 0; width: 100%; height: 100px; background: #888} 
</style>

来源

2012-09-19 15:40:05 robC

你的页脚正好在页眉下。 http://jsfiddle.net/W5k7r/ – Tim

这不是你想要的布局吗？也许你没有改变你的HTML到这些类？ http://jsfiddle.net/W5k7r/1/ – robC

哦对不起，没有。这看起来不错！我会尝试整合它。 – Tim

这是正确的，盒子的高度是容器的100％，但是你也必须考虑到你的帐户边界，还有那里的页脚。

所以总高度为：容器+边界的总和+高度页脚的

高度。

这将强制一个滚动条。

来源

2012-09-19 15:35:18 Andrew

有许多方法来模拟这种效果，每一个妥协。

1st。固定页眉，页脚和顶部和底部：jsFiddle 妥协，元素的大小是固定的，因此设计是刚性的，而不是内容驱动的。可以在未来变得更加艰难，因为一切都被绝对定位。

2nd。百分比比例：jsFiddle 妥协，一切规模 - 而不仅仅是内容区域。这意味着屏幕越大，页眉和页脚就越大。

3rd。混合搭配，修复固定的东西，让灵活的东西需要灵活：jsFiddle 妥协，虽然更灵活，但涉及隐藏可能难以管理的内容。

绝对不想使用这些方法中的任何一种。看看你的内容并混合将给你的内容最大的空间和最好的外观的方法。随着时间的推移，像calc()这样的CSS属性会使这个更容易，但浏览器需要先到达那里。

如果您需要限制您的页眉和页脚变得太大，我会推荐查看选项二，因为它最灵活，并实现最小和最大高度。（jsFiddle）

来源

2012-09-19 16:10:11 Dpolehonski

这是工作：
页眉和页脚基于像素和基于百分比的内容。
page.html中

<style> 
.header 
{ 
    background-color:#222; 
    padding:5px; 
    position: absolute; 
    top: 0px; 
    left:0px; 
    right:0px; 
    height:100px; 
} 
.content 
{ 
    background-color:#CCC; 
    padding:5px; 
    position: absolute; 
    top: 100px; 
    bottom: 50px; 
    left:0px; 
    right:0px; 
} 
.footer 
{ 
    position:absolute; 
    bottom: 0px; 
    border:1px; 
    height:50px; 
    background-color:#09F; 
    left:0px; 
    right:0px; 
} 

</style> 
<div class="header">1</div> 
<div class="content">2</div> 
<div class="footer">3</div>

来源

2012-09-19 16:37:07

如何让兄弟div动态填充父项？

回答

相关问题