Question

我有这样的布局，其中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; 
}

Answer 1

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＆amp; 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＆amp; 7将每列视为inline-block元素，但由于they don't support that（至少对于块级元素），我们使用inline显示，并使用zoom: 1;修正来触发{{ 3}}。这会像对待inline-block那样对待它。然后，我们将它们全部设置为在顶部彼此对齐，并使用另一个小技巧。到目前为止，我们使用padding: 9999px来扩展元素的底部，以至于其他元素不可能比它长，并且当我们这样做时，我们使用margin: -9999px;来更改页面的渲染。我们不想扩展页面，只是背景。 9999px是任意值，只要它足够高，可以大于最长和最短列之间的差值。对于最后的触摸，我们在容器元素上设置overflow: hidden，这样背景就不会通过渗出底部来扩展页面。

你有它，完全IE 6+支持使用纯CSS IE's hasLayout property（加上MS zoom）的多列固定宽度布局。

Answer 2

bfrohs想出了一个适用于非IE浏览器的解决方案： Full height columns without scroll

@Jawad - 再次感谢您的时间和帮助！：）

Answer 3

AFAIK使用纯CSS不可能使用grid layout或flexbox这些在浏览器中都不太受支持。（Flexbox至少已经是w3c工作草案......）

你可以通过应用min-height来解决这个问题，这有几个缺点，或者通过js设置高度。我不知道任何合理的crossbrowser css-solution atm。

Answer 4

你可以随时尝试'faux column technique。也就是说，包含三个div的元素具有垂直切片的背景图像。该图像将为您的列分割创建线条，并创建相同高度的幻觉。

在可维护性方面很笨重 - 您必须编辑图像以更改布局 - 但它是可靠的。

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

4 个答案:

现代支持

IE 6＆amp; 7支持