你能告诉我如何将屏幕水平分成两半吗？这是我的尝试，但高度=100%有点不起作用。(我打算覆盖整个屏幕(我怎样才能让它工作？非常感谢。
<!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>
.t7{width: 50%; height: 100%; background-color: #506970; }
</style>
</head>
<body>
<div class=t7>aaa</div>
<div class=t7>bbb</div>
</body>
</html>html和body标记的宽度和高度属性都应设置为100%。默认情况下，高度不会是100%，这就是为什么这些元素不会垂直展开的原因。附带说明一下，您可能还想将边距(特别是正文上的边距(设置为零。
此外，当您试图使用100%的宽度时，元素之间的空白可能会导致问题。由于您使用的是div元素，因此需要将其"display"属性设置为"inline block"。默认情况下，它们使用"block"，这会在元素后面(有效地(导致换行，因此这两个元素不会并排。
试试这个：
<!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>
html, body { width: 100%; height: 100%; padding: 0; margin: 0; }
.t7{width: 50%; height: 100%; background-color: #506970; display: inline-block; }
</style>
</head>
<body>
<div class=t7>aaa</div><div class=t7>bbb</div>
</body>
</html>在这种情况下，屏幕高度可以使用vh单位。vh–相对于视口高度的1%。
你的代码看起来是这样的：
.html
<div class="top"></div>
<div class="bottom"></div>
.css
.top, .bottom {
height: 50vh;
}
因此，屏幕将被水平拆分为两半。
要使CSSheight属性使用百分比，父元素必须具有定义的高度。因此，要解决此问题，必须将<body>的高度设置为100%。但为了实现这一点，您还必须将<html>的高度设置为100%。
html, body { height: 100% }
另一个选项是使用视口宽度/高度vw/vh测量，而不是基于百分比的测量。
.t7 { width: 50vw; height: 100vh; ... }