CSS实现w3-half区块等高且全屏高度的解决方案咨询

嘿，我来帮你搞定这个问题！你已经给body和html设置了height: 100%，这是个非常关键的基础步骤，接下来用Flexbox或者CSS Grid都能轻松实现你要的效果——两个半屏区块自动等高，并且初始状态下填满整个屏幕。

方法一：用Flexbox实现（兼容性强，推荐） #

Flexbox是处理这类等高布局的绝佳选择，它能自动让子元素拉伸至父容器的高度，完全不需要手动设置子元素的高度。

首先，我们需要一个包裹两个区块的父容器，给它设置以下样式：

• height: 100%：继承html/body的视口高度
• display: flex：开启Flex布局
• margin: 0：去掉body默认的外边距，避免出现不必要的滚动条

然后给两个子区块设置flex: 1 0 50%，这个属性的意思是：

• 1：子元素会平分剩余空间（确保宽度各占50%）
• 0：不允许子元素收缩
• 50%：基础宽度设为50%

整合你提供的现有代码，完整示例如下：

body, h1, h2, h3, h4, h5, h6 { 
  font-family: "Raleway", sans-serif;
} 
body, html { 
  height: 100%; 
  line-height: 1.8; 
  margin: 0; /* 新增：去掉默认外边距 */
} 
.w3-bar .w3-button { 
  padding: 16px; 
} 
.container { 
  position: relative; 
  width: 90%; 
} 
.img { 
  border: none; 
  height: auto; 
  max-width: 100%; /* 补全你没写完的max-width */
}

/* 新增：半屏等高区块相关样式 */
.split-wrapper {
  height: 100%;
  display: flex;
}
.split-section {
  flex: 1 0 50%;
  padding: 20px; /* 可选：添加内边距避免内容贴边 */
  box-sizing: border-box; /* 确保内边距不影响宽度 */
}
/* 可选：给两个区块加背景色区分 */
.split-section:first-child {
  background-color: #f0f0f0;
}
.split-section:last-child {
  background-color: #e0e0e0;
}

对应的HTML结构可以这样写：

<div class="split-wrapper">
  <div class="split-section">
    <!-- 第一个半屏的内容 -->
    <h2>左侧区块</h2>
    <p>这里是左侧半屏的内容，会自动和右侧等高</p>
  </div>
  <div class="split-section">
    <!-- 第二个半屏的内容 -->
    <h2>右侧区块</h2>
    <p>这里是右侧半屏的内容，哪怕内容多少不一样，高度也会和左侧保持一致</p>
  </div>
</div>

方法二：用CSS Grid实现（更简洁） #

如果你不需要兼容特别老的浏览器，CSS Grid会更简单，只需要给父容器设置两行一列的网格布局即可：

/* 替换Flexbox的split-wrapper样式 */
.split-wrapper {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr; /* 两列各占1份空间 */
  gap: 0; /* 可选：设置区块之间的间距 */
}

子区块的样式可以不用改，Grid会自动让它们等高且平分宽度，是不是超省心？

关键点说明 #

• 必须确保html和body的height: 100%，并且去掉默认的margin，否则父容器无法完全填满视口，还可能出现滚动条。
• 用box-sizing: border-box可以让内边距和边框不会撑开元素的宽度，保证两个区块严格各占50%。
• 如果区块内容过多超出视口，你可以给.split-section添加overflow-y: auto，这样内容会自动出现垂直滚动条，同时区块高度依然保持一致。

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