如何让一个div取剩余的垂直空间

我有一个布局如下 -如何让一个div取剩余的垂直空间

<div style="height:100px;border: 1px solid #F44;"> 
    <div style="background-color: #ccc; padding: 4px;">Title</div> 
    <div style="background-color: #a0a; padding: 4px;">Content</div> 
</div>

其中包含的内容，坚持标题div的倒数第二个div。现在我希望能够让Content div占据剩余的75px高度。问题是顶部div的高度不固定。这是问题的一个演示 -

http://jsbin.com/pirus/2/edit

来源

2014-07-23 Tushar

试试这个

<div style="height:100px;border: 1px solid #F44; overflow: hidden"> 
    <div style="background-color: #ccc; padding: 4px;">Title</div> 
    <div style="background-color: #a0a; padding: 4px; height: 100%;">Content</div> 
</div>

来源

2014-07-23 19:32:46 Idziak

从技术上讲，这是切断内容分区的底部... – Jason

是的，它切断了底部。 – Tushar

你可以使它看起来像它通过移动背景颜色的容器，并重新安排这一个占据了整个区域位。

<div style="height:100px;border: 1px solid #F44;background-color: #a0a;"> 
    <div style="background-color: #ccc; border:4px solid #ccc;">Title</div> 
    <p style='margin:0;padding:3px'>Content</p> 
</div>

来源

2014-07-23 19:34:19

不，这不行。我知道它看起来像是在工作，但它没有像上面发布的问题那样完全按预期进行。 – Tushar

从包装div移除高度。这样，高度将是动态的。

来源

2014-07-23 20:33:19 Aleksandar

你可以做很多不同的事情。

你最好的选择是：

设置包装上，以显示：表，并设置标题和内容div的展示：表列

但是，如果你想要获得更多创意，您可以使用其他选项中的任意一种：

从外容器中移除100像素高度，使其仅与内容一样高。
如果要指定外容器的高度，你可以指定你的内部元素的高度，以及（例如：标题25px的，内容960x75像素;或标题：25％，含量75％
如果外部容器应该代表你可以设置你的内容高度100vh这是视高度的100％的页面的整个高度。

如果你想了解它，你可以设定非常明确Content div的高度与javascript：

var contentH = ($('.wrapper').height() - $('.title').height());   
$('.content').css('height',contentH);

来源

2014-07-23 20:46:42 davidcondrey

如何让一个div取剩余的垂直空间

回答

相关问题