CSS-將頁面分為兩半，不重疊

Question

我試圖將html頁面分為兩半（上半部分為60％，下半部分為40％），但是，令我驚訝的是，我很難做到在調整瀏覽器窗口大小時不會出現內容重疊的情況。 我嘗試了彈性，絕對定位，百分比...

我有這個

的HTML

   <div class="top">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
   </div>

   <div class="bottom">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
   </div>

</div>

的CSS

html, body {
   height:100%;
   padding:0;
   margin:0;
}
.container {
   height:100%;
}
.top {
   height:60%;
   background:red;
}
.bottom {
   height:40%;
   background:yellow;
}

這很好。

但是，調整頁面大小時，頂部與底部重疊。

如何使兩半知道內容的高度而不重疊？ 我不想以像素為單位設置高度。 只有在CSS絕對沒有解決方案的情況下，我才對JavaScript開放

小提琴

Answer 1

如果減少空間，則內容需要放在某個地方。 您有2個選項：1.隱藏內容（溢出：隱藏）2.顯示滾動條。（溢出：滾動）我認為最好將垂直滾動條放在帶有overflow-y:auto主體上，以便在調整頁面大小時，滾動條自動出現。

Answer 2

使用min-height以避免重疊

.top {
  min-height:60%;
  background:red;
}
.bottom {
  min-height:40%;
  background:yellow;
}

Answer 3

 html, body { height:100%; padding:0; margin:0; } .container { height:100%; display: flex; align-items: center; justify-content: center; flex-direction: column; } .top { flex: 6; background:red; width: 100%; } .bottom { flex: 4; background:yellow; width: 100%; } 

  <div class="container"> <div class="top"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> <div class="bottom"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 

這是演示

Answer 4

添加overflow: auto添加到CSS。 由於您的div.top太短而無法容納所有文本，因此它會溢出該元素並進入div.bottom 。 當您將overflow屬性應用於元素時，它將文本保留在元素的范圍內，並在內容變得太長而無法容納視圖時觸發滾動條。

.top,.bottom {
    overflow: auto;
}

Answer 5

Remove height then height will adjust according to text

https://jsfiddle.net/8tvn0kw6/4/

Answer 6

您的html和css很好，這里有兩個選項可以解決您面臨的問題：

• 使用overflow: hidden -這樣內容不會重疊，因為在父邊界之外繪制的內容將被隱藏
• 使用min-height: 200px這樣，您可以定義頂部元素必須始終具有的最小高度，並且底部元素將被移動

這是jsFiddle