Question

这是我的HTML：

<div id="container">
    <div id="red"></div>
    <div id="yellow">
        <div id="green"></div>
    </div>
</div>

这是我的CSS：

#container { height:auto; width:100%; background:orange; float:left; }
#red       { height:100%; width:200px; background:red; float:left; position:relative; }
#yellow    { height:100%; width:calc(100% - 210px); background:yellow; float:right; position:relative; padding:5px; }
#green     { height:300px; width:100%; background:green; }

以下是一个示例：https://jsfiddle.net/cc5xL660/

正如在jsfiddle中一样，#red div是不可见的。我正在寻找一种方法，可以在没有特定#red维度的情况下显示div height。当然，我可以向height:300px #red提供div，但#green div应该是动态的。我希望#red div具有相同的高度。

Answer 1

你必须提供

position: relative到#container
position: absolute到#red

您的JSFiddle已修改：https://jsfiddle.net/cc5xL660/4/

Answer 2

您可以使用display:flex来执行此操作。请查看 here

＆＃13;

#container {
  height: auto;
  width: 100%;
  background: orange;
  float: left;
  display:flex;
  flex-direction:row;
  align-items:stretch;
}

#red {
  /*height: 100%;*/
  width: 200px;
  background: red;
  float: left;
  position: relative;
}

#yellow {
  /*height: 100%;
  width: calc(100% - 210px);*/
  background: yellow;
  float: right;
  position: relative;
  padding: 5px;
  flex:1 0;
}

#green {
  height: 300px;
  width: 100%;
  background: green;
}

＆＃13;

<div id="container">

  <div id="red"></div>

  <div id="yellow">

    <div id="green"></div>

  </div>

</div>

＆＃13;

<强> Fiddle

如何获得高度：高度100％div：自动div？

2 个答案: