幅と高さの流体設計

Question

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; 
    } 

Answer 1

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

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

タイプの事や

あなたはまた、あなたが必要なものを検出するために、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"); } } 

この例では、最小幅プロパティがあります。これは、それ以下ではスクロールバーがあることを意味します。スクロールバーを使用したくない場合は、レイアウト要素に静的な値を設定することはできません。そのため、ブラウザのウィンドウサイズに柔軟になる可能性があります。

Answer 2

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