窗口调整大小时表单div不显示？如何实现div上下堆叠布局

一、form div无法显示的常见原因 #

• 布局溢出隐藏：如果父容器设置了overflow: hidden，窗口缩小时form div被挤出父容器范围，就会被隐藏。
• 浮动未清除：若image和form使用了浮动（如float: left/right），窗口缩小后form可能被挤到可视区域外，且未清除浮动会导致父容器高度塌陷，进一步引发显示问题。
• 媒体查询错误：可能针对小屏幕设置了媒体查询，意外给form div加上了display: none属性。
• 宽度设置不合理：form div用了固定宽度（如width: 800px），窗口宽度小于该值时，form会超出可视区域。

二、实现image div在上、form div在下的方案 #

根据不同布局场景，给出三种实用方法：

方法1：流式布局（默认文档流） #

确保两个div不设置浮动或定位，利用默认文档流上下排列，同时设置自适应宽度：

.image-div {
  width: 100%; /* 占满容器宽度，自适应窗口 */
  margin-bottom: 20px; /* 与下方form保持间距 */
}

.form-div {
  width: 100%; /* 自适应窗口宽度 */
  display: block; /* 强制显示，覆盖可能的隐藏设置 */
}

方法2：清除浮动（原布局用了浮动时） #

如果之前给image设置了浮动，通过清除浮动让form回到文档流：

.image-div {
  float: left;
  width: 100%; /* 小屏幕下占满宽度 */
}

.form-div {
  clear: both; /* 清除浮动，确保在image下方 */
  width: 100%;
  display: block;
}

方法3：Flex布局（推荐） #

用Flex的垂直排列实现，布局更灵活可控：

.parent-container {
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
}

.image-div, .form-div {
  width: 100%;
  display: block;
}

额外检查项 #

• 排查代码中的媒体查询，确保小屏幕下form div的display属性不是none。
• 避免给form div设置固定宽度，改用max-width或百分比宽度实现自适应。

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