如何让对话框内的最后一个元素在屏幕调整大小时保持可见？

Chakra UI 实现方案 #

• 直接使用Chakra UI Modal组件的原生分层结构即可实现，无需额外复杂逻辑：
• 将需要滚动的内容全部放在ModalBody组件内，需要始终可见的最后一个元素（通常是操作按钮组）放在ModalFooter组件内
• 给ModalContent设置maxH限制最大高度为视口占比，同时开启flex纵向布局
• 给ModalBody设置垂直滚动属性，内容超出时自动滚动，不会挤压底部元素

示例代码：

import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, ModalFooter, Button } from '@chakra-ui/react'

function CustomModal({ isOpen, onClose }) {
  return (
    <Modal isOpen={isOpen} onClose={onClose}>
      <ModalOverlay />
      <ModalContent 
        maxH="90vh" 
        display="flex" 
        flexDir="column"
      >
        <ModalHeader>模态框标题</ModalHeader>
        <ModalCloseButton />
        {/* 内容区域超出自动滚动 */}
        <ModalBody overflowY="auto">
          {/* 所有可变长度的内容放在此处 */}
        </ModalBody>
        {/* 最后一个元素放在此处，始终固定在底部可见 */}
        <ModalFooter>
          <Button mr={3} onClick={onClose}>取消</Button>
          <Button colorScheme="blue">确认</Button>
        </ModalFooter>
      </ModalContent>
    </Modal>
  )
}

原生CSS实现方案 #

• 核心依赖flex布局的弹性伸缩特性，无需JS监听尺寸变化：
• 给对话框容器设置display: flex; flex-direction: column;，同时限制最大高度为视口占比
• 中间内容区域设置flex: 1 1 auto; overflow-y: auto;，自动占满剩余空间，超出时滚动
• 底部最后一个元素设置flex: 0 0 auto;，禁止被压缩，始终固定在对话框底部

示例代码：

/* 对话框容器 */
.dialog-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 8px;
}
/* 中间可滚动内容区域 */
.dialog-content {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px;
}
/* 底部固定的最后一个元素 */
.dialog-footer {
  flex: 0 0 auto;
  padding: 16px;
  border-top: 1px solid #eeeeee;
}

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