我有这个布局,其中my_menu固定在顶部,然后是标题,接着是960px和居中的内容,其中3列已经浮动,最后是粘性页脚.
>问题是如何使内容拉伸到100％的高度
即使任何一个子列中没有足够的内容？
>无论列是什么,如何使3列的高度相等
内容？
>保持粘性页脚！纯CSS,没有JavaScript,没有
JQuery的！
HTML标记
<!DOCTYPE html> <html lang="en"> <head> <Meta charset="utf-8" /> <title>Document Title</title> <link rel="stylesheet" href="main.css" type="text/css" /> </head> <body id="index"> <div id="wrapper"> <div id="my_menu"> FIXED MENU WIDTH 100% </div> <div id="my_header"> HEADER WIDTH 100% </div> <div id="content"> <p>CONTENT 960px</p> <div id="col1" class="content_columns"> COLUMN 1 WIDTH 320px HEIGHT 100% COLUMN 1 WIDTH 320px HEIGHT 100% COLUMN 1 WIDTH 320px HEIGHT 100% COLUMN 1 WIDTH 320px HEIGHT 100% COLUMN 1 WIDTH 320px HEIGHT 100% COLUMN 1 WIDTH 320px HEIGHT 100% COLUMN 1 WIDTH 320px HEIGHT 100% COLUMN 1 WIDTH 320px HEIGHT 100% COLUMN 1 WIDTH 320px HEIGHT 100% COLUMN 1 WIDTH 320px HEIGHT 100% COLUMN 1 WIDTH 320px HEIGHT 100% COLUMN 1 WIDTH 320px HEIGHT 100% COLUMN 1 WIDTH 320px HEIGHT 100% COLUMN 1 WIDTH 320px HEIGHT 100% COLUMN 1 WIDTH 320px HEIGHT 100% COLUMN 1 WIDTH 320px HEIGHT 100% COLUMN 1 WIDTH 320px HEIGHT 100% COLUMN 1 WIDTH 320px HEIGHT 100% COLUMN 1 WIDTH 320px HEIGHT 100% COLUMN 1 WIDTH 320px HEIGHT 100% COLUMN 1 WIDTH 320px HEIGHT 100% COLUMN 1 WIDTH 320px HEIGHT 100% COLUMN 1 WIDTH 320px HEIGHT 100% COLUMN 1 WIDTH 320px HEIGHT 100% COLUMN 1 WIDTH 320px HEIGHT 100% COLUMN 1 WIDTH 320px HEIGHT 100% COLUMN 1 WIDTH 320px HEIGHT 100% </div> <div id="col2" class="content_columns"> COLUMN 2 WIDTH 320px HEIGHT 100% COLUMN 2 WIDTH 320px HEIGHT 100% COLUMN 2 WIDTH 320px HEIGHT 100% COLUMN 2 WIDTH 320px HEIGHT 100% COLUMN 2 WIDTH 320px HEIGHT 100% COLUMN 2 WIDTH 320px HEIGHT 100% COLUMN 2 WIDTH 320px HEIGHT 100% COLUMN 2 WIDTH 320px HEIGHT 100% COLUMN 2 WIDTH 320px HEIGHT 100% </div> <div id="col3" class="content_columns"> COLUMN 3 WIDTH 320px HEIGHT 100% COLUMN 3 WIDTH 320px HEIGHT 100% COLUMN 3 WIDTH 320px HEIGHT 100% COLUMN 3 WIDTH 320px HEIGHT 100% COLUMN 3 WIDTH 320px HEIGHT 100% </div> <div class="clear_floats"></div> <!-- For Clearing Floats --> </div> <div class="push"></div> <!-- For Sticky Footer --> </div> <div id="my_footer"> STICKY FOOTER WIDTH 100% </div> </body> </html>
CSS样式
* /* For CSS Reset */
{
padding: 0;
margin: 0;
}
html,body
{
width: 100%;
height: 100%;
}
div#wrapper
{
width: 100%;
height: 100%;
min-height: 100%; /* For Sticky Footer */
height: auto !important; /* For Sticky Footer */
margin: 0 auto -70px; /* For Sticky Footer */
}
div#my_menu
{
width: 100%;
height: 50px;
outline: 1px solid black;
background-color: grey;
text-align: center;
position: fixed;
}
div#my_header
{
width: 100%;
height: 100px;
outline: 1px solid black;
background-color: yellow;
text-align: center;
padding-top: 50px;
}
div#content
{
width: 960px;
margin: 0 auto;
outline: 1px solid black;
background-color: brown;
text-align: center;
}
div.content_columns
{
width: 320px;
outline: 1px solid black;
background-color: gold;
text-align: center;
float: left;
}
div.clear_floats /* For Clearing Floats */
{
clear: both;
}
div#my_footer
{
width: 100%;
height: 70px;
outline: 1px solid black;
background-color: pink;
text-align: center;
}
div.push /* For Sticky Footer */
{
height: 70px;
}
解决方法
A solution with full IE6+ support.我将退出并解释代码的相关部分.
现代支持
div.content_columns {
width: 320px;
outline: 1px solid black;
background-color: gold;
text-align: center;
display: table-cell; /* No floats,this instead */
}
因此,由于现代浏览器使这项任务变得简单,我们所需要做的就是使用display：table-cell来实现这一点.它使列与高度相等,并充当表格单元格.容易腻的柠檬挤.
IE 6& 7支持
<!--[if lte IE 7]>
<style>
div#content {
overflow: hidden;
}
div.content_columns {
vertical-align: top;
display: inline;
zoom:1;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
</style>
<![endif]-->
现在,对于IE 6和7的支持,我们将使用一些技巧.首先,应该注意的是,这不必在条件评论中完成,但我更喜欢这种方式.给我清洁.但是你可以使用CSS hacks来获取这些值仅适用于IE.
我们正在做的是获得IE 6& 7将每列视为内联块元素,但从they don’t support that开始(至少对于块级元素)我们使用内联显示和缩放：1;修复以触发IE’s hasLayout property.这会将其视为内联块区域.然后,我们将它们全部设置为在顶部彼此对齐,并使用另一个小技巧.我们使用填充：9999px来扩展元素的底部到目前为止其他元素不可能比它长,我们使用margin：-9999px;我们这样做时不要改变页面的呈现.我们不想扩展页面,只需要扩展背景. 9999px是任意值,只要它足够大到最长和最短列之间的差值就可以是任何值.对于最后的触摸,我们设置溢出：隐藏在容器元素上,这样背景不会通过渗出底部来扩展页面.
