CSS媒体查询实现大屏下导航与主内容并排布局需求

核心实现方案 #

基于现有Flexbox基础样式，通过媒体查询调整布局方向与元素宽度规则，无需修改HTML结构即可达成需求：

/* 原有基础垂直布局样式 */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 保障footer粘底的核心属性 */
  margin: 0;
}

main {
  flex: 1; /* 让main占据footer以外的垂直空间 */
}

/* 大屏设备适配规则 */
@media (min-width: 1800px) {
  body {
    flex-direction: row; /* 切换为横向排列 */
    flex-wrap: wrap; /* 允许footer换行到整行底部 */
  }

  nav {
    /* 方案1：自适应内容宽度 + 内边距 */
    width: fit-content;
    padding: 1rem 2rem;
    /* 方案2：固定宽度（按需替换） */
    /* width: 300px; */
    /* padding: 1rem 2rem; */
  }

  main {
    flex: 1; /* 自动填充nav之外的剩余水平空间 */
  }

  footer {
    width: 100%; /* 让footer占满整行宽度，不破坏原有粘底逻辑 */
  }
}

关键细节解释 #

• <body>布局调整：flex-direction: row让nav和main横向并排，flex-wrap: wrap确保footer能换行到下方占据整行。
• <nav>宽度控制：fit-content使导航栏宽度自适应内部内容，搭配内边距保证留白；若需固定宽度，直接替换为具体数值即可。
• <main>空间填充：flex: 1属性会自动占据nav以外的所有水平剩余空间，无需手动计算宽度。
• <footer>逻辑保留：基础样式中min-height: 100vh和main: flex-1已经实现了内容不足时footer固定在底部的效果，媒体查询中仅需给footer设置width:100%，不改变原有逻辑。

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