如何讓DIV內容長大到一定程度？

我有一個<div>它圍着一張桌子包裹，像這樣：如何讓DIV內容長大到一定程度？

<div class="container"> 
    <table> 
     rows... 
    </table> 
</div> 
<div class="buttons"> 
    Here I have two buttons 
</div>

下表我有兩個按鈕。我想要擴展表格並添加新行時移動按鈕。這工作。

我想要的是，一旦按鈕到達窗口的末端，滾動條就應該出現在桌子上，這樣無論窗戶有多小，按鈕總是可見的。

這必須完成沒有Javascript和我卡在CSS部分。

這是我的CSS：

.container { 
    width: 100%; 
    height: 100% 
    overflow-x: auto; 
    overflow-y: auto; 
}

有什麼我可以添加到表，使其工作？當我縮小窗口時，我可以讓它顯示一個垂直滾動條 - 這很棒 - 但我找不到水平滾動條的解決方案。

所以總結一下，當屏幕變小或者桌子變得很大以至於帶按鈕的div將被扔出窗外時，我想要水平滾動條。

任何想法？

來源

2017-08-01 captain

添加white-space: nowrap如果你想這樣做沒有彎曲。你可以不喜歡這樣

.buttons { 
 
    height: 40px; 
 
} 
 
.container { 
 
    max-height: calc(100vh - 40px); 
 
    overflow: scroll; 
 
} 
 
body { 
 
    margin: 0; 
 
}

<div class="container"> 
 
    <table> 
 
     <tr><td>Row</td></tr><tr><td>Row</td></tr><tr><td>Row</td></tr><tr><td>Row</td></tr><tr><td>Row</td></tr><tr><td>Row</td></tr><tr><td>Row</td></tr><tr><td>Row</td></tr><tr><td>Row</td></tr><tr><td>Row</td></tr><tr><td>Row</td></tr><tr><td>Row</td></tr><tr><td>Row</td></tr><tr><td>Row</td></tr><tr><td>Row</td></tr> 
 
    </table> 
 
</div> 
 
<div class="buttons"> 
 
    Here I have two buttons 
 
</div>

來源

2017-08-01 09:33:03 jagsler

一個問題，如果我加入div容器上面的更多的東西？我必須在最大高度計算中手動添加容器上方所有其他div的高度嗎？ – captain

是的，認爲你將不得不補充說。如果你將一個固定高度的東西放在這個上面，你可以稍微改變一下這個代碼，以便只包含這個之上的單個元素的高度。請參閱：https://codepen.io/japmul/pen/EvKrZe 雖然您可能會更好地使用flex，但如果這對您是可能的。 – jagsler

我稍後會檢查Flex解決方案，我不知道現在是否可以使用它。但問題是這張表會插入不同的網站。所以它可能是這個容器div可能有另外兩個div，導航條等，我必須在沒有Javascript的情況下實現這一點，我猜CSS必須有一點動態。你有什麼建議嗎？我現在正在做實驗，看看什麼可行，哪些不行。 – captain

你可以在你的情況父元素上使用Flexbox的其body並設置高度100vh然後還要設置overflow-y: auto上container。

如果你也想水平滾動條，那麼你只需要在tdDEMO

body { 
 
    height: 100vh; 
 
    display: flex; 
 
    flex-direction: column; 
 
    margin: 0; 
 
} 
 
.container { 
 
    overflow-y: auto; 
 
}

<div class="container"> 
 
    <table> 
 
     <tbody> 
 
     <tr><td>row</td></tr><tr><td>row</td></tr><tr><td>row</td></tr><tr><td>row</td></tr><tr><td>row</td></tr><tr><td>row</td></tr><tr><td>row</td></tr><tr><td>row</td></tr><tr><td>row</td></tr><tr><td>row</td></tr><tr><td>row</td></tr><tr><td>row</td></tr><tr><td>row</td></tr><tr><td>row</td></tr> 
 
     </tbody> 
 
    </table> 
 
</div> 
 
<div class="buttons"> 
 
    Here I have two buttons 
 
</div>

來源

2017-08-01 09:30:42

如何讓DIV內容長大到一定程度？

回答

相關問題