Как получить фиксированный заголовок с помощью css?

Question

это мой код, и когда страница имеет больше контента, когда мы прокручиваем заголовок движется слишком, то я попытался сделать позицию заголовка fixed но футер не прилипает к дну:/

html,body 
{ 
    margin: 0px; 
    height:100%; 
    min-height: 100%; 
    top: 0; 
    width: 100%; 
    position: absolute; 
} 
header 
{ 
    width: 100%; 
    background-color: #000000; 
    height: 8%; 
    min-height: 8%; 
} 
#container 
{ 
    min-height: 85%; 
    margin-top: 0.5%; 
} 
footer 
{ 
    bottom: 0; 
    background-color: #000000; 
    width: 100%; 
    height: 6%; 
    min-height: 6%; 
    position: relative; 

} 

Answer 1

Set position:fixed к footter

header 
{ 
    width: 100%; 
    background-color: #000000; 
    height: 8%; 
    min-height: 8%; 
    z-index:1000; 
    position:fixed; 
    /*.........^........*/ 
    top:0; 
} 
footer{ 
    bottom: 0; 
    background-color: #000000; 
    z-index:1000; 
    width: 100%; 
    height: 6%; 
    min-height: 6%; 
    position:fixed; 
    /*.........^........*/  
} 

Fiddle Demo

Answer 2

footer 
    { 
     position: fixed; 
     z-index: 300; 
     bottom: 0px; 
     left: 0px; 
     background-color: #000000; 
     width: 100%; 
     height: 6%; 
     min-height: 6%; 
    } 

Answer 3

JsFiddle

header 
{ 
    width: 100%; 
    background-color: #000000; 
    height: 8%; 
    min-height: 8%; 
    position: fixed; 
    top: 0; 
} 
footer 
{ 
    bottom: 0; 
    background-color: #000000; 
    width: 100%; 
    height: 6%; 
    min-height: 6%; 
    position: absolute; 
    color: #FFFFFF; 
} 

Здесь я уже упоминал height: 1000px; для вашего понимания ... вы можете изменить его ...

Answer 4

Попробуйте этот код:

DEMO

header 
{ 
    width: 100%; 
    background-color: #000000; 
    height: 8%; 
    min-height: 8%; 
    top: 0; 
    position: fixed; 
} 
footer 
{ 
    bottom: 0; 
    background-color: #000000; 
    width: 100%; 
    height: 6%; 
    min-height: 6%; 
    position: absolute; 

}