Question

我有一个包含项目列表的div。用户可以添加/删除列表中的项目，因此div不断更改高度以补偿列表大小的变化。

我右边有另一个div，它应该提供左边项目的详细信息。我怎样才能让右侧的div不断与左侧div保持垂直对齐并更改高度，使其等于左侧div当前的高度，因为项目是从左侧div列表中添加和删除的？

Answer 1

display:table-cell会在这里为您提供帮助：

div { display:table-cell; border:1px solid; }

<div id=master>
  one<br>two
</div>
<div>
    three
</div>

Answer 2

如果不显示您的代码，很难回答您的问题。试着把它放在小提琴里？ https://jsfiddle.net/

这就是我要说的。将左右div放入容器div中，然后让左右div继承容器高度。

<div id="container" style="height:200px">
    <div style="float: left; height: 100%">
        list items<br />
        list items<br />
        list items
    </div>
    <div style="float: left; height: 100%; border: 1px solid black;">
        right div
    </div>
</div>
<br /><br />
<button onclick="document.getElementById('container').style.height='20px'" />

Answer 3

从两者中移除高度，并在其中添加高度的地方包裹div。

Answer 4

只要文档上的某些内容发生变化，就会调用此函数，并将div2的高度设置为div1的高度值

<script type='text/javascript'>
document.onchange=setDivHeight();
function setDivHeight(){
var x=Number(document.getElementById('1').style.height)
document.getElementById('2').style.height=x;
}
</script>
<div id="1"></div>
<div id="2"></div>

Answer 5

Flexbox解决方案

此答案改编自css-tricks上的示例 - 检查出来

假设以下标记：

<div class="wrapper">
  <article class="main">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
  </article>
  <aside class="aside">
      <ul>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
  </ul>
 </aside>
</div>

我们可以创建一个flexbox，它将强制所有列符合最大的高度，并具有以下样式：

.wrapper {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;  

  -webkit-flex-flow: row nowrap;
  flex-flow: row nowrap;

  font-weight: bold;
  text-align: center;
}

.wrapper > * {
  padding: 10px;
  flex: 1 100%;
}

.main {
  text-align: left;
  background: deepskyblue;
  order: 2;
  flex: 3 0px;
}

.aside {
    background: gold;
    max-width: 200px;
    order: 1;
}

body {
  padding: 2em; 
}

Here's a fiddle

注意：此解决方案的浏览器支持仅限于IE10 +，浏览器前缀的使用仍适用于大多数主流浏览器版本。有关flexbox如何工作的更全面细分，我强烈建议您查看我上面链接的文章。

我有一个不断改变身高的div。我怎样才能得到第二个div来不断采用第一个div的高度？

5 个答案: