高さは画面サイズに依存

私はHTML5/CSS3を使用していますが、必要な場合はスクロールするページを作成したり、データが少ない場合は画面の1つのセクションにすべて作成します。私はグーグルのためにラッパーを使用していない瞬間、私はあなたが身体を使うことができると言われました - >うまく動作します。私のCSSで見たように私はhtml,bodyを100%に設定して、コードを見るとそれがスクロールします。高さは画面サイズに依存

どのようにしてこの画面サイズを変更できますか？

html,body{ 
    margin:0 auto; 
    width:960px; 
    height:100%; 
} 
header{ 
    width:100%; 
    border-bottom:1px solid red; 
} 
header #logo{ 
} 
header nav{ 
    float:left; 
    border:1px solid red; 
    width:100%; 
    margin:0 0 5px 0; 
} 
header nav ul li{ 
    float:right; 
    height:40px; 
    margin:0 0 0 15px; 
    list-style-type: none; 
} 
header ul li a{ 
    color:#000; 
    font-size:14px; 
    text-decoration: none; 
} 

#content{ 
    float:left; 
    width:700px; 
    min-height:100%; 
    border:1px solid red; 
} 

#sidebar{ 
    float:right; 
    width:250px; 
    min-height:100%; 
    border:1px solid green; 
} 

footer{ 
    clear: both; 
    width:100%; 
    height:40px; 
}

テンプレートのレイアウト2011 < /スクリプト>

<div id="logo"> 
     <h1>Template Logo 2011</h1> 
    </div><!--logo end --> 
     <nav> 
      <ul> 
       <li><a href="#">Page One</a></li> 
       <li><a href="#">Page Two</a></li> 
       <li><a href="#">Page Three</a></li> 
       <li><a href="#">Page Four</a></li> 
       <li><a href="#">Page Five</a></li> 
       </ul> 
      </nav> 
    </header> 
    <section id="content"> 
     <h1>Content Introduction</h1> 
     <p>Content</p> 
    </section> 
    <aside id="sidebar"> 
     <article id="box_one"> 
      <h2>Box One</h2> 
      <p>Box Content</p> 
     </article> 

     <article id="box_two"> 
      <h2>Box Two</h2> 
      <p>Box Content</p> 
     </article> 

     <article id="box_three"> 
      <h2>Box One</h2> 
      <p>Box Content</p> 
     </article> 
     </aside> 
    <footer> 
     <p>Footer content</p> 
    </footer>

出典

2011-09-16 Jess McKenzie

ここで達成しようとしていることについてはっきりしていません。 –

通常、htmlはスタイルを取得せず、bodyタグは高さの値を取得しません。 – Mohsen

なぜ高さを100％に設定したのですか？ – Marlin

これはCSS3のためです。メインキーはdisplay：tableです。表示：テーブルセル;一緒に使用すると、divやasideなどが実際の表のセルではなく、探している高さが一致します。

  <!Doctype HTML> 
      <html> 
      <Head> 
      <style type="text/css"> 
      html,body{ 
       margin:0 auto; 
       width:960px; 
      } 
      header{ 
       width:100%; 
       border-bottom:1px solid red; 
      } 
      header #logo{ 
      } 
      header nav{ 
       float:left; 
       border:1px solid red; 
       width:100%; 
       margin:0 0 5px 0; 
      } 
      header nav ul li{ 
       float:right; 
       height:40px; 
       margin:0 0 0 15px; 
       list-style-type: none; 
      } 
      header ul li a{ 
       color:#000; 
       font-size:14px; 
       text-decoration: none; 
      } 

      #wrapper{ 
       display: table; 
       width: 960px; 
       border: 1px solid blue; 
      } 

      #content{ 
       display: table-cell; 
       width:700px; 
       border:1px solid red; 
       min-height: 250px; 
      } 

      #sidebar{ 
       display: table-cell; 
       width:250px; 
       border:1px solid green; 
      } 

      footer{ 
       clear: both; 
       width:100%; 
       height:40px; 
      } 

      </style> 
      </head> 
      <body> 

       <div id="logo"> 
        <h1>Template Logo 2011</h1> 
       </div><!--logo end --> 
        <nav> 
         <ul> 
          <li><a href="#">Page One</a></li> 
          <li><a href="#">Page Two</a></li> 
          <li><a href="#">Page Three</a></li> 
          <li><a href="#">Page Four</a></li> 
          <li><a href="#">Page Five</a></li> 
          </ul> 
         </nav> 
       <div id="wrapper">  
       <div id="content"> 
        <h1>Content Introduction</h1> 
        <p>Content</p> 
       </div> 
       <div id="sidebar"> 
        <article id="box_one"> 
         <h2>Box One</h2> 
         <p>Box Content</p> 
        </article> 

        <article id="box_two"> 
         <h2>Box Two</h2> 
         <p>Box Content</p> 
        </article> 

        <article id="box_three"> 
         <h2>Box One</h2> 
         <p>Box Content</p> 
        </article> 
       </div> 
       </div> 
       <footer> 
        <p>Footer content</p> 
       </footer>  

      </body> 
      </html>

出典

2011-09-16 05:28:20 CBRRacer

それはスクロールと100％の高さを保証するための十分な内容ではないことをthoそこにある - > http：//cl.ly/3L3X431v3S1f2e2L0624それはフッターが引き継ぐ必要があるときに停止する必要があります –

あなたはhtmlを与えた –

キーは彼がラッパーディスプレイです：テーブル;あなたのテーブルセルを設定します。これはCSS3との下位互換性については不明です。ここにリファレンスへのリンク[SOの投稿]（http://stackoverflow.com/questions/4874847/does-css3-offer-a-better-way-to-have-a-two-column-website-with-header - と - フッター） – CBRRacer

高さは画面サイズに依存

答えて

関連する問題