HTML/CSS Div 定位，将子 Div 放在父 Div 上答案

【问题标题】：HTML/CSS Div positioning, fit child Div on parent DivHTML/CSS Div 定位，将子 Div 放在父 Div 上
【发布时间】：2016-07-20 18:09:56
【问题描述】：

任何帮助将不胜感激！

我需要我的“黄色”彩色 div 来调整其高度以适应其父 div。我只是想防止“绿色” div 溢出或滚动。我希望黄色 div 自动调整其高度以适应“绿色”div 内，但黄色 div 顶部的按钮应保持在其位置。

我想将黄色 div 的底部锚定在“绿色”div 的底部，而不管“绿色”div 的高度如何。黄色 div 的底部应该贴在“绿色”div 的底部。

这是我的 jsfiddle：https://jsfiddle.net/koykoys/bk4hg5my/

body {
  margin: 0;
}
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
.parent_container {
  border: 5px solid red;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.blue_box {
  height: 150px;
  border: 5px solid blue;
}
.green_table {
  flex: 1;
  overflow-y: auto;
  border: 5px solid green;
}
.subDiv{
  border: 5px solid yellow;
  overflow-y:auto;
  max-height:300px
    
}
.btn_actions {
  padding: 10px;
}

<div class="parent_container">
  <div class="btn_actions">
    <button class="btn">Expand Div</button>
  </div>
  <div class="blue_box">
    
  </div>
  <div class="btn_actions">
    <button class="btn">Download Data</button>
    <button class="btn">Sort Data</button>
  </div>
  <div class="green_table">
     <button >Button1</button><br>
    <button >Button2</button>
    <button >Button3</button>
    <div class="subDiv">
                Download Data <br>
    Download Data <br>
    Download Data <br>
                Download Data <br>
    Download Data <br>
    Download Data <br>
                Download Data <br>
    Download Data <br>
    Download Data <br>
                Download Data <br>
    Download Data <br>
    Download Data <br>
    Download Data <br>
    Download Data <br>
                Download Data <br>
    Download Data <br>
    Download Data <br>
    Download Data <br>
    Download Data <br>
                Download Data <br>
    Download Data <br>
    Download Data <br>
    Download Data <br>
    Download Data <br>
                Download Data <br>
    Download Data <br>
    Download Data <br>
    Download Data <br>
    Download Data <br>
                Download Data <br>
    Download Data <br>
    Download Data <br>
    Download Data <br>
    Download Data <br>
                Download Data <br>
    Download Data <br>
    Download Data <br>
    </div>
  </div>
</div>

【问题讨论】：

检查我的答案@Reymark Matira
非常感谢 :) 成功了
接受我的回答@Reymark
已接受，谢谢。

标签： javascript css html html-table

【解决方案1】：

我的理解，您的信息用于生成以下答案。如果我理解错误意味着你能告诉我吗

选择 1：在 css calc 方法中使用设置动态高度“Class : subDiv”

body {
  margin: 0;
}
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
.parent_container {
  border: 5px solid red;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.blue_box {
  height: 150px;
  border: 5px solid blue;
}
.green_table {
  flex: 1;
  overflow-y: auto;
  border: 5px solid green;
}
.subDiv{
  border: 5px solid yellow;
  overflow-y:auto;
  height:calc(100% - 44px);
    
}
.btn_actions {
  padding: 10px;
}

<div class="parent_container">
  <div class="btn_actions">
    <button class="btn">Expand Div</button>
  </div>
  <div class="blue_box">
    
  </div>
  <div class="btn_actions">
    <button class="btn">Download Data</button>
    <button class="btn">Sort Data</button>
  </div>
  <div class="green_table">
     <button >Button1</button><br>
    <button >Button2</button>
    <button c>Button3</button>
    <div class="subDiv">
                Download Data <br>
    Download Data <br>
    Download Data <br>
                Download Data <br>
    Download Data <br>
    Download Data <br>
                Download Data <br>
    Download Data <br>
    Download Data <br>
                Download Data <br>
    Download Data <br>
    Download Data <br>
    Download Data <br>
    Download Data <br>
                Download Data <br>
    Download Data <br>
    Download Data <br>
    Download Data <br>
    Download Data <br>
                Download Data <br>
    Download Data <br>
    Download Data <br>
    Download Data <br>
    Download Data <br>
                Download Data <br>
    Download Data <br>
    Download Data <br>
    Download Data <br>
    Download Data <br>
                Download Data <br>
    Download Data <br>
    Download Data <br>
    Download Data <br>
    Download Data <br>
                Download Data <br>
    Download Data <br>
    Download Data <br>
    </div>
  </div>
</div>

选择2：添加表格以实现相同的概念。

.clearfix:after {
  content: " ";
  display: block;
  height: 0;
  clear: both;
}
.clearfix {
  background-color: lightblue;
}
body {
  margin: 0;
}
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
.parent_container {
  border: 5px solid red;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.blue_box {
  height: 150px;
  border: 5px solid blue;
}
.green_table {
  flex: 1;
  overflow-y: auto;
  border: 5px solid green;
}
.subDiv {
  border: 5px solid yellow;
  position: relative;
  overflow-y: auto;
  max-height: 300px
}
.btn_actions {
  padding: 10px;
}

<div class="parent_container">
  <div class="btn_actions">
    <button class="btn">Expand Div</button>
  </div>
  <div class="blue_box">

  </div>
  <div class="btn_actions">
    <button class="btn">Download Data</button>
    <button class="btn">Sort Data</button>
  </div>


  <div class="subDiv">
    <table>
      <tr>
        <td>
          <button>Button1</button>
          <br>
          <button>Button2</button>
          <button c>Button3</button>
        </td>
      </tr>
      <tr>
        <td>Download Data</td>
      </tr>
      <tr>
        <td>Download Data</td>
      </tr>
      <tr>
        <td>Download Data</td>
      </tr>
      <tr>
        <td>Download Data</td>
      </tr>
      <tr>
        <td>Download Data</td>
      </tr>
      <tr>
        <td>Download Data</td>
      </tr>
      <tr>
        <td>Download Data</td>
      </tr>
      <tr>
        <td>Download Data</td>
      </tr>
      <tr>
        <td>Download Data</td>
      </tr>
      <tr>
        <td>Download Data</td>
      </tr>
      <tr>
        <td>Download Data</td>
      </tr>
      <tr>
        <td>Download Data</td>
      </tr>
      <tr>
        <td>Download Data</td>
      </tr>
      <tr>
        <td>Download Data</td>
      </tr>
      <tr>
        <td>Download Data</td>
      </tr>
      <tr>
        <td>Download Data</td>
      </tr>
      <tr>
        <td>Download Data</td>
      </tr>
      <tr>
        <td>Download Data</td>
      </tr>
      <tr>
        <td>Download Data</td>
      </tr>
      <tr>
        <td>Download Data</td>
      </tr>
      <tr>
        <td>Download Data</td>
      </tr>
      <tr>
        <td>Download Data</td>
      </tr>

    </table>
  </div>

</div>

【讨论】：