当缩小浏览器窗口时，如何阻止顶部横幅重叠主要内容。目前，我将主要内容设置为从顶部开始110px，但是我宁愿根据横幅的大小对其进行动态间隔。
* {
margin: 0;
padding: 0;
}
div#banner {
position: absolute;
top: 0;
left: 0;
background-color: #b4ecb4;
width: 100%;
overflow-x: hidden;
}
div#banner-content {
width: 100%;
margin: 0 auto;
padding: 10px;
border: 0px solid #000;
}
div#main-content {
padding-top: 110px;
}<div id="banner">
<div id="banner-content">
<center>
<h1>
<big>
My name
</big>
</h1>
<small>
<p>sub heading here</p>
</small>
</center>
</div>
</div>
<div id="main-content">
<center>
<p>Main page content goes here</p>
</center>
</div>将<body>设置为display: flex和flex-direction: column。给横幅position: relative并删除overflow-x: hidden。
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
position: relative;
display: flex;
flex-direction: column;
}
div#banner {
position: relative;
top: 0;
left: 0;
background-color: #b4ecb4;
width: 100%;
/* overflow-x: hidden; */
display: block;
}
div#banner-content {
width: 100%;
margin: 0 auto;
padding: 10px;
border: 0px solid #000;
}
div#main-content {
/* padding-top: 110px; */
overflow-y: auto;
}
div#main-content center {
height: 5000px;
}<div id="banner">
<div id="banner-content">
<center>
<h1>
<big>
My name
</big>
</h1>
<small>
<p>sub heading here</p>
</small>
</center>
</div>
</div>
<div id="main-content">
<center>
<p>Main page content goes here</p>
</center>
</div>