0

http://www.juliabailey.com/

このウェブサイトは流動的なデザインで、非常にうまく機能しています。

http://goo.gl/j6snn

これは私のウェブサイトです。フルビューは幅によって異なります。したがって、ブラウザを大きくすると、高さだけでなく幅も大きくなります。しかし、問題は高さが大きすぎて、私が望まないスクロールバーを作成していることです。ページに表示するスクロールバーがわかりません。ブラウザが 800x600 であろうと 1600x1200 であろうと、常にブラウザに収まるように、高さに応じて流動的に表示するのが最善の方法だと思います。どうすればできますか？

これが私のラッパーコードです。

#wrapper {
    width:auto;
    height:auto;
    width:80%;
    min-width:550px;
    max-width:1150px;
    margin:50px auto 0 auto;
    z-index:100;
    }
4

2 に答える 2

0

とを使用min-heightしmax-heightて、ブラウザーがそれらに到達したときにズームを停止します。サンプルのスクロールバーは、「空」であっても常に表示されるため、サイズ変更時にジャンプしません。

于 2012-05-11T03:07:40.470 に答える
0

クラスのプロパティにパーセンテージを使用します。例えば：

wrapper {
width: 92%;
}
content {
width: 73%;
}
sidebar {
width: 25%
}

ものを入力 OR

また、javascript を使用して必要なものを検出し、実装を動的に変更することもできます。このような

    function dynamicLayout(){ var browserWidth = getBrowserWidth();  
    // Narrow CSS rules 
if (browserWidth < 640){ changeLayout("narrow"); } 
    // Normal (default) CSS rules 
if ((browserWidth >= 640) && (browserWidth <= 960)){ changeLayout("default"); } 

    // Wide CSS rules 
if (browserWidth > 960){ changeLayout("wide"); } }

あなたの例では、最小幅のプロパティがあります。これは、それが小さい場合、スクロールバーが表示されることを意味します。スクロール バーが必要ない場合は、レイアウト要素に静的な値を設定できないため、ブラウザ ウィンドウのサイズに合わせて調整できます。

于 2012-05-11T01:48:57.490 に答える