如何为div设置固定高度并实现内部滚动，同时让编辑按钮随滚动固定？

1. 调整HTML结构 #

将可滚动的表单内容与固定按钮拆分，确保按钮独立于滚动区域：

<div class="container">
  <button class="edit-btn">编辑</button>
  <div class="scroll-content">
    <div class="form-group">
      <label>Start date</label>
      <input type="date" />
    </div>
    <div class="form-group">
      <label>End date</label>
      <input type="date" />
    </div>
    <div class="form-group">
      <label>Currently assigned</label>
      <input type="text" value="Some User" />
    </div>
  </div>
</div>

2. 编写CSS样式 #

通过固定容器高度、设置滚动属性和绝对定位实现需求：

.container {
  height: 130px; /* 调整此值刚好显示Start/End date */
  position: relative;
  border: 1px solid #ddd;
  padding: 12px;
}

.edit-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 5px 10px;
  cursor: pointer;
  border: none;
  background: #eee;
  border-radius: 3px;
}

.scroll-content {
  height: 100%;
  overflow-y: auto;
  padding-right: 70px; /* 预留按钮空间，避免内容被遮挡 */
}

.form-group {
  margin-bottom: 18px;
}

核心逻辑说明 #

• 外层容器设置固定高度，作为滚动区域和按钮的基准容器
• 编辑按钮用position: absolute固定在容器右上角，脱离文档流不随内容滚动
• scroll-content容器设置overflow-y: auto，仅当内容高度超过容器时显示垂直滚动条
• 调整容器高度让初始状态仅展示前两个表单组，滚动后才会显示Currently assigned项

内容的提问来源于stack exchange，提问作者Jesus