里面的div怎么撑开外面的div让高度自适应

在前端开发中，经常会遇到需要让里面的 div 撑开外面的 div，以便让外面的 div 的高度自适应的情况。本文将提供一些关于如何让里面的 div 撑开外面的 div 的方法，包括使用 CSS 和 JavaScript 的示例说明。

使用 CSS

使用 CSS 让里面的 div 撑开外面的 div 的步骤如下：

1. 确定外面的 div 的高度需要自适应的情况下，设置外面的 div 的高度为 auto。
2. 在里面的 div 中，设置一个伪元素，使用 clear 属性清除浮动。
3. 在里面的 div 中，设置 overflow 属性为 hidden。

下面是一个示例，演示如何使用 CSS 让里面的 div 撑开外面的 div：

<div class="outer">
  <div class="inner"></div>
</div>

.outer {
  width: 300px;
  height: auto;
  background-color: #ccc;
}

.inner {
  width: 100%;
  float: left;
  background-color: #f00;
}

.inner::after {
  content: "";
  display: block;
  clear: both;
}

.inner p {
  overflow: hidden;
}

上述代码中，使用了 CSS 让里面的 div 撑开外面的 div。在 outer 类中，设置了 width、height 和 background-color 属性，以便实现外面的 div 的样式。在 inner 类中，设置了 width、float 和 background-color 属性，以便实现里面的 div 的样式。在 inner 类中，使用了伪元素 ::after，并设置了 clear 属性，以便清除浮动。在 inner 类中，设置了 overflow 属性为 hidden，以便让里面的 div 撑开外面的 div。

使用 JavaScript

使用 JavaScript 让里面的 div 撑开外面的 div 的步骤如下：

1. 获取里面的 div 的高度。
2. 设置外面的 div 的高度为里面的 div 的高度。

下面是一个示例，演示如何使用 JavaScript 让里面的 div 撑开外面的 div：

<div class="outer">
  <div class="inner"></div>
</div>

.outer {
  width: 300px;
  height: auto;
  background-color: #ccc;
}

.inner {
  width: 100%;
  float: left;
  background-color: #f00;
}

const outer = document.querySelector('.outer');
const inner = document.querySelector('.inner');

outer.style.height = inner.offsetHeight + 'px';

上述代码中，使用了 JavaScript 让里面的 div 撑开外面的 div。在 JavaScript 中，获取了里面的 div 的高度，并设置了外面的 div 的高度为里面的 div 的高度。

示例说明

下面是两个例说明，分别是使用 CSS 和 JavaScript 让里面的 div 撑开外面的 div 的示例。

示例一：使用 CSS

1. 确定外面的 div 的高度需要自适应的情况下，设置外面的 div 的高度为 auto。
2. 在里面的 div 中，设置一个伪元素，使用 clear 属性清除浮动。
3. 在里面的 div 中，设置 overflow 属性为 hidden。

上述步骤中，使用了 CSS 让里面的 div 撑开外面的 div。

示例二：使用 JavaScript

1. 获取里面的 div 的高度。
2. 设置外面的 div 的高度为里面的 div 的高度。

上述步骤中，使用了 JavaScript 让里面的 div 撑开外面的 div。