【发布时间】：2022-02-11 20:39:32
【问题描述】：
带有 id 标头的 div 是固定的，但带有 id 内容的 div 在标头 div 后面。如果我想在不向内容 div 添加 margin-top 的情况下解决此问题，该怎么办？
我尝试添加margin-top，但响应式视图中的其他元素出现问题。
我的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<style>
body {
margin: 0;
padding: 0;
}
#header {
color: white;
font-size: 18px;
background-color: black;
text-align: center;
position: fixed;
width: 100%;
top: 0;
opacity: 0.8;
}
#header div {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid grey;
}
#content {
background-color: orange;
}
</style>
</head>
<body>
<div id="header">
<div>
<p>This is header</p>
</div>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita facere iusto vel aperiam, maiores dignissimos magni quam, laudantium officiis cupiditate libero soluta eum consequuntur dolores blanditiis, in recusandae sequi incidunt.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita facere iusto vel aperiam, maiores dignissimos magni quam, laudantium officiis cupiditate libero soluta eum consequuntur dolores blanditiis, in recusandae sequi incidunt.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita facere iusto vel aperiam, maiores dignissimos magni quam, laudantium officiis cupiditate libero soluta eum consequuntur dolores blanditiis, in recusandae sequi incidunt.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita facere iusto vel aperiam, maiores dignissimos magni quam, laudantium officiis cupiditate libero soluta eum consequuntur dolores blanditiis, in recusandae sequi incidunt.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita facere iusto vel aperiam, maiores dignissimos magni quam, laudantium officiis cupiditate libero soluta eum consequuntur dolores blanditiis, in recusandae sequi incidunt.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita facere iusto vel aperiam, maiores dignissimos magni quam, laudantium officiis cupiditate libero soluta eum consequuntur dolores blanditiis, in recusandae sequi incidunt.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita facere iusto vel aperiam, maiores dignissimos magni quam, laudantium officiis cupiditate libero soluta eum consequuntur dolores blanditiis, in recusandae sequi incidunt.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita facere iusto vel aperiam, maiores dignissimos magni quam, laudantium officiis cupiditate libero soluta eum consequuntur dolores blanditiis, in recusandae sequi incidunt.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita facere iusto vel aperiam, maiores dignissimos magni quam, laudantium officiis cupiditate libero soluta eum consequuntur dolores blanditiis, in recusandae sequi incidunt.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita facere iusto vel aperiam, maiores dignissimos magni quam, laudantium officiis cupiditate libero soluta eum consequuntur dolores blanditiis, in recusandae sequi incidunt.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita facere iusto vel aperiam, maiores dignissimos magni quam, laudantium officiis cupiditate libero soluta eum consequuntur dolores blanditiis, in recusandae sequi incidunt.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita facere iusto vel aperiam, maiores dignissimos magni quam, laudantium officiis cupiditate libero soluta eum consequuntur dolores blanditiis, in recusandae sequi incidunt.</p>
</div>
</body>
</html>
【问题讨论】：
-
在
body上添加padding-top
标签： html css header css-position