Bootstrap设置100%高度无效，两列等高布局问题求助

这个问题我太熟了！你遇到的核心问题是百分比高度的继承链断了——HTML和body默认没有设置100%高度，导致你后面给容器、行、列设置的100%高度根本没有参照对象，自然不会生效。只有当里面有内容时，元素被内容撑开，背景图才会跟着显示出来。

下面是具体的解决方案，一步步帮你搞定：

1. 先打通高度继承的根节点 #

HTML和body是页面最顶层的容器，必须先给它们设置100%高度，否则所有子元素的百分比高度都会变成无效值：

html, body {
  height: 100%;
  margin: 0; /* 去掉默认边距，避免出现不必要的滚动条 */
}

2. 让容器和行都继承100%高度 #

你的container-responsive（如果是Bootstrap 3+版本，更推荐用标准的container-fluid）和row也需要设置100%高度，才能让列有可以继承的高度：

#content {
  height: 100%;
}
#content .row {
  height: 100%;
  margin: 0; /* 可选：去掉row默认的负margin，避免横向滚动 */
}

3. 让列占满行的高度，同时优化背景图属性 #

给左右两列设置100%高度，再给右侧的背景图容器加上合适的背景属性，确保背景图能铺满整个列：

/* 让所有列都占满父级行的高度 */
#content .row > div[class^="col-"] {
  height: 100%;
}

/* 右侧背景图容器的专属样式 */
.bg-image-column {
  background-image: url('你的图片路径');
  background-size: cover; /* 按比例铺满容器，避免拉伸变形 */
  background-position: center center; /* 背景图居中显示 */
  background-repeat: no-repeat;
}

完整代码示例 #

<!DOCTYPE html>
<html>
<head>
  <!-- 引入Bootstrap CSS -->
  <link rel="stylesheet" href="bootstrap.css">
  <style>
    html, body {
      height: 100%;
      margin: 0;
    }
    #content {
      height: 100%;
    }
    #content .row {
      height: 100%;
      margin: 0;
    }
    #content .row > div[class^="col-"] {
      height: 100%;
    }
    .bg-image-column {
      background-image: url('your-image.jpg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
  </style>
</head>
<body>
  <div class="container-responsive" id="content">
    <div class="row">
      <div class="col-lg-6 col-md-6 col-sm-6">
        <!-- 左侧内容区域 -->
      </div>
      <div class="col-lg-6 col-md-6 col-sm-6 bg-image-column">
        <!-- 这里不需要额外内容，背景图会自动撑满整个列的高度 -->
      </div>
    </div>
  </div>
</body>
</html>

额外提示 #

• 如果用的是Bootstrap 4/5，列类可以简化为col-6，但核心的高度继承逻辑完全一致。
• 如果你不想裁剪背景图，可以把background-size: cover换成background-size: contain，但可能会在容器边缘出现空白区域，根据需求选择即可。

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