Question

我在包装器中有三个div标签，一个包装器和两个并排：

<div id="wrapper">
   <div id="left"></div>
   <div id="right"></div>
</div>

我想创建<div id="left">标签可变高度的条件，拉伸包装器。

结果，<div id="right">将扩展到包装器的任何高度。

CSS将实现这一目标？谢谢！

Answer 1

也许我迟到了，但用纯CSS做的描述真的很简单。诀窍是让#right绝对定位并给它top和bottom为0.这会将它拉伸到#left给予#wrapper的任何高度。这是一个完整的工作示例 - #left为绿色，#right为蓝色，#wrapper为红色，但从未见过，因为它完全由#left和#right覆盖。尝试删除bottom: 0;行，看看它没有它的样子。

<html lang="en">
  <head>
    <title></title>

    <style type="text/css">
      #wrapper {
        background: #fdd;
        position: relative;
        width: 300px; /* left width + right width */
      }

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

      #right {
        background: #ddf;
        bottom: 0;
        position: absolute;
        right: 0;
        top: 0;
        width: 100px;
      }
    </style>
  </head>

  <body>
    <div id="wrapper">
      <div id="left">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer augue</p>
        <p>massa, scelerisque non viverra sagittis, egestas nec erat. Aliquam vel</p>
      </div>
      <div id="right">
        <p>turpis metus. Sed id lorem eu urna suscipit porttitor. Nullam. </p>
      </div>
    </div>
  </body>
</html>

Answer 2

如果您打算使用Jquery，那么您可以这样做。

$(document).ready(function(){
   var leftHt = $('#left').height();
   $('#right').css("height",leftHt);

});

这不是css，但它很简单，应该可以工作。据我所知，CSS至少不能轻易做到这一点。

如果您还没有Jquery API，那么就在Javascript之上。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="javascript" language"javascript"></script>

这里的工作示例：

http://michaelpstone.net/development/dynamic-height.html

Answer 3

#right没有真正的好方法来匹配#left已成为的任何东西。最好的方法可能是：

<div id="wrapper">
    <div id="right"></div> <!-- note that right comes before left -->
    <div id="left"></div>
</div>

然后有这种风格：

#left, #right {
    width: 50%; /* Adjust as needed */
#right {
    float: right;
}

这样，＃right不会影响页面长度，但#left会一直影响。但是，＃right仍然不会延伸到#left的长度。我不知道你有什么理由需要伸展到#left，但我认为这是一种美化。如果你想让它一直重复，我会尝试从#left或#wrapper中应用它。

例如，如果你想要#left white和#right red：

#left {
    background: #fff;
}
#wrapper {
    background: #f00;
}

Answer 4

最佳实用解决方案是一张表 - 见[这个问题]（Make Two Floated CSS Elements the Same Height）。

当然，您可能有自己的理由不使用表格...

Answer 5

如果您正在尝试做背景或某事，因此需要相同的高度，我建议使用表格。这更容易。如果你必须使用div和浮动的div，特别是，本文介绍了我看到的唯一可行的方法。这是三列，但您可以将其修改为两列：

http://matthewjamestaylor.com/blog/holy-grail-no-quirks-mode.htm

CSS动态高度

5 个答案: