如何使用CSS将div的高度调整为容器高度？

Question

如何使用CSS将div的高度调整为容器高度？

<div class='container'><br>
  &nbsp;&nbsp;<div style='display: block; height: 500px'>left</div><br>
  &nbsp;&nbsp;<div id='to-be-sized' >right</div><br>
</div>

Answer 1

你可以:

• 使用纯CSS的不完整但哲学上正确的路径,并面对浏览器之间的各种不兼容性

要么

• 写3行脏的语义不正确和魔鬼制作的表,让它在任何地方都能很好地工作

你的选择:)

Answer 2

如果您碰巧使用jQuery,有一种方法可以做到这一点.当您要求使用CSS时,这可能不是您可以选择的选项,但如果您可以使用它,它将完全按照您的要求执行.

$(divToResize).css('height',$(container).innerHeight());

$(divToResize)是您希望与其容器高度匹配的DIV的选择器,$(容器)在逻辑上是您想要获得其高度的容器.

无论是否在CSS中指定容器的高度,这都将起作用.

Answer 3

我知道这个问题很久以前就已经得到了回答，但是当我现在遇到这个问题时，我使用了 Flex Box。这很棒。请参阅Chris Coyier 撰写的Flexbox 完整指南

.parent {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  width: 100%;
}
.child {
  flex-grow: 1;
}
.child1 {
  min-height: 200px;
  background-color: #fee;
}
.child2 {
  background-color:#eef;
}

<div class="parent">
  <div class="child child1">Child 1</div>
  <div class="child child2">Child 2</div>
</div>

（Flexible Box）模块Flexbox Layout旨在提供一种更有效的方式来布局、对齐和分配容器中的项目之间的空间，即使它们的大小未知和/或动态（因此称为“flex”）。

弹性布局背后的主要思想是让容器能够改变其项目的宽度/高度（和顺序）以最好地填充可用空间（主要是为了适应所有类型的显示设备和屏幕尺寸）。弹性容器可扩展项目以填充可用空间，或缩小项目以防止溢出。

最重要的是，与常规布局（基于垂直的块和基于水平的内联）相比，Flexbox 布局与方向无关。虽然这些对于页面来说效果很好，但它们缺乏支持大型或复杂应用程序的灵活性（不是双关语）（特别是当涉及到方向更改、调整大小、拉伸、收缩等时）。

Answer 4

如果我的理解是正确的，并且未指定高度的 div 的默认高度是 auto，那么如果不在包含的 div 上设置显式高度，这是不可能的。如果在包含的 div 上设置了显式高度，则包含的 div 上的 height:100% 将意味着它会增长到容器的高度。