CSS Layout that uses 100% height
伙计们,我有一个正在使用的CSS布局,其左侧有一个页眉,页脚和侧边栏。效果很好,但是唯一的问题是,如果没有足够的内容来填充主要内容,我希望将侧边栏和页脚扩展到屏幕底部。如何在CSS中做到这一点?我已经在此处发布了CSS,因此您可以看到我正在使用的CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | <style type="text/css"> body { font: 100% Verdana, Arial, Helvetica, sans-serif; background: #666666; margin: 0; padding: 0; text-align: center; color: #000000; } .twoColHybLtHdr #container { width: 80%; background: #FFFFFF; margin: 0 auto; border: 1px solid #000000; text-align: left; } .twoColHybLtHdr #header { background: #DDDDDD; padding: 0 10px; } .twoColHybLtHdr #header h1 { margin: 0; padding: 10px 0; } .twoColHybLtHdr #sidebar1 { float: left; width: 8em; background: #EBEBEB; padding: 15px 0; } .twoColHybLtHdr #sidebar1 h3, .twoColHybLtHdr #sidebar1 p { margin-left: 10px; margin-right: 10px; } .twoColHybLtHdr #mainContent { margin: 0 20px 0 9em; } .twoColHybLtHdr #footer { padding: 0 10px; background: #DDDDDD; } .twoColHybLtHdr #footer p { margin: 0; padding: 10px 0; } .fltrt { float: right; margin-left: 8px; } .fltlft { float: left; margin-right: 8px; } .clearfloat { clear: both; height: 0; font-size: 1px; line-height: 0px; } </style> |
以及如何使用它的示例:
1 2 3 4 5 | Header goes here Sidebar is here Main Content here <br class="clearfloat" /> Footer Here |
可以使用高度为100%的
结帐粘性页脚
http://ryanfait.com/sticky-footer/
http://www.cssstickyfooter.com/
1 |
和
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | * {margin:0;padding:0;} html, body, #wrap {height: 100%;} body > #wrap {height: auto; min-height: 100%;} #main {padding-bottom: 150px;} /* must be same height as the footer */ #footer {position: relative; margin-top: -150px; /* negative value of footer height */ height: 150px; clear:both;} /* CLEAR FIX*/ .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 */ |
一类重复的CSS:固定在底部并居中
看看http://ryanfait.com/sticky-footer/
您将需要稍微调整代码,因为除页脚以外的所有内容都必须位于packagediv中。
乔什
您应该查看min-height CSS属性,但是要小心,因为并非所有浏览器(特别是IE ..-好像对任何人来说都是新闻)都未正确支持该属性。
您可能还想查看Google上的CSS最小高度黑客记录