/ / HTML LAYOUT (Basic) - problem z CSS - html, css

HTML LAYOUT (Basic) - problem z CSS - html, css

Mam mały problem z css z podstawowym układem html.

To, czego się chce, to: (bez treści)

http://jsfiddle.net/cge89ef4/1/

Z treścią: http://jsfiddle.net/cge89ef4/2/

Jak widać, stopka pozostaje zablokowana i nie przechodzi na dół strony, ponieważ również tego chcę.

CSS:

body {
background-color: blue;
color:red;
margin: 75px auto 50px;
height:100%;
}
div#fixedheader {
position:absolute;
top:0px;
left:0px;
width:100%;
height:75px;
background:yellow;
}
div#fixedfooter {
position:absolute;
bottom:0px;
height:50px;
left:0px;
width:100%;
background:black;
}

Jakikolwiek sposób to naprawić?

Dzięki

Odpowiedzi:

1 dla odpowiedzi № 1

AKTUALIZACJA

Zmieniono znaczniki DOM na HTML5 dla nagłówkai Footer, dodałem też trochę JavaScript, który reaguje na zmianę rozmiaru okna. Jeśli wysokość okna jest większa niż wysokość dokumentu, stopka jest ustawiona absolutnie do dołu, JEŚLI stopka nie jest ustawiona FIXED nad treścią Również jeśli przewiniesz w dół, a nagłówek nie będzie już widoczny, zostanie on również poprawiony nad zawartością http://jsfiddle.net/cge89ef4/8/

UPDATE END

Tutaj http://jsfiddle.net/cge89ef4/3/

zmień wartość absolutną na stałą dla stopki

position:fixed;

Jeśli nie chcesz, aby stopka nakładała się na treść w dowolnym momencie, dodaj margines lub dopełnienie do kontenera zawartości z wysokością stopki.

Ponadto możesz szukać tagów HTML5, ponieważ istnieją już gotowe nazwy tagów dla nagłówka, stopki itp

Dla przykładu:

<header></header>
<article><section></section></article>
<aside></aside>
<footer></footer>

0 dla odpowiedzi nr 2

użyj tego stylu do swojego ciała

body{
position: relative;
margin: 0;
}

0 dla odpowiedzi № 3

Tylko upewnij się, że dajesz position: fixed do nagłówka i jeśli chcesz, aby stopka nie była ustawiana przez cały czas, użyj znaku a min-height.

body {
background-color: blue;
color: red;
margin: 75px auto 50px;
height: 100%;
}
div#fixedheader {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 75px;
background: yellow;
}
div#fixedfooter {
position: fixed;
bottom: 0px;
height: 50px;
left: 0px;
width: 100%;
background: black;
}

Skrzypce: http://jsbin.com/behajakuse/1/edit?html,css,output