保持小孩div不变的高度

问题描述：

我希望保持两个小孩div的高度abc和def不变，并且每个高度都是其父母的一半xyz。我能够在CSS中使用flex来做到这一点，但在每个子div abc和def中，我都有动态添加行的表。这会导致div abc和def展开以适应行。保持小孩div不变的高度

我想每个这些变得滚动时，添加太多的行。

我已经尝试了很多解决方案，但他们都没有工作。

这里是我的代码：

#xyz { 
 
    flex: 1 1 auto; 
 
    display: flex; 
 
    flex-flow: column; 
 
} 
 
#abc { 
 
    width: 100%; 
 
    flex: 1; 
 
} 
 
#def { 
 
    width: 100%; 
 
    flex: 1; 
 
}

<div id="xyz" class="row"> 
 
    <div id="abc" class="col-border-bottom container-fluid"> 
 
    <h2>ABC details</h2> 
 
    <table id="abc-table"></table> 
 
    </div> 
 
    <div id="def" class="container-fluid"> 
 
    <h2>DEF details</h2> 
 
    <table id="def-table"></table> 
 
    </div> 
 
</div>

在此先感谢。

也许用最大高度？ – Eran

对，如果我理解正确，你想保持#abc和#def的**常数**高度，所以你必须定义＃xyz的height/max-height或#abc，#def height's/max-height，否则它确实没有任何意义，因为#abc和#def会太小，因为你无法在表格中看到任何清晰的行。 – Daniel

你真的想实现什么？ – Daniel

答

如果您使用的是flexbox来获取溢出，则应该将flexbox子项的内容包装到定位的contanier中，以便它可以在溢出时滚动。

因此，这里是什么，我在你的代码已经改变了总结：

为了证明溢出，对xyz容器设置一个特定的高度。您可以根据您的要求更改此高度。
向flexbox儿童添加position: relative和overflow-y: auto-abc和def。

包裹abc和def内容到一个绝对定位的盒子：

.flex-inner { 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    top: 0; 
    left: 0; 
}

增加了一些边界，并在盒说明表。

* { 
 
    box-sizing: border-box; 
 
} 
 
#xyz { 
 
    flex: 1 1 auto; 
 
    display: flex; 
 
    flex-flow: column; 
 
    height: 250px; 
 
    border: 1px solid; 
 
} 
 
#abc { 
 
    width: 100%; 
 
    flex: 1; 
 
    border: 1px solid; 
 
    position: relative; 
 
    overflow-y: auto; 
 
} 
 
#def { 
 
    width: 100%; 
 
    flex: 1; 
 
    border: 1px solid; 
 
    position: relative; 
 
    overflow-y: auto; 
 
} 
 
.flex-inner { 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
table { 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
} 
 
table td { 
 
    border: 1px solid red; 
 
}

<div id="xyz" class="row"> 
 
    <div id="abc" class="col-border-bottom container-fluid"> 
 
    <div class="flex-inner"> 
 
     <h2>ABC details</h2> 
 
     <table id="abc-table"> 
 
     <tr> 
 
      <td colspan="2">Title</td> 
 
     </tr> 
 
     <tr> 
 
      <td>row</td> 
 
      <td>row</td> 
 
     </tr> 
 
     <tr> 
 
      <td>row</td> 
 
      <td>row</td> 
 
     </tr> 
 
     <tr> 
 
      <td>row</td> 
 
      <td>row</td> 
 
     </tr> 
 
     <tr> 
 
      <td>row</td> 
 
      <td>row</td> 
 
     </tr> 
 
     </table> 
 
    </div> 
 
    </div> 
 
    <div id="def" class="container-fluid"> 
 
    <div class="flex-inner"> 
 
     <h2>DEF details</h2> 
 
     <table id="def-table"> 
 
     <tr> 
 
      <td colspan="2">Title</td> 
 
     </tr> 
 
     <tr> 
 
      <td>row</td> 
 
      <td>row</td> 
 
     </tr> 
 
     <tr> 
 
      <td>row</td> 
 
      <td>row</td> 
 
     </tr> 
 
     <tr> 
 
      <td>row</td> 
 
      <td>row</td> 
 
     </tr> 
 
     <tr> 
 
      <td>row</td> 
 
      <td>row</td> 
 
     </tr> 
 
     </table> 
 
    </div> 
 
    </div> 
 
</div>

但在这种情况下，你声明一个静态高度#xyz，这可能是不受欢迎的，虽然没有声明一个没有任何意义！ – Daniel

它可以是动态的，如果你想 - 甚至视口的高度...OP希望孩子能拥有'xyz'的一半高度:) – kukkuz

对不起，我并不是明确的，不是关于拥有**静态高度**，**是关于在#xyz上定义高度**！例如，OP可能希望#xyz的高度是最高孩子大小的两倍，并且每个孩子都有#xyz的一半高度！否则，我看不到任何使用display的理由：flex！ – Daniel

答

给孩子div溢出：scroll'和'height：[something]'。

保持小孩div不变的高度

相关推荐