Question

我有一个固定高度的父div。在里面，我有两个div对齐顶部和底部。顶部div具有最大高度和最小高度。当div中的很多文本增长到max-height时。

在这种情况下，当顶部div内的数据很少时，底部div应该填充父div的休息空间。

   elem.style.border = "1px solid #red"
                // the same as
                elem.style.borderWidth = "1px";
                elem.style.borderColor = "#red";
                elem.style.borderStyle = "solid";

.div1 {
  border: 1px solid blue;
  top: 0;
  position: absolute;
  width: 100%;
  overflow: auto;
  max-height: 384px;
  min-height: 160px;
}
.div2 {
  border: 1px solid red;
  bottom: 0;
  position: absolute;
  height: auto;
  min-height: 202px;
}
.parent_el {
  height: 586px !important;
  border: 1px solid black;
  position: relative;
}

Answer 1

这是 flexbox ：

的完美案例

.parent_el {
  display: flex;           /*make parent a flexbox*/
  flex-direction: column;  /*children should go down the page*/
}

.div2 {
  flex: 1;                 /*fill the rest of the container*/
}

删除position: absolute和width: 100%，因为我已在我的代码段中完成。

代码段演示最小高度：

＆＃13;

.parent_el {
  display: flex;           /*make parent a flexbox*/
  flex-direction: column;  /*children should go down the page*/
  height: 586px;
  border: 1px solid black;
}

.div1 {
  border: 1px solid blue;
  max-height: 384px;
  min-height: 160px;
  overflow: auto;
}

.div2 {
  flex: 1;                 /*fill the rest of the container*/
  border: 1px solid red;
}

＆＃13;

<div class="parent_el">
  <div class="div1">
    Text. Here can be huge text also
  </div>
  <div class="div2">
    Here would be picture or map so it must grow in height when top div is small
  </div>
</div>

＆＃13;

<小时/> 代码段演示了max-height：

＆＃13;

.parent_el {
  display: flex;           /*make parent a flexbox*/
  flex-direction: column;  /*children should go down the page*/
  height: 586px;
  border: 1px solid black;
}

.div1 {
  border: 1px solid blue;
  max-height: 384px;
  min-height: 160px;
  font: 50px arial;
  overflow: auto;
}

.div2 {
  flex: 1;                 /*fill the rest of the container*/
  border: 1px solid red;
}

＆＃13;

<div class="parent_el">
  <div class="div1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div class="div2">
    Here would be picture or map so it must grow in height when top div is small
  </div>
</div>

＆＃13;

嵌套的div。根据顶部div大小自动设置底部div高度

1 个答案: