Width webpage does not fill the screen

Question

i'm writing a webpage and i can't make the div elements to full the screen.

I'm using a mac OSX and Safari, Google Chrome and Firefox browsers to view the page.

This is the my code inside the body:

* {
  margin: 0px;
  padding: 0px;
  border: 0px;
}

body {
  background-color: grey;
  height: 100%;
  position: absolute;
  margin: 0px;
  padding: 0px;
}

.register {
  display: table;
  width: 100%;
  min-height: 25%;
}

.FAQ {
  display: table;
  width: 100%;
  height: 25%;
}

.sponsors {
  display: table;
  width: 100%;
  height: 25%;
}

.footer {
  display: table;
  width: 100%;
  height: 25%;
}

<div class="register"></div>
<div class="FAQ"></div>
<div class="sponsors"></div>
<div class="footer"></div>

@ashishsingh he's using position:absolute, so it's if there is no content inside — Temani Afif, Aug 11 '18 at 14:13
whoa.. let me check how my solution was working then.. thanks — ashish singh, Aug 11 '18 at 14:18

score 0 · Answer 1 · answered Aug 11 '18 at 14:12

0

add this line to each div

table-layout:fixed;

for example

.register{
    display: table;
    width: 100%;
    min-height: 25%;
   table-layout:fixed; /* this line was added */
  }

answered Aug 11 '18 at 14:12

ashish singh

6,526
2
15
35

it would be intresting to find the *why* of this fix :) – Temani Afif Aug 11 '18 at 14:20
and what is more strange is that you don't need to add this to all the divs, only one div will do the trick – Temani Afif Aug 11 '18 at 15:20

Temani Afif · Answer 2 · 2018-08-11T14:17:53.297

You didn't specify a width to the body element and since you made it positioned and there is no content inside its width will by default be 0.

As a side note, you see the grey color cover the whole screen due to background propagation and not because the body is already full width, so this may create confusion.

Here is the initial code with background color of html changed so you can clearly see that the body has 0 width:

* {
  margin: 0px;
  padding: 0px;
  border: 0px;
}
html {
 background:pink;
}
body {
  background-color: grey;
  height: 100%;
  position: absolute;
  margin: 0px;
  padding: 0px;
}

.register {
  display: table;
  width: 100%;
  min-height: 25%;
  background: red;
}

.FAQ {
  display: table;
  width: 100%;
  height: 25%;
  background: blue;
}

.sponsors {
  display: table;
  width: 100%;
  height: 25%;
  background: green;
}

.footer {
  display: table;
  width: 100%;
  height: 25%;
  background:yellow;
}

<div class="register"></div>
<div class="FAQ"></div>
<div class="sponsors"></div>
<div class="footer"></div>

And if you add width:100% to the body it will get fixed:

* {
  margin: 0px;
  padding: 0px;
  border: 0px;
}

body {
  background-color: grey;
  width: 100%;
  height: 100%;
  position: absolute;
  margin: 0px;
  padding: 0px;
}

.register {
  display: table;
  width: 100%;
  min-height: 25%;
  background: red;
}

.FAQ {
  display: table;
  width: 100%;
  height: 25%;
  background: blue;
}

.sponsors {
  display: table;
  width: 100%;
  height: 25%;
  background: green;
}

.footer {
  display: table;
  width: 100%;
  height: 25%;
  background:yellow;
}

<div class="register"></div>
<div class="FAQ"></div>
<div class="sponsors"></div>
<div class="footer"></div>

Width webpage does not fill the screen

2 Answers2