极客观点
项目管理
HarmonyOS
（图1）div.wrap 上下出现一段空白，浏览器窗口的滚动条滚到下面可以看到下面也有一条等长的空白，似乎与顶栏高度相同。
在设置border 之后可以消除（图2），加上box-sizing:border-box可以去掉浏览器滚动条。
怀疑跟wrap 内部的子元素有关。初学者，为了实现效果一边搜一边做，混用了一堆东西~
页面代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DocTalk</title>
<link rel="stylesheet" href="css/dtdefault.css" />
</head>
<body>
<div class="wrap">
<div class="top-bar">
<div class="extra-btn">
</div>
<div class="title">
<div class="text-wrap">
<strong><span class="title-text">TITLE TEXT 标题栏</span></strong>
</div>
</div>
</div>
<div class="content-box">
<p>JIFJRIJFIJRIJF</p>
<p>JIFJRIJFIJRIJF</p>
<p>JIFJRIJFIJRIJF</p>
<p>JIFJRIJFIJRIJF</p>
<p>JIFJRIJFIJRIJF</p>
<p>JIFJRIJFIJRIJF</p>
<p>JIFJRIJFIJRIJF</p>
<p>JIFJRIJFIJRIJF</p>
<p>JIFJRIJFIJRIJF</p>
<p>JIFJRIJFIJRIJF</p>
<p>JIFJRIJFIJRIJF</p>
<p>JIFJRIJFIJRIJF</p>
<p>JIFJRIJFIJRIJF</p>
<p>JIFJRIJFIJRIJF</p>
<p>JIFJRIJFIJRIJF</p>
<p>JIFJRIJFIJRIJF</p>
<p>JIFJRIJFIJRIJF</p>
<p>JIFJRIJFIJRIJF</p>
<p>JIFJRIJFIJRIJF</p>
<p>JIFJRIJFIJRIJF</p>
<p>JIFJRIJFIJRIJF</p>
<p>JIFJRIJFIJRIJF</p>
<p>JIFJRIJFIJRIJF</p>
<p>JIFJRIJFIJRIJF</p>
<p>JIFJRIJFIJRIJF</p>
<p>JIFJRIJFIJRIJF</p>
</div>
</div>
</body>
</html>
CSS:
html, body {
margin: 0;
height: 100%;
width: 100%;
font-size: 12pt;
}
.wrap {
position: relative;
/* wrap 最大高宽比4:3, 屏幕居中 */
height:100vh;
max-width: 75vh;
margin:0 auto 0 auto;
/* debug */
box-sizing: border-box;
border: solid 1px;
}
.top-bar {
box-sizing: border-box;
position: absolute;
top: 0;
height:2rem;
width:100%;
background: seashell;
border-bottom: solid 2px;
}
.top-bar div {
vertical-align: top;
}
.extra-btn {
display: inline-block;
box-sizing: border-box;
border-style: solid;
border-width: 0 0 0.8rem 2rem;
border-left-color: maroon;
border-bottom-color: transparent;
height: 100%;
width:2rem;
transition: border-left-color 0.2s;
transition-timing-function: ease-out;
}
/*
.extra-btn:hover {
border-left-color: slategray;
}
*/
.extra-btn:active {
border-left-color: violet;
}
.title {
position: absolute;
display: inline-block;
height: 100%;
left: 2rem;
right: 0;
}
/* 实现标题文字居中 */
.title .text-wrap {
display: flex;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
justify-content: center;/*水平居中*/
align-items:center; /*垂直居中*/
}
.title-text {
font-size: 1.25rem;
font-family:"Times New Roman";
}
.content-box {
box-sizing: border-box;
width:100%;
height:calc(100% - 2rem);
margin-top:2rem;
padding-right: 8px; /*y滚动条的空间*/
overflow-y: scroll;
overflow-x: hidden;
background: seashell;
}
/*自定义content-box y滚动条*/
.content-box::-webkit-scrollbar
{
width: 8px;
background-color: #F5F5F5;
}
.content-box::-webkit-scrollbar-track
{
border-radius: 2px;
background-color: #F5F5F5;
}
.content-box::-webkit-scrollbar-thumb
{
border-radius: 2px;
background-color: #555;
}将.wrap 定义中那行border 设置删除，或将border 宽度设为零就会导制wrap 上下出现空白。
- 去掉wrap 边框，出现空白
- 加上边框后上部紧贴窗口
emmm~老实说这问题我完全不知道该用什么关键词去搜~~
因为你content-box 给了margin-top
父元素是下面情况之一，所以会发生margin重叠：
1.父元素非块状格式化上下文元素
2.父元素没有border-top值
3.父元素没有padding-top值
4.父元素和子元素之间没有inline元素分隔
所以表现为好像是wrap给了margin-top