我有三个div标签、包装和两边内的包装:

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

我想要创造条件在哪里 <div id="left"> 标记是可变的高度上,拉伸包装。

结果, <div id="right"> 将扩大到什么高度的包装。

什么CSS将完成这个吗?谢谢!

有帮助吗?

解决方案

如果你要去使用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

其他提示

也许我迟到了,但它确实是简单的事,你用纯CSS描述。诀窍就是让#right绝对定位,并给它一个top和0 bottom这将其拉伸至任何高度#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>

有没有真正的#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白色和红色#right:

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

最切实可行的解决方案是一个表-看到这样的问题](使两个漂CSS元素的同样的高度).

当然,你可以有自己的理由不使用表格...

如果你正在尝试做的背景什么的,因此需要在同一高度,我建议表。这是很容易。如果必须使用的div和浮动的div,特别是,这篇文章介绍了关于我见过行之有效的唯一途径。它是三列,但你可以修改它有两个:

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

许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top