如何拉伸 div 以适应容器？

在前端开发中，有时需要将 div 元素拉伸以适应容器的大小，下面将介绍几种常见的方法。

1. 使用 flexbox

使用 flexbox 是一个很简单的方法，将父元素的 display 属性设置为 flex，子元素即可自适应容器大小。

.container {
  display: flex;
}

.child {
  flex: 1;
}

2. 使用 CSS 表格布局

CSS 表格布局也是一个不错的方法，将父元素的 display 属性设置为 table，子元素设置为 table-cell，然后设置宽度即可。

.container {
  display: table;
  width: 100%;
}

.child {
  display: table-cell;
  width: 1%;
}

3. 使用绝对定位

使用绝对定位也可以实现 div 元素自适应容器大小，将父元素设置为相对定位，子元素设置为绝对定位，然后设置左、右、上、下的值都为 0。

.container {
  position: relative;
}

.child {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

4. 使用 JavaScript

如果以上方法不能满足要求，还可以使用 JavaScript 来实现。将 div 元素的宽度设置为父元素的宽度，然后监听窗口大小改变事件，重新计算宽度即可。

<div id="container">
  <div id="child"></div>
</div>

const container = document.getElementById('container');
const child = document.getElementById('child');

child.style.width = container.offsetWidth + 'px';

window.addEventListener('resize', () => {
  child.style.width = container.offsetWidth + 'px';
});

以上是几种常见的方法，可以根据具体需求选择适合的方法来实现自适应容器大小。