保持小孩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>

在此先感謝。

來源

2016-09-25 sidrakesh

也許用最大高度？ – 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>

來源

2016-09-25 13:35:52 kukkuz

但在這種情況下，你聲明一個靜態高度#xyz，這可能是不受歡迎的，雖然沒有聲明一個沒有任何意義！ – Daniel

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

對不起，我並不是明確的，不是關於擁有**靜態高度**，**是關於在#xyz上定義高度**！例如，OP可能希望#xyz的高度是最高孩子大小的兩倍，並且每個孩子都有#xyz的一半高度！否則，我看不到任何使用display的理由：flex！ – Daniel

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

來源

2016-09-25 13:15:42

保持小孩div不變的高度

回答

相關問題