0

横スクロールのあるページを作りたい。ビューウィンドウを1つのdivで埋めたい。

幅を100％に設定して、どのサイズの画面でもウィンドウ全体に表示されるようにしましたが、次のdivをその横にフロートさせることはできません。

これを行う方法や、画面のサイズに基づいて幅を設定する方法を知っている人はいますか。

私は少しのjavascriptでphpとcodeigniterを使用しています。

4

3 に答える 3

2

100 % Div をラッパーとして使用し、その中にいくつかの div を使用してデザインを実現します。フロートしてフロートを適用する必要がある2番目のdivの幅を指定する必要があると思います。これが役立つことを願っています

于 2012-07-03T04:41:42.430 に答える
1

これはhttp://jsbin.com/upoqec/2/edit#preview のことですか?

HTML:

<body onload="resize()">
<div class="view" id="view">
</div>
<div class="follow">
    </div>
</body>

CSS:

body{overflow:auto; width:100%: height:100%;}
.view{width:100%; height:400px; float:left; border:2px solid black;}
.follow{position:absolute; left:100%; width:900px; height:400px; border:2px solid red; margin-left:20px;}​

Javascript:

function resize(){
  var winW = 630, winH = 460;
if (document.body && document.body.offsetWidth) {
 winW = document.body.offsetWidth;
 winH = document.body.offsetHeight;
}
if (document.compatMode=='CSS1Compat' &&
    document.documentElement &&
    document.documentElement.offsetWidth ) {
 winW = document.documentElement.offsetWidth;
 winH = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
 winW = window.innerWidth;
 winH = window.innerHeight;
} 
document.getElementById("follow").style.width=winW.toString()+"px";
 document.getElementById("follow").style.height=winH.toString()+"px";
}

</p>

于 2012-07-03T04:43:51.663 に答える
0

別の同様の質問への返信として投稿したこの回答を確認してください。

https://stackoverflow.com/a/11293897/921204

必要な変更は次のとおりです。

a) 「左」の div は必要ありません。だからそれを削除します。

overflow-x: hidden;b)水平スクロールが必要なため、body には指定しないでください。

また、必要に応じて中央の div の寸法を変更します。あなたの場合、100%幅に設定します

于 2012-07-03T04:42:11.080 に答える