Question

我的项目有以下要求：

页眉已固定在页面顶部
内容区域为白色背景，高度为100％
当内容小于屏幕高度时，没有滚动条
必须支持IE7 +（IE的JS修复可以）
当内容比屏幕高度更高时，滚动它应该保持在白色内容区域内（不要在标题下面）。

这是我的基本HTML：

<div class="wrap">
    <div id="header">header</div>
</div>
<div class="wrap" id="content">content</div>

CSS：

body{background:#C0DEED url('https://si0.twimg.com/images/themes/theme1/bg.png') repeat-x 0px -80px fixed;}
html,body{height:100%;}
.wrap{width:300px; margin:0 auto;}
#header{position:fixed; background:#aaa; top:10px; width:300px;}
#content{height:100%; background:white; margin-top:40px}

示例：http://jsfiddle.net/zw3WS/

第一个问题是如何让内容具有100％的高度，而不是在标题下，并且仍然没有不必要的滚动条？

其次，如果内容比屏幕高，我怎么才能让它只在白色空间中滚动，而不允许内容像目前那样在to bar下滚动？

Answer 1

对于“仅在空白区域”滚动，您可以通过在包装元素上设置position: fixed，然后将标题和内容元素绝对定位在内部来实现：

body{
  background:#C0DEED url('https://si0.twimg.com/images/themes/theme1/bg.png') repeat-x 0px -80px fixed;
  overflow: hidden; /* no scrollbars for page body */
}

.wrap {  
  width: 300px;
  position: fixed;
  top: 10px;
  left: 50%; /* for horizontal centering */
  margin-left: -150px; /* for vertical centering */
  bottom: 0;
}

#header{
  position: absolute; 
  background:#aaa; 
  top: 0;
  left: 0;
  right: 0;
}

#content{
  background:white; 
  position: absolute;
  bottom: 0;
  top: 30px;
  left: 0;
  right: 0;
  overflow: auto; /* this makes the scrollbar appear inside #content */
}

演示：http://jsbin.com/osipin/1/edit

要在页面正文中滚动，您需要在标记中添加两个元素：标题的背景和内容的背景。

标题背景的目的是在内容向下滚动时覆盖内容，否则它将显示在标题下方。您用来覆盖内容的内容与页面的背景相同。您必须正确调整此bg元素的大小，使其填充视口的宽度，并且是内容区域上边距的高度。真实标题可以使用设置宽度和margin: 0 auto在此bg元素中水平居中。

内容背景元素应该是一个在内容之前的空元素，并且具有固定的位置。其目的是确保即使内容短于视口高度，白色区域也会延伸到页面底部。

你的新CSS看起来像这样：

body, .header-bg {
  background:#C0DEED url(https://si0.twimg.com/images/themes/theme1/bg.png) repeat-x 0 -80px fixed;
}

.wrap {
  width:300px;
  margin: 0 auto;
}

.header-bg {
  position: fixed;
  top: 0px;
  left: 0;
  right: 0;
  height: 40px;
}

#header {
  background:#aaa;
  width:300px;
  margin: 10px auto 0;
}

.content-bg {
 background: #FFF;
  position: fixed;
  width: 300px;
  top: 40px;
  bottom: 0;
  z-index: -1;
}

你的新标记是这样的：

<div class="wrap">

  <div class="header-bg">
    <div id="header">header</div>
  </div>

  <div class="content-bg"></div>

    <div id="content">
      CONTENT
    </div>

</div>

演示：http://jsbin.com/osipin/4/edit

100％高度，保证金和动态内容

1 个答案: