我想在顶部栏之后划分页面，但它不会改变。 我想设计一个有三个部分的页面，但该页面也包含菜单栏或头栏。 我试过像下面这样的东西，但它没有显示任何东西在顶部栏。
null
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial;
color: white;
}
.split {
color: white;
height: 80%;
width: 30%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
.left {
left: 0;
background-color: #111;
}
.right {
right: 0;
background-color: red;
}
#top {
height: 20%;
width: 100%;
}
</style>
</head>
<body>
<div id="top">
<h2>Three Equal Columns</h2>
</div>
<div class="split left">
</div>
<div class="split right">
</div>
</body>
</html>null
一般来说，您不应该使用这样的固定位置概念，但除此之外，您需要为设置节以在顶部为顶部栏留出空间，此外，您不应该在白色背景上使用top:20%。拆分color:white，因为这样文本将保持不可见（白色背景上的白色文本）
null
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial;
}
.split {
height: 80%;
width: 30%;
position: fixed;
z-index: 1;
top: 20%;
overflow-x: hidden;
padding-top: 20px;
}
.left {
left: 0;
background-color: #111;
}
.right {
right: 0;
background-color: red;
}
#top{
height:20%;
width:100%;
}
</style>
</head>
<body>
<div id="top">
<h2>Three Equal Columns</h2>
</div>
<div class="split left">
</div>
<div class="split right">
</div>
</body>
</html> 