如何将屏幕水平分为两半占满全屏？height:100%不生效怎么解决

失效原因 #

• 百分比高度依赖父元素的显式高度定义，默认html、body元素高度由内容撑开，没有设置满屏高度，因此子元素的height:100%没有可继承的高度基准，无法生效
• 块级元素默认纵向排列，即使设置了50%宽度也会自动换行，无法水平并排

调整代码（Flex 实现，兼容性好） #

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hey I am a title</title>
    <style>
    /* 重置根元素与body的默认样式，设置满屏高度 */
    html, body {
      height: 100%;
      margin: 0;
      display: flex;
    }
    .t7 {
      width: 50%;
      height: 100%;
      background-color: #506970;
    }
    .t7:last-child {
      background-color: #697050;
    }
    </style>
</head>
<body>
<div class="t7">aaa</div>
<div class="t7">bbb</div>
</body>
</html>

其他可选实现 #

如果不想用Flex，也可以用浮动实现，修改样式部分即可：

html, body {
  height: 100%;
  margin: 0;
}
.t7 {
  float: left;
  width: 50%;
  height: 100%;
  background-color: #506970;
}

如果你的需求是上下垂直分两半（沿水平中线切分），只需把.t7的width:50%改为height:50%，去掉flex或浮动配置即可。

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