永遠在Web Design的網頁佈局代碼
看這個網頁設計的底部,為什麼會跑到那兒去呢?即使內容很少的情況下,它也始終在網站設計頁面的底部佈局。否則網頁寄存頁面底部將留下大量空白。下面是它實現的代碼:<div id="wrap"> <div id="main"> <div id="content"> </div> <div id="side"> </div> </div></div><div id="footer"></div>html, body, #wrap {height: 100%;}body > #wrap {height: auto; min-height: 100%;}#main {padding-bottom: 150px;} /* 必須使用和footer相同的高度 */#footer {position: relative; margin-top: -150px; /* footer高度的負值 */ height: 150px; clear:both;}兼容性Hack:.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}.clearfix {display: inline-block;}/* Hides from IE-mac \*/* html .clearfix { height: 1%;}.clearfix {display: block;}/* End hide from IE-mac */
