Question

我想根据它上面的兄弟的高度设置第二个DIV的高度，以及具有这两个DIV的父容器。

<div class="panel">
  <div class="box-one">
    <label>
      <span class="label-text">Name:</span>
      <input type="text" />
    </label>
    <label>
      <span class="label-text">Description:</span>
      <textarea name="" id="" cols="30" rows="5"></textarea>
    </label>
  </div>
  <div class="box-two">
    <div class="content">....</div>
  </div>
</div>

这是我的SCSS代码

.panel {
  height: 300px;
  border: solid 2px black;
  background-color: #ccc;
  display: table;
  width: 50%;
  padding: 20px;
}
.panel label {
  display: block;
  margin-bottom: 1em;
}
.panel label .label-text {
  display: block;
}
.panel label input, .panel label textarea {
  width: 90%;
}
.panel .box-one, .panel .box-two {
  display: table-row;
}
.panel .box-two {
  height: 100%;
  border: solid 2px black;
  overflow: auto;
  background-color: #fff;
  padding: 10px;
  box-sizing: border-box;
}
.panel .box-two .content {
  height: 100%;
  overflow: auto;
}

我是如何通过这种CSS表格方法找到解决方案的，但有没有更好的方法而不是这个？因为这种方法需要附加的DIV来包裹它。

这是我的codepen http://codepen.io/nirmalkc/pen/jPRWKK?editors=110

顺便说一句，我不想使用任何基于JavaScript的方法。

如果有人，如果上面有更好的替代品，那就更好了。

Answer 1

flexbox可以做到这一点。

＆＃13;

.panel {
  height: 300px;
  width: 50%;
  margin: 10px auto;
  border: 1px solid grey;
  display: flex;
  flex-direction: column;
}
.panel [class*="box"] {
  flex: 1 0 auto;
}
.box-one {
  background: lightblue;
}
.box-two {
  background: lightgreen;
  border-top: 1px solid red;
}
.tall {
  height: 200px;
}

＆＃13;

<div class="panel">
  <div class="box-one">
  </div>
  <div class="box-two">
  </div>
</div>

<div class="panel">
  <div class="box-one tall">
  </div>
  <div class="box-two">
  </div>
</div>

＆＃13;

根据兄弟及其父亲

1 个答案: