高度取决于屏幕尺寸

我正在使用HTML5/CSS3，我想要做的是创建一个滚动页面，如果需要或全部在屏幕的一部分，如果有较少的数据。目前我还没有使用包装由于谷歌搜索，我被告知，你可以使用身体 - >工作正常。正如你在我的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 </SCRIPT>

<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或asides等作为实际表格单元格。

  <!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％的高度 - > http://cl.ly/3L3X431v3S1f2e2L0624它应该停止时，需要让页脚接管 –

已给您的HTML –

关键是他包装显示：表;然后设置你的表格单元;这是CSS3不确定向后兼容性。这里是一个引用的链接[SO Post]（http://stackoverflow.com/questions/4874847/does-css3-offer-a-better-way-to-have-a-two-column-website-with-header -and英尺） – CBRRacer

高度取决于屏幕尺寸

回答

相关问题