2

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

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

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

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

什么 CSS 将完成此任务？谢谢！

4

5 回答 5

4

也许我迟到了，但用纯 CSS 做你描述的事情真的很简单。诀窍是#right绝对定位并给它一个top0的值bottom。这会将它拉伸到#left给出的任何高度#wrapper。这是一个完整的工作示例——#left绿色、#right蓝色和#wrapper红色，但从未见过，因为它完全被#leftand覆盖#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>
于 2009-08-06T19:36:22.197 回答
3

如果您打算使用 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

于 2009-08-06T18:54:53.497 回答
2

#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;
}
于 2009-08-06T18:48:31.683 回答
0

最好的实用解决方案是一个表格 - 请参阅 [this SO question]（使两个浮动 CSS 元素具有相同的高度）。

当然你可能有你自己不使用表格的原因......

于 2009-08-06T18:58:22.477 回答
0

如果您正在尝试做背景或其他事情，因此需要相同的高度，我建议您使用桌子。这要容易得多。如果您必须使用 div 和浮动 div，尤其是，本文介绍了我所见过的唯一一种行之有效的方法。它用于三列，但您可以将其修改为两列：

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

于 2009-08-06T18:58:48.700 回答