Question

可能重复：
CSS - Equal Height Columns?

网上似乎有很多文章，但很多文章没有更新，我无法理解是否真的有最好的方法在CSS中构建2个相等的列（不知道哪一个是最长的）

示例：

alt text

我想要实现的是B列将一直拉伸到A列的大小。另外，如果B列比A列长，那么我希望A列一直拉伸到A的大小B栏。

由于

乔尔

Answer 1

如果将所需的特定样式分开，这应该有效，并在可能的情况下进行评论。

希望它有所帮助。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Equal 2cols</title>

<style type="text/css">
    /*common styles*/
        html, body, h1, h2, h3{margin:0; padding:0;}
        .clearme{clear:both;}

    /*generic layout styles*/
        #container{width:960px; margin:0 auto;}
        #header{width:960px; height:100px; background-color:#999; margin:0 0 10px 0;}
        #footer{width:960px; height:100px; background-color:#999; margin:10px 0 0 0;}

    /*equal height specific styles*/
        #layout{clear:left; float:left; width:100%; overflow:hidden; background:#f60; /* column 2 background colour */}
        #content{float:left; width:100%; position:relative; right:50%; background:#f00; /* column 1 background colour */}
        #col1 {float:left; width:46%; position:relative; left:52%; overflow:hidden;}
        #col2 {float:left; width:46%; position:relative; left:56%; overflow:hidden;}
</style>

</head>

<body>
    <div id="container">
        <div id="header">
            <h1>header</h1>
        </div><!--/#header-->

        <div id="layout">

            <div id="content">
                <div id="col1">
                    <h2>A</h2>
                </div><!--/#col1-->

                <div id="col2">
                    <h2>B</h2>
                    <p>As long as you like</p>
                </div><!--/#col2-->

            </div><!--/#content-->
        </div><!--/#layout-->

        <div class="clearme"></div>

        <div id="footer">
                <h3>Footer</h3>
        </div><!--/#footer-->

    </div><!--/#container-->
</body>
</html>

CSS中有两个相等的列

1 个答案: