带填充的等高列答案

【问题标题】：Equal height columns with padding带填充的等高列
【发布时间】：2010-08-17 17:15:23
【问题描述】：

嘿。我有以下标记：

<!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>
    <title></title>
    <style type="text/css">
*
{
    padding: 0;
    margin: 0;
}

#container 
{
    padding-left: 200px;
    padding-right: 10px;
    overflow: hidden;
}

.column
{
    float: left;
    position: relative;
    text-align: justify;
    margin-bottom: -2000px;
    padding-bottom: 2005px;
}

#top 
{
    background-color: Red;
    height: 30px;
}

#content 
{
    background-color: Green;
    width: 100%;
    padding: 0 5px;
}

#left 
{
    background-color: Blue;
    width: 200px;
    right: 210px;
    margin-top: -30px;
    margin-left: -100%;
}
    </style>
</head>
<body>
    <div id="container">
        <div id="top">
            Lorem ipsum blah blah blah
        </div>
        <div id="content" class="column">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur odio eros, porta eu rutrum sed, vestibulum nec nisl. Nulla facilisi. Nunc viverra, ante eget lobortis fermentum, mauris est rhoncus nisl, nec ullamcorper risus ligula a sem. Donec a lorem sit amet nunc pharetra rhoncus. Aenean rutrum tincidunt dui nec dapibus. Nullam posuere semper quam, sed eleifend enim pulvinar a. Praesent mattis dui id nisl placerat dignissim. Mauris hendrerit ultricies justo, laoreet luctus turpis consequat ac. Suspendisse potenti. Ut in ipsum ligula. Phasellus sagittis metus ac libero varius vel pulvinar tortor scelerisque. Donec cursus augue ut arcu porta viverra. Quisque tempus aliquam erat sed viverra. Suspendisse sem odio, ornare sit amet sodales id, vulputate non erat. Aenean viverra tempus turpis commodo dictum. Nulla eleifend risus egestas justo vestibulum in volutpat orci lacinia. Proin sapien neque, lobortis eget cursus quis, venenatis vitae nisl. Suspendisse at neque eu mauris lobortis eleifend. Etiam suscipit sapien nec orci tincidunt at hendrerit nisl tempus.
        </div>
        <div id="left" class="column">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur odio eros, porta eu rutrum sed, vestibulum nec nisl. Nulla facilisi. Nunc viverra, ante eget lobortis fermentum, mauris est rhoncus nisl, nec ullamcorper risus ligula a sem. Donec a lorem sit amet nunc pharetra rhoncus. Aenean rutrum tincidunt dui nec dapibus. Nullam posuere semper quam, sed eleifend enim pulvinar a. Praesent mattis dui id nisl placerat dignissim. Mauris hendrerit ultricies justo, laoreet luctus turpis consequat ac. Suspendisse potenti. Ut in ipsum ligula. Phasellus sagittis metus ac libero varius vel pulvinar tortor scelerisque. Donec cursus augue ut arcu porta viverra. Quisque tempus aliquam erat sed viverra. Suspendisse sem odio, ornare sit amet sodales id, vulputate non erat. Aenean viverra tempus turpis commodo dictum. Nulla eleifend risus egestas justo vestibulum in volutpat orci lacinia. Proin sapien neque, lobortis eget cursus quis, venenatis vitae nisl. Suspendisse at neque eu mauris lobortis eleifend. Etiam suscipit sapien nec orci tincidunt at hendrerit nisl tempus.
        </div>
    </div>
</body>
</html>

问题是，左列没有显示。但是，如果我从#content 中删除填充（并从#left 的右值中减去10），它会起作用，除了#content 上缺少填充。有没有办法在没有任何额外标记的情况下解决这个问题？我见过这个解决方案：

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

但我想将包装器的数量保持在最低限度... :)

【问题讨论】：

margin-left:-100%;的目的是什么？
这应该是等高的列，尽管在这种情况下它是导致左列不显示的罪魁祸首
该链接中包装器的全部意义在于提供等高列的可见性。包装器为您的列提供背景。如果没有这个技巧，你就无法在 CSS 中使具有流动内容的列具有相同的高度。

标签： html css padding

【解决方案1】：

本网站可能会帮助您： http://www.cssplay.co.uk/layouts/threecol.html

他的整个网站都值得一看，看看你以前从未想过的 CSS 创意。

我认为他甚至会以每小时 50 欧元的价格完成这项工作。我过去雇用过他，他很快。

【讨论】：

【解决方案2】：

我认为您的链接更多的是对这个的解释：

http://www.positioniseverything.net/articles/onetruelayout/equalheight

虽然这篇文章对 3 个等高柱的注意事项和问题进行了更深入的讨论。

【讨论】：