如何使一個div始終位於視圖的底部並根據底部div調整頂部div的大小？

Question

我是Web開發的新手，我正在做一些需要兩個div才能始終占據100％視口的事情。

我有div A，它是一個交互式圖像，應該盡可能大，並且應該占據屏幕的頂部。

然后，根據對交互式div A所執行的操作，包含1個按鈕或2個按鈕的divB。DivB位於視圖的底部。

有沒有一種干凈的方法可以使A的大小取決於div B動態占用的大小？ 就像視口的“剩余”應該是divA。我在要實現的目標下方放置了一個圖像。 第二張圖片顯示了如果在div A中執行了某些操作會發生什么-為簡單起見，我們可以說如果調用了某個方法Potato（），我們希望div B現在包含兩個按鈕。

我試着做一個解決方案：

        position: fixed;
        bottom: 0;

這樣，Div B就可以達到90％的正確率，但是它不會調整Div A的大小，我也不希望Div B以這種方式“覆蓋”任何東西。 我只希望它與Div A處於同一級別，並共享空間以獲取100％的視口。

任何幫助將不勝感激！ 如果可能的話，我寧願使用純CSS。 我正在做一些團隊工作，並且不能在項目中添加太多庫或新依賴項。

Answer 1

檢查這個小提琴https://jsfiddle.net/kt931frp/1/竅門是根據以下答案建議使用flex。

<div class="wrapper">
<div class="part1"></div>
<div class="part2">
<div contenteditable="true"class="contenteditable">continue typing...</div>
</div>
</div>

body {
  margin: 0;
}

.wrapper {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.part1 {
  background:#ffff00;
  flex: 1 0 auto;
}

.part2 {
  padding: 2em;
  color: white;
  background:#ff0000;
}
.contenteditable{
  width:100%;
  min-height:50px;
}

Answer 2

實際上，使用Flexbox和flex屬性非常容易。
您可以更改padding值以查看頂部塊的反應。

 body { margin: 0; } main { height: 100vh; display: flex; flex-direction: column; } .top-part { flex: 1 0 auto; /* This tells `top-part` to take the remaining place. */ background: violet; } .bottom-part { padding: 2em; color: white; background: lightblue; } 

 <main> <section class="top-part"></section> <section class="bottom-part"> Some text here </section> </main> 

Answer 3

帶上我的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> 

希望它能幫助您獲得靈感。