我有以下内容: http://jsfiddle.net/B6dFk/embedded/result/
摘录:
HTML:
<div id="aboutback">
This is a background
</div>
<div id="workback">
This is another background
</div>
<div id="wrapper">
<div id="innerwrapper">
<div id="nav">
<div id="about" class="menu1">
<p>About</p>
</div>
<div id="aboutsub">
<div id="team" class="menu2">
<p>Team</p>
</div>
<div id="experience" class="menu2">
<p>Experience</p>
</div>
<div id="difference" class="menu2">
<p>Difference</p>
</div>
</div>
<div id="work" class="menu1">
<p>Work</p>
</div>
<div id="worksub">
<div id="services" class="menu2">
<p>Services</p>
</div>
<div id="ourprocess" class="menu2">
<p>Our Process</p>
</div>
</div>
<div id="portfolio" class="menu1">
<p>Portfolio</p>
</div>
<div id="contact" class="menu1">
<p>Contact</p>
</div>
</div>
<div id="outerviewer">
<div id="innerviewer">
<p>
Filler
</p>
</div>
</div>
</div>
CSS
#aboutback
{
position: absolute;
background: #11ac92;
min-height: 100%;
width: 100%;
top: 0;
z-index: -1;
}
我希望 #aboutback
和 #workback
始终占据整个背景。这些将包含我将使用 jquery 制作动画的图像。
问题是,当窗口不是整页时(因此会出现滚动条)并且向下滚动时,您会看到绝望的白色虚无。
值得注意的是,我已经尝试设置 body
标签的位置,这会改变效果但不会修复它。例如,position:absolute;
会将所有内容推向左侧,并在右侧留下一个空白区域。
请问有什么简单的解决办法吗?
最佳答案
body{
height:100%;
overflow:hidden;
}
关于html - 制作一个像背景一样的div全屏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21745077/