等高Div容器双列布局问题：背景与浮动异常及背景色丢失求助

我来帮你搞定这两个布局痛点，咱们一步步拆解问题并调整代码：

核心问题分析 #

1. Wrapper背景无法延伸到底部 + 浮动列宽度异常：浮动元素会脱离文档流，导致父容器（比如你的container）无法被撑开，wrapper的背景自然只能覆盖到父容器的初始高度，而非整个内容高度。另外你把header和内容放在两个独立的container里，这种割裂的结构很容易导致宽度计算混乱。
2. H1与Nav之间的空隙 + 背景色丢失：h1标签默认自带上下外边距，这就是空隙的来源；同时你的box类里border: 0 10em是无效写法，float:top也不存在，这些错误会导致样式失效或异常。

调整后的完整代码 #

CSS部分

body { 
  background-color: rgb(77,77,77); 
  background-image: url("images.jpg"); 
  background-attachment: fixed; 
  margin: 0; 
  padding: 0; 
  height: 100%; 
}
.wrapper { 
  background-color: rgba(253,251,220,0.9); 
  width: 80%; 
  min-height: 100vh; /* 用100vh确保至少占满整个视口高度 */
  padding: 0; 
  margin: auto; 
  position: relative;
}
.container { 
  min-height: 100%; 
}
/* 用伪元素清除浮动，让容器包裹所有浮动子元素 */
.container::after {
  content: "";
  display: table;
  clear: both;
}
.aside_box { 
  float: left; 
  width: 20%; 
}
.box { 
  background-color: rgba(253,251,220,0.9); 
  padding: 0 10em; /* 把错误的border写法改成padding，实现左右内边距效果 */
}
.box-70-100 { 
  float: right; 
  width: 80%; 
  box-sizing: border-box; /* 确保内边距/边框不会超出百分比宽度 */
}
nav ul { 
  list-style-type: none; 
  margin: 0; 
  padding: 0; 
  background-color: rgba(237, 164, 37, 0.8); 
  overflow: hidden; 
}
/* 清除h1默认外边距，解决和nav的空隙问题 */
h1 {
  margin: 0;
  padding: 1em 0; /* 用内边距替代外边距，灵活控制标题间距 */
}

HTML部分

<div class="wrapper">
  <div class="container">
    <header id="head">
      <h1>..</h1>
      <nav> <!-- 改用标准<nav>标签，语义化更清晰 -->
        <ul>
          <!-- 这里添加你的导航项，比如<li><a href="#">首页</a></li> -->
        </ul>
      </nav>
    </header>
    <article>
      <div class="aside_box"> <!-- 把侧边栏和主内容放在同一层级，保证浮动布局正确 -->
        <aside>
          <div class="box">
            <h2>FQA</h2>
          </div>
        </aside>
      </div>
      <div class="box-70-100">
        <div class="box">
          <!-- 这里放你的主内容 -->
        </div>
      </div>
    </article>
  </div>
</div>

关键修改说明 #

1. 清除浮动解决背景塌陷：给container添加::after伪元素执行clear: both，让父容器能完全包裹浮动的子元素，wrapper的背景就能自然延伸到内容底部。
2. 统一容器结构：把header和内容合并到同一个container里，避免布局割裂，确保宽度计算准确。
3. 修复元素空隙：重置h1的默认外边距为0，改用内边距控制间距，彻底消除标题和导航之间的空白。
4. 修正无效CSS：删除不存在的float:top属性，把错误的border写法改成padding，添加box-sizing: border-box保证百分比宽度不受内边距影响。
5. 优化高度设置：用min-height:100vh替代100%，确保wrapper至少占满整个视口高度，避免内容过短时背景无法覆盖全屏。

如果之后需要让两列强制等高，推荐改用Flexbox布局（把container设为display:flex，直接给两列分配宽度即可），比浮动布局更简洁可靠。

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