文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >HTML/CSS版面定位，适合父版面上的子版面

问HTML/CSS版面定位，适合父版面上的子版面
EN

Stack Overflow用户
提问于 2016-07-20 17:40:22
回答 1查看 65关注 0票数 0

任何帮助我们都将不胜感激！

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

我希望将黄色div的底部锚定在"Green“div的底部，而不考虑"Green”div的高度。黄色div的底部应该贴在"Green“div的底部。

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

​

代码语言：javascript
复制
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;
}
代码语言：javascript
复制
<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>

​

javascript
css
html
html-table
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-07-20 18:01:41

我的理解是，你的信息用来生成以下答案。如果我理解错了，你能告诉我吗？

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

​

代码语言：javascript
复制
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;
}
代码语言：javascript
复制
<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:添加表格以实现相同的概念。

代码语言：javascript
复制
.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;
}
代码语言：javascript
复制
<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>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/38477658

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档