我有兩個並排兩個cloumns,兩個高度爲100%的div的佈局。內容不同。Html - 並排兩個垂直div 100%高度滾動背景不完全顯示
示例:屏幕高度低於較長的列。當向下滾動時,下層的背景沒有完全展現出來 - 要縮短。
如何在滾動時在較長的長度中獲得兩個相等的列?
這是代碼:
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: orange;
color: #000000
}
#container1 {
width: 300px;
background: #FFFFFF;
position: absolute;
min-height: 100%;
top: 0
}
#container2 {
width: 300px;
background: #00FF00;
position: absolute;
min-height: 100%;
top: 0;
left: 300px
}
<div id="container1">
<br>Content 1
<br>
<br>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos
et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua.
<br>
<br>
</div>
<div id="container2">
<br>Content 2
<br>
<br>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
<br>
<br>
</div>
我不介意你抓住我的答案並將其添加爲額外的分辨率。事實上,我認爲這很棒,讓我們把所有的雞蛋放在一個籃子裏:)我甚至會爲你的答案提高你的答案!但公平是公平的,如果你在同一個線索中添加別人的回答,至少你可以在你的編輯中提及他們。 – Frits
@Frits對不起,錯過了男人!現在已經完成了:) – kukkuz
謝謝!我會爲此+1 :) – Frits