将文字置于横幅下

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元素包含在该规则中。