CSS - 水平拆分頁面，兩部分沒有重疊

我想分兩部分分割我的html頁面（60％上半部分，下半部分40％）但是，令我驚訝的是，我很難做到這一點而不會在瀏覽器窗口調整大小時使內容重疊。我試着彎曲，絕對定位，百分比...CSS - 水平拆分頁面，兩部分沒有重疊

我所擁有的就是這個

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; 
}

這種運作良好。

然而，當頁面大小時，頂部一部分重疊的底部。

我怎樣才能使它所以兩半都知道內容的高度，不得重複？我不想以像素爲單位設置高度。我打開的JavaScript只有在有絕對的CSS沒有辦法只有

FIDDLE

來源

2016-08-02 hyperexpert

你希望它的行爲..他們應該滾動而不是https://jsfiddle.net/8tvn0kw6/3/ –

不！我不想單個滾動條 – hyperexpert

使用min-height，以避免重疊

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

來源

2016-08-02 06:17:17

就是這樣:)我不相信我沒有嘗試最小高度。這完全符合我的需要！謝謝你 – hyperexpert

:)其一切都爲你的工作最好.. –

，如果你減少空間的內容需要去的地方。你有2個選項： 1.隱藏內容（溢出：隱藏） 2.顯示滾動條（溢出：滾動）我認爲最好的方法是將一個垂直滾動條放在overflow-y:auto的正文上，這樣當你調整頁面大小時，滾動條自動出現。

來源

2016-08-02 06:03:21

這麼快。。。：D – Cyval

@Cyval哈哈謝謝。 –

我知道內容需要去某個地方。我不想讓div重疊。我希望這樣，當兩個div沒有更多的空間來停止調整大小，只顯示一個body滾動條。 – hyperexpert

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

這裏是Demo

來源

2016-08-02 06:05:04

當我在Full Page中打開示例並調整窗口的大小時，它會創建一個滾動條，但無法顯示頂部文本。調整窗口大小將頂部文本向上推，當您滾動到頂部時，仍然不可見。 – kamoroso94

同樣在這裏。當我嘗試使用Flex時，我遇到了同樣的問題。它會忽略頂部的內容並隱藏它。然而，底部div似乎表現良好。我只是希望頂部div做相同的 – hyperexpert

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

來源

2016-08-02 06:07:15 kamoroso94

但是，這會給我兩個單獨的滾動條。我不想那樣！我想要它，所以當頁面調整大小時，div不應該重疊，只需要獲得主體滾動條。 – hyperexpert

如果你想這樣做，你應該使用'overflow：hidden'來代替，但是隱藏的內容永遠不會被看到。主體滾動條不會幫助你，因爲這兩個'div'是全視圖。你需要自己的'div'滾動條。 – kamoroso94