2011-12-10 8 views
2

私は、特定の高さのナビゲーションバーで始まり、その下に高さの残りの部分を記入するコードを配置したページがあります。どのように私は様々な決議のためにそれをコード化できますか?私はブラウザの "作業領域"のサイズが必要です。PHPでブラウザウィンドウのサイズ/解像度を取得する

+5

をウィンドウサイズは、純粋なPHPでは不可能である見つけます。これはJavascriptを必要とします。そのための多くの結果はGoogleから離れたものです: 'javascript window size'。しかし、タイトルで言及しているのは、CSSを@FakeRainBrigandとして使用することです。 –

+3

これはCSSで行うことができます(正しく理解している場合)。 – FakeRainBrigand

答えて

2

PHPでは実行できません。可能であれば、this CSSははるかに良い解決策です。

存在すると、最も厄介なCSSの問題が発生しました。人々はそれを求めているのと同じくらい多くの答えがあるようです。上記のリンクは、私がこの問題のために見つけた最も優れた、クロスブラウザ対応のソリューションです。

フッターの部分があなたを混乱させないようにしてください。フッターが必要ない場合でも、それは完全に機能します。

+0

本当に素晴らしい記事とデモ! +1 –

1

絶対配置を使用してください。

.nav { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    height: 100px; 
} 
.content { 
    position: absolute; 
    top: 100px; 
    left: 0; 
    right: 0; 
    bottom: 0; 
} 
+0

それはうまくいかないでしょう。折りたたみ後のアンティングはまだ 'body'カラーです:http://jsfiddle.net/FeP3b/ –

+0

@myhead - 折り目を越えて伸びる背景色やコンテンツについて誰が言ったのですか?私のコードでは、固定幅のヘッダーに続いてブラウザウィンドウ内の残りのスペースを要素が満たすようになります。元のポスターの必要条件についてあまりにも多くのことを想定しているかもしれません。 – gilly3

+1

あなたは正しい - それは前提でしたが、私はそれが公正なものであると信じています。背景色や境界線を適用しない場合は、要素を残りの領域に塗りつぶすにはどのような理由がありますか? –

1

ここで私はそれをしました。 index.phpをこの簡単なツールに置き換え、index.php index2.phpという名前を変更しました。純粋なjavascriptを使ってこれらのものをチェックし、実際のインデックスファイルに$ _GET変数として渡します。それより簡単なことは何ですか?すべて完了!私に5分かかった、あなたに30秒かかります:)

<html> 
<head> 
    <script type="text/javascript"> 

     if(window.innerHeight > window.innerWidth){ 
      var landscapeOrPortrait = 'portrait'; 
     } else { 
      var landscapeOrPortrait = 'landscape'; 
     } 

     var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; 

     var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; 



     window.location.replace('index2.php?width='+width+'&height='+height+'&landscapeOrPortrait='+landscapeOrPortrait);    
    </script>    
</head> 

0

$window_width = "<script type='text/javascript'>document.write(window.innerWidth);</script>";

+0

ありがとう、これは私のために働いた.. –

関連する問題