<div class="page-wrap"><section class="main-content"><h1>Main Content</h1><p><strong>I'm first in the source order.</strong></p><p>The key to victory is discipline, and that means a well made bed. You will practice until you can make yourbed in your sleep. Fry, we have a crate to deliver. Hey, guess what you're accessories to.</p><p>I'll get my kit! That's not soon enough! Oh, all right, I am. But if anything happens to me, tell them I diedrobbing some old man.</p></section><nav class="main-nav"><h2>Nav</h2><ul><li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Clients</a></li><li><a href="#">Contact Us</a></li></ul></nav><aside class="main-sidebar"><h2>Sidebar</h2><p>I am a rather effortless column of equal height.</p></aside>
</div> body {padding: 2em;
}* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
}h1, h2 {font: bold 2em Sans-serif;margin: 0 0 1em 0;
}h2 {font-size: 1.5em;
}p {margin: 0 0 1em 0;
}.page-wrap {display: flex;display: -webkit-flex;display: -webkit-box;display: -moz-box;display: -ms-flexbox;
}.main-content,
.main-sidebar,
.main-nav {padding: 1em;
}.main-content {-webkit-box-ordinal-group: 2;-moz-box-ordinal-group: 2;-ms-flex-order: 2;order: 2;width: 60%;-moz-box-flex: 1;background: white;
}.main-nav {-webkit-box-ordinal-group: 1;-moz-box-ordinal-group: 1;-ms-flex-order: 1;order: 1;-webkit-box-flex: 1;-moz-box-flex: 1;width: 20%;-webkit-flex: 1;-ms-flex: 1;flex: 1;background: #ccc;
}.main-sidebar {-webkit-box-ordinal-group: 3;-moz-box-ordinal-group: 3;-ms-flex-order: 3;order: 3;-webkit-box-flex: 1;-moz-box-flex: 1;width: 20%;-ms-flex: 1;-webkit-flex: 1;flex: 1;background: #ccc;
}
粘連 Footer 置于底部-方法一
HTML<div class="content"><h1>在 wrapper 上用負的 margin-bottom</h1><p><button id="add">Add Content</button></p><div class="push"></div>
</div>
<footer class="footer">Footer
</footer> CSShtml, body {height: 100%;margin: 0;
}.content {min-height: 100%;padding: 20px;margin: 0 auto -50px;
}.footer,
.push {height: 50px;padding: 20px;
} JS$("#add").on("click", function () {$("<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>").insertBefore(".push");
});
粘連 Footer 置于底部-方法二
HTML<div class="content"><div class="content-inside"><h1>在 footer 上用負的 margin-top</h1><p><button id="add">Add Content</button></p></div>
</div><footer class="footer">Footer
</footer> CSShtml, body {height: 100%;margin: 0;
}.content {min-height: 100%;
}.content-inside {padding: 20px;padding-bottom: 50px;
}.footer {height: 50px;margin-top: -50px;
} JS$("#add").on("click", function () {$("<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>").appendTo(".content-inside");
});
超強干貨來襲 云風專訪：近40年碼齡，通宵達旦的技術人生
