滚动时阻止内容div与重叠标题div的差异

Question

嗨，我有两个div。

<div id="header"> 
    -- some random html content here -- 
</div> 

<div id="content"> 
    1 
    2 
    3 
    4 
    5 
    ... 
    ... 
    ... 
    ... 
    ... 
    ... 
    ... 
    ... 
    ... 
    ... 
    ... 
    ... 
    ... 
    ... 
    ... 
    ... 
    ... 
    ... 
    ... 
    ... 
    ... 
    ... 
    ... 
    ... 
    ... 
    ... 
    ... 
    ... 
    ... 
    some long content that needs scrolling. 
</div> 

这是我的css。

#header { 
     vertical-align:middle; 
     position:fixed; 
     top:0ex; 
     width:800px; 
     height: 48px; 
     background-color: #FFFFFF; 
     z-index: 10; 
    } 

    #content { 
     text-align:center; 
     margin-left:auto; 
     margin-right:auto; 
     width: 800px; 
     margin-top: 24px; 
    } 

1. 我想窗口滚动条滚动仅主体内容。我想避免更改身体标记的CSS，因为我的部分是整个页面的子部分。
2. 我不希望“内容”div覆盖/重叠“标题”div。 （头部应该保持固定并始终出现在顶部用户应该能够滚动身体的内容而不会覆盖/重叠头部

Answer 1

你的问题有点令人困惑，但是我从中得到的是你需要的滚动页面的一部分，并保持它的一部分不滚动？使用位置：固定，而不是位置：绝对应该让你的div“这里有一些随机的HTML内容”，它会阻止它滚动下来。身体，给它的background-color:white值。我做了一个工作示例here

Answer 2

#header { 
    vertical-align:middle; 
    /* position:absolute; */position:fixed; 
} 
z-index: 
    top:0ex; 
    width:800px; 
}