2

I don't quite understand why the footer (and the header) doesn't take up all the space? I divide the <body> part in 3 sections: 1) div header, 2) div wrapper, 3) div footer (so that I could control each part separately).

Div wrapper (which is supposed to be narrow) 

.wrapper {
display: block;
width: 100%;
max-width: 980px;
margin: 20px auto;
padding: 20px;
border: 1px solid black;}

Div footer (which is supposed to be 100% wide on the screen)

.footer {
margin: 0px;
padding: 0px;
background-color: black;
height: 200px;
color: orange;
width: 100%;}

How can I make it cover all the space (like on this website, the header takes all the space, but the main content part is way more narrow).

Thank you in advance!

The footer (which is black) doesnt take up all the space and leaves some background

The footer (which is black) doesnt take up all the space and leaves some background

Johannes
  • 64,305
  • 18
  • 73
  • 130
Nickle Sydney
  • 37
  • 5

2 Answers2

1

Seems like you didn't reset the default margin for body which most browsers add by default. To do so, add this:

body {
  margin:0;
}
Johannes
  • 64,305
  • 18
  • 73
  • 130
0

There's more than one way to solve this and there's more than one reason for which the problem could be generated in the first place, so don't tread if different people give you different answers :)

The problem I most usually see when this comes up is generated by a father element not having full width, or having a padding that's bigger than zero. (Probably the body.)

If that's not where the problem lies, then try with these media queries (One at a time).

width: -webkit-fill-available;

width: 100vw
Zaltron
  • 3
  • 2