предотвратить содержимое 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 для тега body, так как мой раздел является подразделением всей страницы.
2. Я не хочу, чтобы "content" div накладывал/перекрывал "header" 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; 
}