dom/css：將多個100％的容器放入一個大於視口的容器中（100％）

我正在研究一個基本的DOM佈局，可以讓我將一組容器設置爲width:100%; height:100%;，因此我可以讓他們之間的用戶滾動：dom/css：將多個100％的容器放入一個大於視口的容器中（100％）

example

所以我有一個設置爲width:100%; height:100%; overflow:scroll;一幀和圍封容器是如width:20000px; height:100%;。現在我可以瀏覽藍色容器的廣闊風景，我通常會將元素絕對定位在其中，並可以滾動到。到現在爲止還挺好。現在我有幾個頁面需要width:100%; height:100%;，因爲它內容重疊。

我現在的問題是，當我將它設置爲width:100%;浮動容器頁面將跨越整個20000px因爲這是100％，明顯...

你會如何在一個行中所有顯示多個容器如瀏覽器的視口可能沒有任何JS黑客...

來源

2012-04-03 Dominik

從技術上講，你可以使用分數的網頁，如width:33%;如果有3頁，25%如果有4頁，等等。爲了讓它在多個瀏覽器和窗口大小之間看起來很乾淨，一個小小的jQuery是處理它的唯一正確方法：

$(function(){ 
    $('#first_page,#second_page,#third_page').css('width',$(window).width()); 
});

jQuery width() documentation

來源

2012-04-03 11:03:26 faino

我真的很希望有一個沒有JS的解決方案...但是，我很害怕jQuery將成爲這裏的解決方案 – Dominik 2012-04-03 11:12:51

<!DOCTYPE html> 

<html> 
<head> 
<style> 
* {margin:0; padding:0;} 

html, body {height: 100%; } 

#frame {height: 100%; width: 100%; background: gray;} 

#container {height: 100%; width: 300%; display: table;} 

.page {display: table-cell; outline: 2px solid red; outline-offset: -2px;} 

</style> 
</head> 
<body> 
<div id=frame> 
    <div id=container> 
    <div class=page> 
page1 
    </div> 
    <div class=page> 
page2 
    </div> 
    <div class=page> 
page3 
    </div> 
    </div> 
</div> 
</body> 
</html>

你正在尋找不完全是對的，但也許一個起點，最新的瀏覽器。請注意，表可能會溢出其容器而不會影響其寬度（灰色），導致html/body上的滾動條。表格單元平均分配寬度。但是你需要知道頁面的數量。

來源

2012-04-03 12:30:04 ichao

什麼瀏覽器不支持？在我看來'display：table'就是我一直在尋找 – Dominik 2012-04-05 13:21:14

IE至多包括7個不支持display：table – ichao 2012-04-06 15:31:06

dom/css：將多個100％的容器放入一個大於視口的容器中（100％）

回答

相關問題