CSS 如何根据另一个div动态改变div的高度

在本文中，我们将介绍如何使用CSS根据另一个div的高度动态改变另一个div的高度。这是一个常见的需求，特别是在响应式布局和自适应设计中。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

使用百分比来设置高度

一种常见的方法是使用百分比来设置高度。可以设置父div的高度为一个百分比值，然后根据另一个div的高度来动态计算子div的高度。

<style>
  .parent {
    height: 50%;
    background-color: #f2f2f2;
  }

  .child {
    height: 100%;
    background-color: #ccc;
  }
</style>

<div class="parent">
  <div class="child"></div>
</div>

在上面的例子中，父div的高度被设置为50%，子div的高度为100%。这意味着子div的高度将占据父div的50%。当父div的高度发生变化时，子div的高度也会随之改变。

使用flexbox布局

另一种常用的方法是使用flexbox布局。flexbox布局提供了更复杂的布局控制，可以轻松地使一个div的高度受到另一个div的影响。

<style>
  .container {
    display: flex;
    height: 300px;
    background-color: #f2f2f2;
  }

  .left {
    flex: 1;
    background-color: #ccc;
  }

  .right {
    flex: 1;
    background-color: #ddd;
  }
</style>

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

在上面的例子中，我们使用了一个容器div，包含了两个子div（左侧和右侧）。通过设置flex属性，我们可以控制子div的大小。在这个例子中，左侧和右侧的宽度均为50%。

使用JavaScript和CSS变量

如果以上方法不满足你的需求，你还可以结合使用JavaScript和CSS变量来实现动态改变div的高度。

<style>
  :root {
    --height-var: 200px;
  }

  .div1 {
    height: var(--height-var);
    background-color: #ccc;
  }

  .div2 {
    height: calc(100% - var(--height-var));
    background-color: #ddd;
  }
</style>

<script>
  function changeHeight() {
    var div1Height = document.getElementById("div1").offsetHeight;
    document.documentElement.style.setProperty("--height-var", div1Height + "px");
  }
</script>

<div class="div1" id="div1">
  <button onclick="changeHeight()">改变高度</button>
</div>
<div class="div2"></div>

在上面的例子中，我们定义了一个CSS变量–height-var来控制div1的高度。当点击按钮时，JavaScript函数changeHeight会获取div1的高度，并将其赋值给–height-var，从而动态改变div1的高度。