Плавающий заголовок, есть ли лучший способ, чем мой?

Question

So heres My Fiddle

Ниже приведен код, и это прежде всего то, как я всегда делал плавающий заголовок. Я просто хотел знать, есть ли лучший способ сделать это, или новое ожидание того, как это сделать.

HTML

<div id="header"> 
    Header 
</div> 
<div id="page"> 
    Content is to be Displayed Here 
</div> 

CSS

#header { 
    height: 50px; 
    width: 100%; 
    background: #6cc3eb; 
    z-index: 990; 
    position: fixed; 
    top: 0; 
    left: 0; 
} 

#page { 
    height: 200px; 
    width: 100%; 
    margin: 50px 0 0 0; 
    background: #ddf2fc; 
} 

Любая помощь приветствуется.

Answer 1

Иногда, чтобы сделать его легче иметь дело с разрушающихся краями в верхней части содержания область, добавить overflow: auto к охватывающему блоку:

#page { 
    height: 200px; 
    width: 100%; 
    margin: 50px 0 0 0; 
    background: #ddf2fc; 
    overflow: auto; 
} 

Это заставляет #page, чтобы начать контекст форматирования блоков, что означает, что любое верхнее поле для первого дочернего элемента #page будет размещено на 50 пикселей вверху страницы. В зависимости от вашего дизайна это может быть выгодно.

Ссылка: http://www.w3.org/TR/CSS2/visuren.html#block-formatting

Смотрите пример с h1 по адресу: http://jsfiddle.net/audetwebdesign/uvRXZ/

Answer 2

Единственное изменение, которое я бы сделать, это использовать HTML5, тег

<header> 

вместо

<div id="header">