极客观点
项目管理
HarmonyOS
我有一个 html 页面，全部代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<title>Blog</title>
<style type="text/css">
* {margin:0;padding:0;border:0;}
body {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;font-size: 20px;}
.blog {width:90%;height:40vh;}
h1{font-size:44px;}
p{padding:10px 0;}
@media only screen and (max-width: 812px) {
.blog {
width: 80%;
height:60vh;
}
}
</style>
</head>
<body>
<div class="blog">
<h1>Blog</h1>
<p>12344</p>
<p>45677</p>
<p>56789</p>
<p>98213123213213</p>
</div>
</body>
</html>我想实现的是在所有的设备上（pc端和移动端），整个 body 的高度是 100% 满屏，blog 这个 div 垂直居中显示。
我现在这个在 pc 端还正常，可是在移动端右侧会出现滚动条，body 并不是 100% 高度。
请指导下，谢谢
你需要给
html标签也添加height:100%的样式。或者给body设置height:100vh的样式。但是会有其他问题，可以参考一下我早前的这个问答 移动端 body 高度为100vh 时，实际高度超过了视窗高度。