2016-08-22 196 views
0

我有兩個並排兩個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>

回答

1

可以使用table顯示用於此目的。

將您的container包裝成wrapper格,並更改了您的容器的absolute顯示。

看看這個,讓我知道您的反饋。謝謝!

body { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    background: orange; 
 
    color: #000000; 
 
} 
 
.wrapper { 
 
    display: table; 
 
    width: 600px; 
 
    position: absolute; 
 
    height: 100%; 
 
} 
 
#container1 { 
 
    background: #FFFFFF; 
 
    display: table-cell; 
 
    width: 50%; 
 
} 
 
#container2 { 
 
    background: #00FF00; 
 
    display: table-cell; 
 
    width: 50%; 
 
}
<div class="wrapper"> 
 
    <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> 
 
</div>

替代的解決方案:作爲@Frits在這裏回答,你也可以做到這一點很容易地使用flexbox,但它不能在較早的瀏覽器支持。

body { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    background: orange; 
 
    color: #000000; 
 
} 
 
.wrapper { 
 
    width: 600px; 
 
    display: flex; 
 
    position: absolute; 
 
    height: 100%; 
 
} 
 
#container1 { 
 
    background: #FFFFFF; 
 
    width: 50%; 
 
} 
 
#container2 { 
 
    background: #00FF00; 
 
    width: 50%; 
 
}
<div class="wrapper"> 
 
    <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> 
 
</div>

+0

我不介意你抓住我的答​​案並將其添加爲額外的分辨率。事實上,我認爲這很棒,讓我們把所有的雞蛋放在一個籃子裏:)我甚至會爲你的答案提高你的答案!但公平是公平的,如果你在同一個線索中添加別人的回答,至少你可以在你的編輯中提及他們。 – Frits

+0

@Frits對不起,錯過了男人!現在已經完成了:) – kukkuz

+0

謝謝!我會爲此+1 :) – Frits

1

實際上,你可以做到這一點,通過刪除position:absolute;和使用display:flex;用包裝元素極大地簡化你的CSS。

See this fiddle here

所有我在這種情況下做的是去除絕對定位,增加了一個包裹元素兩個div周圍,並添加display:flex;規則。

下面的代碼

body { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    background: orange; 
 
    color: #000000 
 
} 
 
#container1 { 
 
    background: #FFFFFF; 
 
} 
 
#container2 { 
 
    background: #00FF00; 
 
} 
 
#wrapper { 
 
    display:flex; 
 
}
<div id="wrapper"> 
 
    <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> 
 
</div>

0

我找到了一個解決方案: - 包裝需求高度:100%和立場:絕對

<!DOCTYPE html> 
<head> 

<style> 
body {width: 100%; height: 100%; margin: 0; padding: 0; background: orange; color: #000000;} 
#wrapper {position: relative; height: 100%; display: table; width: auto;} 
#container1 {background: #FFFFFF; display: table-cell; width: 300px;} 
#container2 {background: #00FF00; display: table-cell; width: 300px;} 
</style> 

</head> 

<body> 
<div id="wrapper"> 
<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> 
</div> 
</body> 
</html> 
+0

這是一個解決方案 - 但不是我需要的解決方案。我需要兩個獨立的div。我嘗試了兩個包裝器,每個包裝器都有一個混合器 - 它不起作用。 – wolfmuc