如何在纯CSS中创建相等高度的列 [英] How to create equal height columns in pure CSS
问题描述
如何让你的div到达一路？
如何填充父div的垂直空间？
如何获取等长列而不使用背景图片？
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?
我花了几天时间搜索和剖析代码，以了解如何实现等长列高效。这是我想出的答案，我想在一个小教程中与社区复制和粘贴样式分享这些知识。
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.
对于那些认为这是重复的， 不是这样。我受到多个网站的启发，其中包括 http://matthewjamestaylor.com/blog / equal-height-columns-cross-browser-css-no-hacks ，但下面的代码是唯一的。
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-hacks but the code below is unique.
推荐答案
p>现代网络设计中的一个棘手的事情是创建一个两（或更多）列布局，其中所有的列都是相等的高度。我提出了一个任务，寻找一个方法，在纯CSS中做到这一点。
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.
你可以通过使用一个背景图像在一个wrap-div，您的列（或页面背景）。
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).
您也可以通过使用CSS表格单元格，但不幸的是，浏览器支持仍然是阴影，它不是首选解决方案。阅读，有一个更好的方法。
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.
我发现我的灵感来自两个网页上，虽然我喜欢我的解决方案，因为它给了我更多的自由使用圆润角落和精确的宽度或百分比布局，并且它更容易编辑，您的最终布局控制div不强迫您做负数处理。
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.
==诀窍：==
首先创建背景设计cols，然后放一个全宽度div，可以容纳您的常规内容。诀窍是关于列中的浮动列，当内容长度延长时，无论最后一列是否是最长的，都会对所有父列创建推送效果。
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.
这个例子我将使用一个2列网格在一个中心的圆角的wrap-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.
== Step 1 ==
创建您的基本网页。
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
</body>
</html>
==步骤2 ==
在另一个浮动div中创建一个浮动div。然后在内侧div上应用一个负边距，从视觉上将其从框架中弹出。为了说明的目的，我添加了虚线边框。知道如果你将外侧div浮动到左边，并给内部div一个负边距左边，内部div将在页面边缘下面，而不给你一个滚动条。
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.
<!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 ==
在里面div：创建一个没有背景的div，它具有所有列的结合。它会推动内部div的边缘。我添加了一个虚线框用于说明目的。这将是您的内容的画布。
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.
<!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>
==步骤4 ==
添加您的内容。在这个例子中，我放置两个位于布局之上的div。我也拿走了虚线的边界。 Presto，就是这样。如果您愿意，可以使用此代码。
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.
<!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>
==步骤5 ==
为了使它更好，你可以将整个设计集中在一个wrap div，并给它圆角。
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.
<!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 ==
- http：// www .pmob.co.uk / pob / equal-columns.htm
- http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm
- http://www.pmob.co.uk/pob/equal-columns.htm
- http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm
这篇关于如何在纯CSS中创建相等高度的列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
