Question

我正在尝试此代码：

HTML：

<div id="cnt">
  <div id="left">
  I'm left
  </div>

  <div id="right">
  I'm right
  <br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br>
  </div>
</div>

CSS：

html,body,#cnt{
  height:100%;
}
#left {
  background: #990000;
  float: left;
  width: 100px;
  height: 100%;
}

#right {
  margine-left: 100px;
  background: #009900;
}

问题：当left DIV伸展时，如何让right DIV伸展身高？

将<br>视为动态内容，例如可能会增长。

由于

Answer 1

您可以在父级上使用flex，然后在右侧使用flex-grow: 1，以便填充可用空间。默认情况下，此弹性行中的左/右列将具有相同的高度。

（顺便说一句，你在margin-right上拼错了#right）

＆＃13;

body {margin:0;}
#cnt {
  /* use min-height if you want the content to be at least the window height;
  /* min-height: 100vh; */
  display: flex;
}
#cnt {
  display: flex;
}
#left {
  background: #990000;
}

#right {
  flex-grow: 1;
  background: #009900;
}

＆＃13;

<div id="cnt">
  <div id="left">
  I'm left
  </div>

  <div id="right">
  I'm right
  <br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br>
  </div>
</div>

＆＃13;

div的填充高度超过100％

1 个答案: