HTML / CSS Div定位，适合父Div的子Div

时间：2016-07-20 09:40:22

标签： javascript html css html5 html-table

任何帮助都将受到高度赞赏！

我需要我的＆＃34;黄色＆＃34;彩色div调整其高度以适应其父div。 我只是想阻止＆＃34; Green＆＃34; div溢出或滚动。我希望黄色div能够自动调整其高度以适应＆＃34; Green＆＃34; div，但黄色div顶部的按钮应保持在它们的位置。

我想把黄色div的底部固定在＆＃34; Green＆＃34;的底部。 div，无论高度如何＆＃34; Green＆＃34; DIV。黄色div的底部应贴在＆＃34; Green＆＃34;的底部。格。

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

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

我的理解，您的信息用来生成以下答案。如果我错误地理解你的意思，你可以告诉我吗

选择1：在css计算方法中使用设置动态高度＆＃34;上课：subDiv＆＃34;

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题