2009-06-09 2 views
0

フルスクリーンレイアウトの世界に問題があります。テーブルまたはCSSベースのソリューションのいずれかが評価されます。フルスクリーンレイアウト

目標は「nav」を幅で固定し、「top」を高さで固定し、理想的にはjavascriptなしで、表示画面に拡大することです。以下のコードは、「コンテンツ」がいっぱいになるまで動作します。それが起こるとき、スクロールする必要があります。ただし、tdのオーバーフローは機能しません。また、オーバーフローでdivの周りにそれをラッピングしません。私はこれがコンテンツdivに合わせてテーブルを自動拡張することと関係があると思います。しかし、コンテンツdivは画面に伸びる必要があるため、固定された高さを持つことはできません。

<table style="width: 100%; background: blue; height: 100%"> 
     <tr> 
      <td id="nav" style="width: 200px; background: yellow"></td> 

      <td style="background: green"> 
       <table style="width: 100%; height: 100%; background: purple"> 
        <tr> 
         <td id="top" style="height: 200px; background: orange"></td> 
        </tr> 
        <tr> 
         <td id="content" style="background: gray; overflow-y: auto"> 
         </td> 
        </tr> 
       </table> 
      </td> 
     </tr> 

    </table> 

答えて

0

私はthis css layoutは、部分的に「スティッキーフッターは」それはシンプルで、最高のレイアウトとなっており、簡単にコンテンツに基づいて伸縮します吹き替えことがわかりました。

0

ええ、特にFirefoxでこの問題が発生しました。 Safariはこれをかなりうまくやっています(最小高さを含む)が、他のすべてのブラウザではできません。

私ができることは、指定されたpxの高さのonloadを強制し、ええ、Javascriptを使ってリフレッシュすることです。それなしでそれをクロスプラットフォームでやるのは難しいです。

0

あなたは本当にテーブルを使ってレイアウトしようとすべきではありません。ここで

ノーテーブルと100%の高さを得るために、手早くいくつかのコードは次のとおりです。

<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/reset/reset-min.css"> 
    <style type="text/css"> 
     #wrapper { 
      height: 100%; 
      width: 100%; 
     } 
     #column1 { 
      position: absolute; 
      top: 0; 
      left: 0; 
      width: 200px; 
      height: 100%; 
      overflow: hidden; 
     } 
     #column2 { 
      position: absolute; 
      top: 0; 
      left: 200px; 
      height: 100%; 
      overflow: hidden; 
     } 
     #row1 { 
      height: 200px; 
      overflow: hidden; 
     } 
     #row2 { 
      overflow: hidden; 
     } 
    </style> 
</head> 
<body> 
    <div id="wrapper"> 
     <div id="column1" style="background-color: yellow;"> 
      bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah 
      bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br> 
      bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br> 
      bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br> 
      bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br> 
      bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br> 
      bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br> 
      bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br> 
     </div> 
     <div id="column2"> 
      <div id="row1" style="background-color: orange;"> 
       bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah 
       bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br> 
       bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br> 
       bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br> 
       bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br> 
       bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br> 
       bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br> 
       bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br> 
      </div> 
      <div id="row2" style="background-color: grey;"> 
       bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah 
       bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br> 
       bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br> 
       bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br> 
       bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br> 
       bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br> 
       bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br> 
       bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br> 
      </div> 
     </div> 
    </div> 
</body> 
</html>