我對 Web 開發還很陌生，我正在做一些需要兩個 div 來始終占據 100% 視口的東西。我有一個 div A，它是一個交互式圖像，應該盡可能大并且應該占據屏幕的頂部。然后是包含 1 個或 2 個按鈕的 div B，具體取決于在交互式 div A 上執行的操作。 Div B 位于視圖的底部。有沒有一種干凈的方法可以使 A 的大小取決于 div B 動態占用的大?。烤拖褚暱诘摹笆Ｓ嗖糠帧睉撌?div A。我在下面放了一張我想要實現的圖像。第二張圖顯示了如果在 div A 中執行某些操作會發生什么 - 為簡單起見，我們可以說如果調用了某個方法potato()，我們希望 div B 現在包含兩個按鈕。我試過用以下方法解決： position: fixed; bottom: 0;并且 Div B 看起來 90% 正確，但它不會調整 Div A 的大小，我也不希望 Div B 以這種方式“覆蓋”任何東西。我只是希望它與 Div A 處于同一級別并共享空間以獲得 100% 的視口。任何幫助將不勝感激！如果可能，我更喜歡使用純 CSS。我正在做一些團隊工作，無法在庫或項目的新依賴項方面添加太多內容。
3 回答
qq_笑_17
TA貢獻1818條經驗 獲得超7個贊
帶上我的 2 美分，您還可以利用display: table|table-row|table-cell來創建此布局（請參閱有關 display 屬性的MDN 文檔以了解更多信息）。
使用這些屬性時的技巧，除非display: flex，是告訴“動作”單元格測量 0.1px，這將迫使單元格盡可能地最小。但是，它不會破壞其內部內容，允許根據內部內容進行動態調整。
由于單元格默認共享空間，因此這種布局可以完成工作，因為“Div A”正在使用剩余的可用空間。
檢查這個JSFiddle或使用下面的代碼片段來玩它。我注釋了您可以調整的屬性。
body {
margin: 0px;
}
.app {
width: 100vw;
height: 100vh;
display: table;
}
.main,
.actions {
display: table-row;
}
.main > div,
.actions > div {
display: table-cell;
vertical-align: middle;
text-align: center;
border-width: 10px; /* tweak this */
border-style: solid; /* tweak this */
}
.main > div {
border-color: purple; /* tweak this */
background-color: violet; /* tweak this */
}
.actions > div {
padding: 20px; /* tweak this */
border-color: blue; /* tweak this */
background-color: lightblue; /* tweak this */
height: 0.1px;
}
.button {
width: 200px; /* tweak this */
padding: 10px; /* tweak this */
}
<div class="app">
<main class="main">
<div>
Div A
</div>
</main>
<footer class="actions">
<div>
<div>
Div B - some text and 2 buttons
</div>
<div>
<button class="button">
Button 1
</button>
</div>
<div>
<button class="button">
Button 2
</button>
</div>
</div>
</footer>
</div>