如何让div根据窗口大小自适应并展示滚动条

为了让`<div>`元素根据窗口大小自适应并且显示滚动条，你可以使用CSS来实现响应式布局和设置滚动行为。这里是一个简单的例子：

1. **响应式布局**:
使用CSS `max-width`, `min-width`, 和 `width: 100%` 来确保`<div>`在小屏幕设备上也能缩放，并保持水平填充整个可用宽度。如果内容超过容器宽度，自动添加滚动条。

.div-responsive {
  max-width: 100%;
  min-width: 300px; /* 可以设置最小宽度 */
  width: 100%;
  overflow-x: auto; /* 添加水平滚动条 */
}

将`.div-responsive`应用到你的`<div>`标签上，例如：

<div class="div-responsive">
  ... 你的内容 ...
</div>

2. **窗口调整时的自适应**:
使用媒体查询（Media Queries）可以让你的样式在窗口尺寸变化时动态调整。比如，当窗口宽度小于某个值时，显示滚动条。

@media (max-width: 600px) {
  .div-responsive {
    overflow-y: auto; /* 添加垂直滚动条 */
  }
}

这样，当窗口宽度小于600px时，`<div>`会同时有水平和垂直滚动条。