带填充的等高列

发布于 2024-09-14 15:15:09 字数 3719 浏览 6 评论 0原文

嘿。我有以下标记：

<!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

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

原文

Hey. I have the following markup:

<!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>

The problem is, that the left column doesn't show up. However, if I remove the padding from #content (and subtract 10 from #left's right value), it works, except for the missing padding on #content. Is there any way to fix this without any extra markup? I've seen this solution:

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

But I would like to keep the amount of wrappers to a minimum... :)

分享到QQ

分享到微博