为何15%-70%-15%三列布局无法占满网站全部宽度？

算力阿峰

2026-8-5

问题原因与解决方案

核心原因

你的三列布局未占满宽度，主要源于以下几点：

仅给Flex子元素设置width时，Flexbox默认的flex-shrink:1属性可能在某些场景下压缩元素宽度，导致总宽度不足100%。
若你期望三列占满整个视口，body上的max-width:960px会限制整体宽度，当屏幕大于960px时，布局会被限制在960px内而非铺满视口。
CSS中的navbar选择器写错（应为.navbar），虽不影响布局，但会导致导航栏样式无法正确应用。

修正代码

CSS修改部分

body {
  width: 100%;
  /* 若要占满整个视口，移除下面这行；若保留最大宽度，三列会在960px内铺满 */
  /* max-width: 960px; */
  margin: 0;
}

div.content {
  width: 100%;
  display: flex;
  gap: 0; /* 消除列之间的默认空隙 */
}

div.column1 {
  flex: 0 0 15%; /* 强制固定宽度：不拉伸、不收缩、基础宽度15% */
  background-color: aqua;
  box-sizing: border-box; /* 确保padding/border不会增加总宽度 */
}

div.column2 {
  flex: 0 0 70%; /* 同理固定中间列宽度 */
  background-color: green;
  box-sizing: border-box;
}

/* 修正导航栏选择器 */
.navbar {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 0.5rem 1rem;
}

.navbar-text {
  display: inline-block;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}