13

如何让你的 div 一直向下到达？如何填满父div的垂直空间？如何在不使用背景图像的情况下获得等长的列？

我花了几天时间在谷歌上搜索和剖析代码，以了解如何尽可能简单高效地完成等长列。这是我想出的答案，我想在一个小教程中与社区复制和粘贴样式分享这些知识。

对于那些认为这是重复的人来说，事实并非如此。我受到了几个网站的启发，其中包括http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks，但下面的代码是独一无二的。

4

2 回答 2

25

对于更简单的解决方案，您可以给 parentdisplay: table及其 children display: table-cell，如下所示：

.parent {
  display: table;
}
.child {
  display: table-cell;
}

见演示。

请注意，这在 IE7 中不起作用，因此如果需要 IE7 支持，则需要更详细的解决方案。

于 2013-02-08T00:00:30.770 回答
7

现代网页设计中的一件棘手的事情是创建一个两列（或更多）列的布局，其中所有列的高度相同。我开始寻求在纯 CSS 中找到一种方法来做到这一点。

您可以通过在包含两个列（或页面背景）的 wrap-div 中使用背景图像来最简单地完成此操作。

您也可以使用 CSS 表格单元格来做到这一点，但不幸的是，浏览器对此的支持仍然很糟糕，因此它不是首选解决方案。继续阅读，有更好的方法。

我从网上的两个页面中找到了灵感，虽然我更喜欢我的解决方案，因为它让我可以更自由地使用圆角和精确的宽度或百分比布局，并且更容易编辑，你的最终布局持有 div 不会强迫你做负数运算。

==诀窍：==

首先创建背景设计列，然后放置一个可以容纳常规内容的全宽 div。诀窍在于列中的浮动列，当内容长度延长时，对所有父列产生推动效果，无论哪一列最长。

在这个例子中，我将在一个带圆角的居中 wrap-div 中使用一个 2 列网格。我试图保持绒毛，以便于复制粘贴。

== 第 1 步 ==

创建您的基本网页。

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
</body>
</html>

== 第 2 步 ==

在另一个浮动 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>

== 第 3 步 ==

在内部 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>

== 第 4 步 ==

添加您的内容。在此示例中，我放置了两个位于布局上方的 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>

== 第 5 步 ==

为了使它更好，你可以将整个设计集中在一个 wrap 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>

== 灵感来源 ==

于 2013-02-07T23:51:43.677 回答