Pełnoekranowy obszar div

Question

Jakie jest najlepsze podejście do tworzenia elementu div, który zajmie całą szerokość ekranu, bez względu na rozdzielczość? Próbuję dodać "górny" pasek i dolny obszar "stopki" z elementami div, które mają czarne tło i stylizowaną obramowanie, które utworzę z małym obrazem i powtórzę. Z jakiegoś powodu moje próby prowadzą do małych przestrzeni na górze i bokach div?

Moja znaczników jest podobna do:

<div id="top"> 

Top bar stuff 

</div> 

<div id="pagewrap"> 

All the page content 

</div> 

CSS

#top { 

width: 100%; 
margin: 0; 
padding: 0; 
background-color:#000 

Answer 1

Wystarczy użyć top:0; i left: 0;, aby wyeliminować również padding: 0. Nie używaj top: 0; dla innych div oprócz top, użyj left: 0; dla innego div, aby wyeliminować lewą spację.

#top { 
    width: 100%; 
    margin: 0; 
    padding: 0; 
    background-color:#000 
    top: 0; 
    left: 0; 
} 

Answer 2

Upewnić się, że body ma padding i margin zestaw do 0 w CSS.

Answer 3

Zazwyczaj jest to znacznik body mający pewne wypukłości i/lub marginesy. Spróbuj dodać:

body { 
    padding: 0; 
    margin: 0; 
} 

Jeśli to działa, może warto rozważyć using a normalization stylesheet która rozwiązuje tego typu kwestii, jak również wiele innych pokrewnych rodzajów spraw.