dom/css：コンテナに複数の100％コンテナをコンテナに入れてビューポート（100％）より大きくする

基本的なDOMレイアウトを調べて、コンテナを2つ入れて、width:100%; height:100%;を一列に並べるようにしました。それらの間のユーザーのスクロール：dom/css：コンテナに複数の100％コンテナをコンテナに入れてビューポート（100％）より大きくする

example

だから私はwidth:100%; height:100%; overflow:scroll;に設定されているフレームと例えばwidth:20000px; height:100%;で囲ったコンテナを持っています。ここでは、青いコンテナの広大な風景をスクロールして、通常は要素が絶対的に配置され、スクロールすることができます。ここまでは順調ですね。ここには、内容が重複しているため、width:100%; height:100%;が必要ないくつかのページがあります。

私の問題は、あなたがすべてある行に複数のコンテナを表示する方法を...それは明らかに100％であると私はwidth:100%;に設定したときに浮かべコンテナページが全体20000pxの上にまたがることになりました

ですJSハックなしでブラウザのビューポートと同じくらい広くても高くてもかまいません。

出典

2012-04-03 Dominik

技術的には、3ページあれば、4ページある場合は25%などのように、複数のブラウザーとウィンドウサイズできれいに見えるようにするには、少しだけ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

<!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

IEを含むIEは表示をサポートしていません：table – ichao

dom/css：コンテナに複数の100％コンテナをコンテナに入れてビューポート（100％）より大きくする

答えて

関連する問題