如何在此布局中使内容 100% 高度和等高列？
Posted
技术标签:
【中文标题】如何在此布局中使内容 100% 高度和等高列？【英文标题】：How to Make the Content 100% height and equal height columns in this layout? 【发布时间】：2012-02-27 20:44:00 【问题描述】：我有这样的布局，其中 my_menu 固定在顶部，然后是页眉，然后是 960 像素并居中的内容，其中 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;
【问题讨论】：
我还记得使用表格可以轻松实现，但是表格用于布局？这个是给 Ktash 的！ 你们为什么对看似随机的问题提供 3x500 的赏金？ 【参考方案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 & 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 hack 让这些值仅在 IE 中有效。
我们正在做的是让 IE 6 和 7 将每一列视为 inline-block 元素，但由于 they don't support that（至少对于块级元素）我们使用 inline 显示和 zoom: 1;修复触发IE's hasLayout property。这会将其视为inline-block elmenent。然后，我们将它们全部设置为在顶部彼此对齐，并使用另一个小技巧。我们使用padding: 9999px 将元素的底部延伸到其他元素不太可能比它长的地方，并且我们使用margin: -9999px; 来在我们这样做时不改变页面的呈现。我们不想扩展页面，只是背景。 9999px 是任意的，可以是任何值，只要它足够高以大于最长和最短列之间的差值。最后，我们在容器元素上设置了overflow: hidden，这样背景就不会因为底部溢出而扩展页面。
你有它，完全 IE 6+ 支持使用纯 CSS 2（加上 MS zoom）的多列固定宽度布局。
【讨论】：
哈哈，即使显示也返回表格：table-cell;呵呵。我希望有一场长期激烈的辩论。哈哈。尽管如此，伟大的伙伴！ 呵呵，这不是用表格来展示，是模拟表格的展示风格。这是关于页面的语义:)【参考方案2】：bfrohs 提出了一个适用于非 IE 浏览器的解决方案： Full height columns without scroll
@Jawad - 再次感谢您的时间和帮助！ :)
【讨论】：
【参考方案3】：AFAIK 不使用 grid layout 或 flexbox 的纯 CSS 是不可能的，这两种浏览器都不太支持。 （Flexbox 至少已经是 w3c 工作草案了……）
你可以通过应用 min-height 来解决这个问题，它有几个缺点，或者通过 js 设置高度。我不知道任何合理的跨浏览器 css 解决方案 atm。
【讨论】：
我很确定纯 CSS 可以做到这一点。我以前做过，但为了我的一生，我不记得我以前是怎么做的。唯一的区别是我怀疑导致问题的粘性页脚。不过，我会得到纠正。 我之前多次处理过这个问题，我很确定，没有为 div 设置固定高度就没有 css 解决方案。但我会很高兴得到纠正^^ 你的意思是我给 div#content 和 div.content_columns 一个固定的高度？ 我已经尝试过了，但由于页脚粘滞而无法正常工作 - positioniseverything.net/articles/onetruelayout/equalheight 根据您需要页脚的“粘性”程度，您可以将绝对/固定位置应用到您的页脚来解决这个问题？【参考方案4】：你总是可以试试旧的faux column technique。也就是说，包含三个 div 的元素有一个垂直平铺的背景图像。该图像将为您的列划分提供线条，并会产生等高的错觉。
它在可维护性方面很笨拙 - 您必须编辑图像才能更改布局 - 但它是可靠的。
【讨论】：
以上是关于如何在此布局中使内容 100% 高度和等高列？的主要内容，如果未能解决你的问题，请参考以下文章