Question

这让我大吃一惊。我有一个包装div和2个div，其中一个div的高度为100％，但不会伸展以适应包装。

HTML：

<div class="wrapper">

<div class="inner_left">
Just<br />Some<br />Words
</div>

<div class="inner_right">
Anything
</div>

</div>

CSS：

.wrapper {
    width:auto !important;
    height:auto !important;
    margin:auto;
    float:left;
    padding:0;
    background-color:#ccc;
}
.inner_left {
    background-color:#f0f0f0;
    width:270px;
    height:auto !important;
    border:1px solid #666;
    float:left;
    margin:auto;
    padding:10px;
    text-align:center;
}
.inner_right {
    background-color:#f0f0f0;
    width:200px;
    height:100%;
    border:1px solid #666;
    float:right;
    margin:auto;
    padding:10px;
    text-align:center;
}

我需要div（inner_right）来自动调整包装器的高度。因此，无论何时包装器的高度收缩或拉伸，此div都会延伸到包装器的最大高度。

任何人都知道为什么我的代码不起作用？感谢任何帮助。

Answer 1

@showdev是正确的，父元素需要明确设置其高度，以便子元素的高度按照您希望的方式工作。

Answer 2

以下是使用display:table和display:table-cell

的解决方案

＆＃13;

.wrapper {
  display: table;
  width: 100%; /* whatever you want */
  padding: 0;
  background-color: #ccc;
}
.wrapper > div {
  display: table-cell;
  border: 1px solid #666;
  background-color: #f0f0f0;
  padding: 10px;
  text-align: center;
}
.inner_left {
  width: 270px;
}
.inner_right {
  width: 200px;
}

＆＃13;

<div class="wrapper">
  <div class="inner_left">Just
    <br />Some
    <br />Words</div>
  <div class="inner_right">Anything</div>
</div>

＆＃13;

Answer 3

尝试将100％高度设置为整个文档：

html,body {
  height: 100%;
}

和包装类：

.wrapper {
  width:auto !important;
  height: 100%;
  margin:auto;
  float:left;
  padding:0;
  background-color:#ccc;
}

fiddle

Div高度不伸展

3 个答案: