窗口 resize 时如何让 image div 置顶、form div 置于页面底部？

你可以通过两种常用方式实现窗口 resize 时的布局调整：

一、CSS 媒体查询（推荐，纯布局场景） #

利用 CSS 媒体查询监听视口尺寸变化，直接通过布局属性控制元素位置，性能更优且代码简洁。

示例代码 #

首先定义基础 HTML 结构：

<div class="page-container">
  <div class="image">图片内容</div>
  <!-- 可选：中间其他内容 -->
  <div class="form">表单内容</div>
</div>

对应的 CSS 样式：

/* 基础布局：让容器占满视口高度 */
.page-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 图片区域默认样式 */
.image {
  /* 根据需求设置样式，比如固定高度或自适应 */
  height: 200px;
  background: #eee;
}

/* 表单区域默认贴底 */
.form {
  margin-top: auto;
  padding: 1rem;
  background: #f5f5f5;
}

/* 当窗口宽度小于 768px 时（可根据需求调整阈值），强制布局顺序 */
@media (max-width: 768px) {
  .page-container {
    flex-direction: column;
  }
  .image {
    order: 1; /* 确保图片在最顶部 */
  }
  .form {
    order: 99; /* 确保表单在最底部 */
    margin-top: auto; /* 保持贴底 */
  }
}

二、JavaScript 监听 resize 事件（适合复杂逻辑场景） #

如果需要结合其他动态逻辑（比如根据内容高度调整），可以通过 JS 监听窗口 resize 事件，动态修改元素样式或类名。

示例代码 #

// 获取目标元素
const container = document.querySelector('.page-container');
const imageDiv = document.querySelector('.image');
const formDiv = document.querySelector('.form');

// 定义布局调整函数
function adjustLayout() {
  const viewportWidth = window.innerWidth;
  // 设定触发条件，比如宽度小于 768px
  if (viewportWidth < 768) {
    container.style.display = 'flex';
    container.style.flexDirection = 'column';
    imageDiv.style.order = '1';
    formDiv.style.order = '99';
    formDiv.style.marginTop = 'auto';
  } else {
    // 恢复默认布局
    container.style.display = '';
    container.style.flexDirection = '';
    imageDiv.style.order = '';
    formDiv.style.order = '';
    formDiv.style.marginTop = '';
  }
}

// 监听窗口 resize 事件
window.addEventListener('resize', adjustLayout);
// 页面加载时执行一次，确保初始布局正确
adjustLayout();

方案对比 #

• CSS 媒体查询：无需 JS 介入，性能好，适合仅需根据视口尺寸调整布局的场景。
• JavaScript 方案：灵活性更高，可结合更多业务逻辑，但需要注意防抖（如果 resize 频繁触发，可添加防抖函数减少性能消耗）。

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