如何在不留边距的情况下开始固定 header 下面的内容 div？
[英]How to start content div below fixed header without giving margin?
问题描述
Div with id header is fixed but the div with the id content is going behind the header div. 
id 为 header 的 div 是固定的，但具有 id 内容的 div 位于 header div 后面。 What can I do if I want to fix this issue without adding margin-top to the content div?如果不在content div中添加margin-top来解决这个问题怎么办？
I tried adding margin-top but it occurs the problem with other elements in responsive view.我尝试添加 margin-top 但它在响应视图中出现其他元素的问题。
My code我的代码
<!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>
2 个解决方案
解决方案1
0 2022-02-11 12:33:32
body { margin: 0; padding: 0; } #header { color: white; font-size: 18px; background-color: black; text-align: center; position: fixed; z-index: 1; 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; position: relative; top: 55px; padding-top:10px; } <,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> </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>
解决方案2
0 已采纳 2022-02-11 12:39:32
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; } #a { content: ""; display: block; height: 40px; } <body> <div id="header"> <div> <p>This is header</p> </div> </div> <div id="a"></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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何将粘性 div 保留在固定标题下方 - How to keep a sticky div below a fixed header
修复下面的标题阻止内容 - fixed header blocking content below
在固定标题下显示内容 - Displaying content below a fixed header
固定标题与下面的内容重叠 - Fixed header overlaps the content below
具有固定子标题和下方可滚动内容的固定标题 - Fixed header with fixed subheader and scrollable content below
固定标头div，下方具有可滚动的div - fixed header div with scrollable div below
如何在滚动正文内容时给定上边距以避免透明固定Header下的内容显示？ - How to give fixed top margin while scrolling the body content to avoid the content display under the transparent fixed Header?
如何在具有动态高度的固定div标题之后设置div内容的样式 - How to style a div content after fixed div header with dynamic height
如何使用固定的 Div 标题创建滚动内容 Div - How to Create Scrolling Content Div with Fixed Div Header
如何使div固定且有保证金？ - How to make div fixed and with margin?
相关标签