Html 如何在纯 CSS 中创建等高列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14763363/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create equal height columns in pure CSS
提问by Paul
How to get your div to reach all the way down? How to fill up the vertical space of parent div? How to get equal length columns without using background images?
如何让你的 div 一直向下到达？如何填充父div的垂直空间？如何在不使用背景图像的情况下获得等长的列？
I spent a couple days googling and dissecting code to understand how to accomplish equal length columns as easy and efficient as possible. This is the answer I came up with and I wanted to share this knowledge with the community copy and paste style in a little tutorial.
我花了几天的时间在谷歌上搜索和剖析代码，以了解如何尽可能简单高效地完成等长列。这是我想出的答案，我想在一个小教程中与社区复制和粘贴样式分享这些知识。
For those that think this is a duplicate, it is not. I was inspired by several websites, among them http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacksbut the code below is unique.
对于那些认为这是重复的人，事实并非如此。我受到了几个网站的启发，其中包括http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks但下面的代码是独一无二的。
采纳答案by Paul
One of the tricky things in modern web design is to create a two (or more) column layout where all the columns are of equal height. I set out on a quest to find a way to do this in pure CSS.
现代网页设计中的一件棘手的事情是创建一个两列（或更多）列的布局，其中所有列的高度都相等。我开始寻求在纯 CSS 中找到一种方法来做到这一点。
You can easiest accomplish this by using a background image in a wrap-div that holds both of your columns (or the background of the page).
您可以通过在包含两列（或页面背景）的 wrap-div 中使用背景图像来轻松完成此操作。
You can also do this by using CSS table cells, but unfortunately the browser support for this is still shady, so it's not a preferred solution. Read on, there is a better way.
您也可以通过使用 CSS 表格单元格来做到这一点，但不幸的是，浏览器对此的支持仍然不可靠，因此它不是首选的解决方案。继续阅读，有更好的方法。
I found my inspiration from two pages on the web, although I prefer my solution, since it gives me more freedom to use rounded corners and precise widths or percent layouts, and it is easier to edit, your final layout holding div is not forcing you to do negative number crunching.
我从网上的两页找到了我的灵感，虽然我更喜欢我的解决方案，因为它让我更自由地使用圆角和精确的宽度或百分比布局，并且更容易编辑，你的最终布局保持 div 不会强迫你做负数运算。
== The trick: ==
== 诀窍：==
First you create the background design cols, then you put a full width div that can hold your regular content. The trick is all about floated columns within columns, creating a push effect on all parent columns when the content extends in length, no matter what end column is the longest.
首先创建背景设计列，然后放置一个可以容纳常规内容的全宽 div。诀窍在于列内的浮动列，当内容长度扩展时，无论最后列是最长的，都会在所有父列上创建推送效果。
In this example I will use a 2 column grid in a centered wrap-div with rounded corners. I have tried to keep the fluff out for easy copy-paste.
在此示例中，我将在带有圆角的居中环绕 div 中使用 2 列网格。我试图保持绒毛很容易复制粘贴。
== Step 1 ==
== 第 1 步 ==
Create your basic web page.
创建您的基本网页。
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
</body>
</html>
== Step 2 ==
== 第 2 步 ==
Create one floated div inside another floated div. Then apply a negative margin on the inside div to pop it out of its frame visually. I added dotted borders for illustrating purposes. Know that if you float the outside div to the left and give the inside div a negative margin to the left, the inside div will go under the page edge without giving you a scroll bar.
在另一个浮动 div 内创建一个浮动 div。然后在内部 div 上应用负边距以将其从视觉上弹出框架。为了说明目的，我添加了虚线边框。要知道，如果您将外部 div 向左浮动，并为内部 div 提供向左的负边距，则内部 div 将位于页面边缘下方，而不会为您提供滚动条。
<!DOCTYPE HTML>
<html>
<head>
<style>
#rightsideBG{
float:right;
background:silver;
width:300px;
border: 3px dotted silver; /*temporary css*/
}
#leftsideBG{
float:left;
background:gold;
width:100px;
margin-left:-100px;
border: 3px dotted gold; /*temporary css*/
}
</style>
</head>
<body>
<div id="rightsideBG">
<div id="leftsideBG">
this content obviously only fits the left column for now.
</div>
</div>
</body>
</html>
== Step 3 ==
== 第 3 步 ==
In the inside div: Create a div without background that has the with of all the columns combined. It will push over the edge of the inside div. I added a dotted border for illustrating purposes.This will be the canvas for your content.
在内部 div 中：创建一个没有背景的 div，该 div 将所有列组合在一起。它将推过内部 div 的边缘。为了说明目的，我添加了一个虚线边框。这将是您内容的画布。
<!DOCTYPE HTML>
<html>
<head>
<style>
#rightsideBG{
float:right;
background:silver;
width:300px;
border: 3px dotted silver; /*temporary css*/
}
#leftsideBG{
float:left;
background:gold;
width:100px;
margin-left:-100px;
border: 3px dotted gold; /*temporary css*/
}
#overbothsides{
float:left;
width:400px;
border: 3px dotted black; /*temporary css*/
}
</style>
</head>
<body>
<div id="rightsideBG">
<div id="leftsideBG">
<div id="overbothsides">
this content spans over both columns now.
</div>
</div>
</div>
</body>
</html>
== Step 4 ==
== 第 4 步 ==
Add your content. In this example I place two divs that are positioned over the layout. I also took away the dotted borders. Presto, that's it. You can use this code if you like.
添加您的内容。在这个例子中，我放置了两个位于布局上方的 div。我也去掉了虚线边框。快，就是这样。如果您愿意，可以使用此代码。
<!DOCTYPE HTML>
<html>
<head>
<style>
#rightsideBG{
float:right;
background:silver;
width:300px;
}
#leftsideBG{
float:left;
background:gold;
width:100px;
margin-left:-100px;
}
#overbothsides{
float:left;
width:400px;
}
#leftcol{
float:left;
width:80px;
padding: 10px;
}
#rightcol{
float:left;
width:280px;
padding: 10px;
}
</style>
</head>
<body>
<div id="rightsideBG">
<div id="leftsideBG">
<div id="overbothsides">
<div id="leftcol">left column content</div>
<div id="rightcol">right column content</div>
</div>
</div>
</div>
</body>
</html>
== Step 5 ==
== 第 5 步 ==
To make it nicer you can centered the whole design in a wrap div and give it rounded corners. The rounded corners wont show in old IE unless you use a special fix for that.
为了使它更好，您可以将整个设计集中在一个环绕的 div 中并给它圆角。圆角不会在旧 IE 中显示，除非您为此使用特殊修复。
<!DOCTYPE HTML>
<html>
<head>
<style>
#wrap{
position:relative;
width:500px;
margin:20px auto;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
border-bottom-right-radius: 20px;
}
#rightsideBG{
float:right;
background:silver;
width:300px;
}
#leftsideBG{
float:left;
background:gold;
width:100px;
margin-left:-100px;
}
#overbothsides{
float:left;
width:400px;
}
#leftcol{
float:left;
width:80px;
padding: 10px;
}
#rightcol{
float:left;
width:280px;
padding: 10px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="rightsideBG">
<div id="leftsideBG">
<div id="overbothsides">
<div id="leftcol">left column content</div>
<div id="rightcol">right column content</div>
</div>
</div>
</div>
</div>
</body>
</html>
== Inspiration sources ==
==灵感来源==
回答by zakangelle
For a simpler solution, you can give the parent display: tableand its children display: table-cell, like this:
对于更简单的解决方案，您可以给 parentdisplay: table及其 children display: table-cell，如下所示：
.parent {
display: table;
}
.child {
display: table-cell;
}
See DEMO.
见演示。
Please note that this does not work in IE7, so if IE7 support is required, a more elaborate solution would be needed.
请注意，这在 IE7 中不起作用，因此如果需要 IE7 支持，则需要更详细的解决方案。
