html – 如何在此布局中使内容100％高度和相等高度列？

我有这个布局,其中my_menu固定在顶部,然后是标题,接着是960px和居中的内容,其中3列已经浮动,最后是粘性页脚.

>问题是如何使内容拉伸到100％的高度
即使任何一个子列中没有足够的内容？
>无论列是什么,如何使3列的高度相等
内容？
>保持粘性页脚！纯CSS,没有JavaScript,没有
JQuery的！

<!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是任意值,只要它足够大到最长和最短列之间的差值就可以是任何值.对于最后的触摸,我们设置溢出：隐藏在容器元素上,这样背景不会通过渗出底部来扩展页面.

并且你有它,完全IE 6支持多列固定宽度布局使用纯CSS 2(加上MS缩放).

原文地址：https://www.jb51.cc/html/232035.html

html – 如何在此布局中使内容100％高度和相等高度列？

解决方法

相关推荐