0

このレイアウトを正しく作成する方法がわかりません。

_________________________________________
| #Header div                            |
| position:fixed; width:100%;            |
|________________________________________|
|#bgleft      | #main        |#bgright   |
|min-width:0; |width:1000px; |min-width:0|
|max-width:460|              |max-w:460  |
|scroll:fixed |              |           |
|_____________|______________|___________|
|footer div, position:fixed; bottom:0;   |
|________________________________________|

基本的に、＃bgleftと#bgrightは不要で、ドキュメントの幅にカウントされないようにしたいので、ビューポートが1000px以下の場合は、＃maindivのみが表示されます。ただし、ウィンドウが大きい場合、たとえば1200pxの場合、メインdivに1000pxとbgleftおよびbgrightdivのそれぞれ100pxが表示されます。それが理にかなっていることを願って、あなたの入力に感謝します！

編集：#bgleftと#bgrightの画像をscroll：fixedのように動作させて、これらの画像が常にヘッダーとフッターのdivに「接続」されたままになるようにすることを忘れました。私は基本的に#maindivの周りに小さな「ウィンドウ」を作成しようとしていますが、ウィンドウが表示されるのに十分な大きさでない限り、bgleftとbgrightは必要ありません。

デモ： http： //jsfiddle.net/7Y7TJ/13/（これは私が手に入れることができたクローゼットですが、問題は#mainコンテンツが下にスクロールするときに#bgleft divが固定位置にないことです）

4

2 に答える 2

1

私があなたが求めていると思うことに基づいて、JSに頼る必要なしにCSSでこれを行うことができない理由がわかりません。

スタイルシートでさまざまな「@mediascreen」タグを使用して、ブラウザのサイズに応じてページにさまざまなスタイルを使用させることができます。

例えば：

@media screen and (max-width: 1199px) { CSS GOES HERE }

上記は、ビューポートのサイズが最大1199px幅の場合に、定義したスタイルを表示します。

@media screen and (min-width: 1200px) { CSS GOES HERE }

上記は、幅1200pxを超えるブラウザウィンドウに別のスタイルを表示します。

max-widthとmin-widthを組み合わせて、次のような範囲間のスタイルを表示することもできます。

@media screen and (min-width: 1000px) and (max-width: 1200px) { CSS GOES HERE }

ビューポートが1000pxから1200pxの間にある場合、特定のスタイルが表示されます。

あなたがやりたいことはすべて、そのような設定の中でできると確信しています。私の知る限り、余計なJSやJQに行き詰まるリスクはありますが、やや余計なようです。

于 2012-06-17T15:55:47.483 に答える
0

これが私がやろうとしていることに対して私が見つけた最良の解決策です：

#mainの周りに#wrapperdivを配置し、＃wrapperに次のcssを使用します。

background-image: url(bgtest.png);
background-repeat: no-repeat;
background-position: center 0;
background-attachment: fixed;
于 2012-06-17T17:30:51.257 に答える