Question

我的布局包含3个主要内容：#nav，#footer和#shell。

在我的#shell div内部是居中，垂直滚动的内容。 #nav和#footer div已固定，位于#shell之上。 #shell div在初始加载时在#nav下方还有一些上边距。

我想尝试隐藏#shell内容，以便当用户向下滚动并#shell点击导航时，内容隐藏在#nav下方。我还想将#shell内容隐藏在#footer div下方。整个身体都有背景图像，因此我无法为#nav或#footer div提供纯色，因为我需要让图像保持可见。

http://jsfiddle.net/mr0vc3rq/1/

Answer 1

请看这个：

fiddle

我不确定这是不是你想要的。但如果不是，我认为它接近答案。只需调整它就可以达到预期的效果。

<强> CSS

#shell {
    top: 60px;
    position: absolute;
    left:0; 
    right: 0;
    bottom: 90px;
    width: 720px;
    max-width: 100%;
    margin: 25px auto;
    overflow-y: scroll;
    box-sizing: border-box;
}

Answer 2

DEMO

   html {
    background: #f1f1f1 url('http://www.designbolts.com/wp-content/uploads/2014/03/Blue-Blur-Background1.jpg')  no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
header{ background:url('http://www.designbolts.com/wp-content/uploads/2014/03/Blue-Blur-Background1.jpg')fixed top repeat; width:100%; min-height:60px; position:fixed; background-size:100%;width:100%;max-height:80px; top:0px; left:0px; z-index:2000;}
#nav {
    position: relative;
    z-index: 999;
    width:auto;
    height: 40px;
    top: 20px;
    left: 20px;
    right: 20px;
    background: #333;   
    opacity: 0.7;
    filter: alpha(opacity=70);
    color: #fff;
    text-align: center;
}


/* FOOTER */
#footer-wrap {
    position: fixed;
    background:url('http://www.designbolts.com/wp-content/uploads/2014/03/Blue-Blur-Background1.jpg')fixed 50% 100% repeat;
    z-index: 999;
    width: 100%;
    height: 90px;
    bottom: 0px;
    left: 0;
}
#footer {
    width: 400px;
    height: 50px;
    margin: 0 auto;
    margin-bottom:40px;
    background: #000;
    opacity: 0.7;
    filter: alpha(opacity=70);

}

#shell {
    width: 720px;
    margin: 70px auto;
}

隐藏溢流，100％高度

2 个答案:

fiddle