像背景一样制作div全屏

时间:2014-02-13 04:09:59

标签: html css css-position fullscreen

我有以下内容: 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;将向左推动所有内容并在右侧留下空白区域。

请问任何简单的解决方案?

2 个答案:

答案 0 :(得分:0)

 body{
   height:100%;
   overflow:hidden;
 }

答案 1 :(得分:0)

html{height:100%;} 


     body{height:100%;}
     divclass{height:100%;}