效果如图，页面可以自适应browser大小，但aside大小不变
其中HTML5代码如下：
<!doctype html> <html lang="en"> <header> <meta charset="utf-8"/> <title>Html5 test website!</title> <link rel="stylesheet" href="main.css"> </header> <body> <div id="big_wrapper"> <header id="top_header"> <h1> Welcome to the new HTML5 web site!</h1> </header> <nav id="top_menu" > <ul> <li>Home</li> <li>Tutorials</li> <li>Podcast</li> </ul> </nav> <div id="new_div"> <!--for flexible --> <section id="main_section"> <article> <header> <hgroup> <h1>Title of Article 1!</h1> <h2>Subtitle for Article!</h2> </hgroup> </header> <p>This is the best article eva!</p> <footer> <p>-written by Joanna Qian-</p> </footer> </article> <article> <header> <hgroup> <h1>Title of Article 2!</h1> <h2>Subtitle for Article!</h2> </hgroup> </header> <p>This is the best article eva!</p> <footer> <p>-written by Joanna Qian-</p> </footer> </article> </section> <aside id="side_news"> <h4>News</h4> Bucky has a new dog! </aside> </div> <!--for flexible --> <footer id="the_footer"> Copyright thenewbostons 2012! </footer> </div> </body> </html>
css如下所示
*{ margin:0px; padding:0px;} header,section,footer,aside,nav,article,hgroup{display:block;} h1{ font: bolid 20px Tahoma;} h2{ font: bolid 14px Tahoma;} body{ width:100%; /*importance for flexible*/ display:-webkit-box; /*flexible box*/ -webkit-box-pack: center; -moz-box-pack: center; } #big_wrapper{ max-width:1000px; margin:20px 0px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-box-flex:1; /*1 flexible 0 fixed*/ } #top_header{ background:yellow; border:1px solid black; padding:20px; } #top_menu{ background:blue; color:white; border:red; } #top_menu li{ display:inline-block; list-style:none; padding:5px; font:bold 14px Tahoma; } #new_div{ display:-webkit-box; -webkit-box-orient:horizontal; } #main_section{ border:1px solid blue; -webkit-box-flex:1; /*1 flexible 0 fixed*/ margin:20px; padding:20px; } #side_news{ border:1px solid red; width:220px; /*fixed*/ margin:20px 0px; padding:30px; background:#66CCCC; } #the_footer{ text-align:center; /*no need to set clear*/ padding:20px; border-top:2px solid green; } article{ background:#FFFBCC; border: 1px solid red; padding:20px; margin-bottom:15px; } article footer{ text-align:right; }
缺点：只有chrome支持，firefox，ie不支持，正想办法解决中。。。