Question

我的布局如下 -

<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粘贴在Title div的底部。现在我希望能够使Content div占用剩余的75px的高度。问题是，顶部div的高度不固定。这是一个问题的演示 -

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

Answer 1

试试这个

<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>

Answer 2

通过将背景颜色移动到容器并重新排列它，可以使它看起来占据整个区域。

<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>

Answer 3

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

Answer 4

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

您最好的选择是：

将包装器设置为display：table，并设置标题和内容div以显示：table-row

但是如果你想用它来获得更多创意，你可以改为使用其他任何一个选项：

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

如果您想要非常明确，可以使用javascript设置Content div的高度：

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

如何使div占用剩余的垂直空间

4 个答案: