将文字放在横幅下

Question

所以我正在设计一个网站，我在该横幅的中心创建了一个带有文本的横幅/标题图像，我希望我的所有主要内容都在横幅下面（横幅是覆盖整个横幅的类型）页面，以便您向下滚动以查看内容。但是，主要内容不会自动向下或向上，具体取决于标题的大小，因为我将宽度设置为100％，因此它会根据大小调整大小窗口，所以有人可以帮助解决这个问题，以便它与标题/横幅保持相同的比例吗？ HTML代码：

 <div id="banner">
    <h1 id="head">head</h1>
    <img id="logo" src="Logo.jpg" alt="logo and banner"/>
</div>
<div id="everythingElse">
    <a href="#test">Scroll</a>
    <p>Content</p>
</div>

CSS代码：

#head{
text-align: center;
position: absolute; 
top: 4%; 
left: 0; 
width: 100%;
font-size: 100px
}

#logo{
width: 104%;
}

#banner{
position: absolute; 
width: 100%; /* for IE 6 */
top: 0;
left: 0;
right: 0;
min-width: 1200px;
}

#everythingElse{
position: fixed;
width: 100%;
top: 75%;
}

Answer 1

不要使用绝对定位。如果browser support可以接受，请使用100vh的高度，否则请使用100%并确保您的body和html元素包含在该规则中。