この表スタイルのレイアウトのCSSまたはjQuery

ここでは、自分のページをレイアウトするためのコードを示します。問題は、これはすべて静的に定義されていることです。私が望むのは、これを動的にすることです。つまり、閲覧に使用するブラウザのサイズに基づいてサイズを変更します。私はdivのすべてが特定のページ・ディメンションのサイズに固定できると確信しています。メニューとコンテンツペインは、フィットするように調整されたdivでなければなりません。コンテンツdivは必要に応じてスクロール可能です。この表スタイルのレイアウトのCSSまたはjQuery

CSSでこれを行うことができますか、またはjQueryを必要とすることができますか？それとももっと良い方法がありますか？

おかげで、エリック

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <style> 
     html, body 
     { 
      margin: 0; 
      padding: 0; 
     } 

     #container 
     { 
     } 

     #toolbar 
     { 
      background-color: Gray; 
      width: 100%; 
     } 

     #PageDescription 
     { 
      position: absolute; 
      background-color: Purple; 
      width: 100%; 
      text-align: center; 
     } 
     #RestOfPage 
     { 
      position: absolute;  
      background-color: White; 
      top: 82px; 
      height: 905px; 
      width: 1800px; 
     } 
     #Footer 
     { 
      position: absolute; 
      top: 987px; 
      left: 0; 
      background-color: Yellow; 
      width: 100%; 
      height: 30px; 
     } 
     #LeftPane 
     { 
      position: inherit; 
      width: 120px; 
      background-color: Lime; 
      height: 100%; 
     } 
     #RightPane 
     { 
      position: inherit; 
      width: 100%; 
      background-color: Silver; 
      left: 120px;   
      height: 100%; 
     } 
    </style> 
</head> 
<body> 
     <div id="toolbar"> 
      <label for="Category">Category: </label><select id="Category"></select> 
     </div> 
     <div id="Footer"></div> 
     <div id="PageDescription"> 
      <h1>Page Description</h1> 
     </div> 
     <div id="RestOfPage"> 
      <div id="LeftPane">Menu</div> 
      <div id="RightPane">Content Content Content</div> 
     </div> 
</body> 
</html>

出典

2011-07-28 Eric Gurney

[http://jsfiddle.net/QwAGV/](http://jsfiddle.net/QwAGV/）で再生します。 – Andrew

あなたは（ほとんどの）すべての（子の）子要素を絶対的にpositonningしていますが、これは悪い悪いことです:(今、あなたの ''要素は '＃toolbar'要素のみを含んでいます。 – Kraz

あなたはあまりにも#RestOfPageとパーセントベースの幅と高さを使用することができます。パーセントベースのレイアウトに加えて最小高さ/最大高さを使用してください。それは事が予期せず再配置されるのを止めるでしょう。

出典

2011-07-28 14:41:18

RightPaneのサイズを固定するには、LeftPaneが本当に必要になります。すべての絶対的なものが悪いと理解していますが、ページの内容を取得しようとしていました。私は浮動小数点を使って多くの試みを行いましたが、相対的な位置付けはありましたが、常に突っ込んでしまいました。 –

相対位置、浮動小数点、クリア、パーセンテージを使用してテンプレートをやり直します。このCSSで

#LeftPane { 
    position: relative; 
    float: left; 
    width: 13%; 
    background-color: Lime; 
    /* You should avoid using named colors, try 
    * #98ED00 or another hex value*/ 
    height: 100%; 
} 
#RightPane { 
    position: relative; 
    float: left; 
    margin-left: 2%; 
    width: 85%; 
    background-color: Silver; 
    height: 100%; 
}

、ページがうまくスケールし直す必要があります。理想的には、これはあなたのコードスニペットのそれぞれが借りて編集したコードを使用して、持っているべきものです。今後の参考として、absoluteは避けてください。柔軟性がなく、動きにくく、すべての要素は、明示的にそうしない限り、スタイルされた要素の上または下にコンテンツを配置します。一言で言えば、それはあなたのコンピュータでうまく見えるだけです。

また、このソリューションはCSSで完全に実装できます。 jQueryは必要ありません。

W3Cスクールのおかげで、今後参考になるリンクがいくつかあります。

CSS Positioning、CSS Floating、CSS Box Model

出典

2011-07-28 18:46:21 Edwin

'absolute'は' relative'測位の要素内の要素で大丈夫です。 –

ああ、そうですね。私はそれを忘れていました。指摘してくれてありがとうございました – Edwin

それ以外は絶対に避けてください。コンテナ。 –

この表スタイルのレイアウトのCSSまたはjQuery

答えて

関連する問題