CSS布局错位问题：固定中间列的三栏布局及页脚异常

嘿，我来帮你搞定这个布局问题！先拆解下你遇到的核心问题：

问题根源 #

1. 横向滚动与宽度错位：你给.container加了width:100vw，但当浏览器出现垂直滚动条时，100vw会包含滚动条的宽度，而body的实际可用宽度是100%（减去滚动条宽度），这就导致container超出body宽度，出现横向滚动。同时footer的margin-left:20%是基于body宽度计算的，和container里左右栏的20%宽度（基于100vw）不对齐，造成了错位。
2. 页脚定位问题：.container设置了height:100vh，刚好占满视口高度，footer直接被挤到视口外面，需要滚动才能看到，不符合“居中页脚”的预期。

修改后的完整代码 #

CSS 部分 #

body { 
  margin: 0; 
  font-family: 'Ubuntu', sans-serif; 
  min-height: 100vh; /* 确保页面至少占满整个视口高度 */
  display: flex;
  flex-direction: column; /* 垂直排列container和footer */
}
.container { 
  display: flex; 
  flex: 1; /* 让container占满剩余空间，footer自动被推到底部 */
  /* 移除width:100vw，避免横向滚动 */
}
.left { background-color: gainsboro; width: 20%; }
.center { background-color: white; width: 60%; }
.right { background-color: gainsboro; width: 20%; }
.footer { 
  height: 20px; 
  width: 60%; /* 和中间栏保持一致宽度 */
  margin: 0 auto; /* 水平居中，比固定margin更灵活 */
  text-align: center; 
  background-color: red; 
}

HTML 部分 #

<body>
  <div class="container">
    <div class="left"></div>
    <div class="center">Bla bla bla bla bla</div>
    <div class="right"></div>
  </div>
  <div class="footer">this is a footer!</div>
</body>

关键优化点 #

• 页面整体布局：把body设为垂直flex容器，配合min-height:100vh，既能保证页面占满视口高度，又能让footer在内容不足时固定在视口底部，内容过多时跟随在页面末尾。
• 避免横向滚动：移除container的width:100vw，利用flex的默认拉伸特性让container自动占满body宽度，完美适配滚动条的存在。
• 页脚居中对齐：用margin:0 auto替代固定的左右margin，不管屏幕宽度怎么变化，footer都能和中间栏精准对齐，同时保持水平居中。

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