•  11-09-2019
  •  | 
  •  

题

我有三个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