1

我在这里重新创建了我的问题。

问题是'left' div 应该匹配'top' 和bottom' right div 的组合高度。我一直在阅读有关如何使用不同内容的列实现相同高度的文章和教程，但它们似乎都不适用于“堆叠”列。

我当前的非工作解决方案是建立在本文中的一个概念之上的：

使 div 的高度等于最高列的唯一方法是该 div 包含所有列。所以用另一种方式解释这一点，通过将列放置在容器内，我们使容器成为最高列的高度。这是一个非常有用的结构。为了让这个结构在所有浏览器中正常工作，容器 div 必须是浮动的（左或右）加上每个列内容 div 也必须是浮动的，无论哪种方式都没有关系。

我知道equalHeights jQuery 插件和调整大小，但我更喜欢 CSS 解决方案。

HTML：

<!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>
    </head>
    <body>
      <div id='container'>  
        <div id='height-container'>
            <div id='left'>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque faucibus, nunc non semper fringilla, nibh mauris aliquam diam, sit amet suscipit purus ligula eu odio. Nulla tortor neque, sodales nec placerat vitae, laoreet a mi. In ac ullamcorper dui. Sed enim tellus, volutpat at tristique eu, condimentum volutpat tellus. Integer massa quam, egestas id vulputate id, ultrices ut felis. 
            </div>
            <div id='right'>
              <div id='top'>
                  Proin condimentum purus tortor, eu laoreet velit. Praesent ornare, mauris eu laoreet suscipit, nibh mauris imperdiet dolor, ut molestie erat tellus ac odio. Etiam tempor eros at neque tincidunt a feugiat massa imperdiet. Vestibulum aliquet nibh sit amet urna facilisis condimentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In ornare dolor quis neque aliquet lacinia et id tortor. Fusce eu sapien non mi aliquet condimentum id vitae ante. Phasellus sit amet eros vitae velit fringilla facilisis non at eros. In non venenatis lectus. Nam tortor tellus, vehicula non vulputate vitae, mollis a velit. Pellentesque gravida pretium ante, eu volutpat risus viverra non. Duis purus quam, venenatis nec consectetur interdum, aliquam rutrum diam. Donec interdum odio eget ante consectetur in sodales mi molestie. Nunc bibendum, turpis vel vulputate accumsan, diam tortor placerat sem, sed posuere risus purus eu massa. Nullam eleifend pulvinar massa, nec cursus velit dictum quis. 
              </div>
              <div id='bottom'>
                   Praesent vel porttitor dolor. Nulla vel nisl quis nibh bibendum rutrum. In gravida lacus a tellus tempus at pretium quam iaculis. Quisque fringilla feugiat urna, ac tincidunt tellus ornare et. Aenean sit amet turpis at ante molestie accumsan. Duis vestibulum, tortor nec aliquam tincidunt, leo urna tincidunt nunc, et laoreet metus risus quis erat. Proin at sem leo, sit amet bibendum quam. Vivamus quam urna, pulvinar vel tempor eget, facilisis tristique ipsum. Aenean sed ipsum et odio convallis congue a sit amet leo. Morbi luctus odio a felis pellentesque sit amet cursus ante consectetur. <br><br>
                  Praesent vel porttitor dolor. Nulla vel nisl quis nibh bibendum rutrum. In gravida lacus a tellus tempus at pretium quam iaculis. Quisque fringilla feugiat urna, ac tincidunt tellus ornare et. Aenean sit amet turpis at ante molestie accumsan. Duis vestibulum, tortor nec aliquam tincidunt, leo urna tincidunt nunc, et laoreet metus risus quis erat. Proin at sem leo, sit amet bibendum quam. Vivamus quam urna, pulvinar vel tempor eget, facilisis tristique ipsum. Aenean sed ipsum et odio convallis congue a sit amet leo. Morbi luctus odio a felis pellentesque sit amet cursus ante consectetur.
              </div>
            </div>
        </div> 
    </div>        
    </body>
</html>

CSS：

body{
    text-align:justify;
}

#container{
    width:1000px;
    margin:0 auto;
}

#height-container{
    background:orange;
    float:left;
}

#left{
    float:left;
    width:200px;
    background:#CD5555;
    padding:20px;
}

#right{
    width:600px;
    float:right;
}

#top{
    background:yellow;
    padding:20px;
}

#bottom{
    background:#00FF66;    
    padding:20px;
}
4

2 回答 2

2

您可以display:table为此使用属性：

#height-container{
    background:orange;
    display: table;
    vertical-align:top;
}

#left{
    display: table-cell;
    width:200px;
    background:#CD5555;
    padding:20px;
}

#right{
    width:600px;
    display: table-cell;
}

检查这个http://jsfiddle.net/6rBAw/2/

但它可以工作到 IE8 及更高版本

更新

CSS

#left{
    width:200px;
    background:#CD5555;
}

#right{
    float:right;
    width:600px;
}
.clr{clear:both;}

HTML

<div id='right'></div>
<div id='left'>
  <div class="clr"></div>
</div>

检查它http://jsfiddle.net/6rBAw/4/

于 2012-03-16T12:52:58.963 回答
2

这是一个适用于 IE 7 的解决方案http://jsfiddle.net/6rBAw/6/此解决方案使用负边距底部和填充底部，唯一的事情是您必须提供边距底部和填充底部值相同且较大的值并赋予该列溢出隐藏属性的容器。

#container{
    width:1000px;
    margin:0 auto;
    **overflow: hidden;**
}

#left{
    float:left;
    width:200px;
    background:#CD5555;
    **padding:20px 20px 99999px 20px;
    margin-bottom: -99999px;**
}

#right{
    width:600px;
    float:right;
    **padding-bottom: 99999px;
    margin-bottom: -99999px;**
    background-color: black;
    height: 1000px;
}
于 2012-03-16T14:07:01.363 回答