Div is only as tall as content

Question

Like I said the div is only as tall as the content. I have the div:

  <div class="body-container">
  <p>Hello</p>

  </div>

And the CSS:
body-container { width: 100%; height: 100%; background-color: blue; }
However, the background only appears on the Hello paragraph. This is super annoying as I want the background to cover the entire page! Thanks for the help.

height:100% requires an height on parent for calculation. if it is a direct child of body, then you need also: `html , body {height:100%}` Html will use window's height , body will take 100% from html height's value and so on .body-container will use body's height ;) You can also use :`height:100vh` to use calculation from window's height — G-Cyrillus, Sep 10 '17 at 00:12
You wanted to write .body-container (with the dot) and not simply body-container, right? — Vincenzo Maggio, Sep 10 '17 at 00:14
This question already has a very good answer on SO. https://stackoverflow.com/questions/7049875/height-100-not-working — TeaCoder, Sep 10 '17 at 00:31
@TeaCode I looked all over and couldn't find something like this! Thanks! It resolved it! — , Sep 11 '17 at 02:21

score 1 · Answer 1 · answered Sep 10 '17 at 00:14

1

Try change height property to:

height: 100vh;

answered Sep 10 '17 at 00:14

JuanDM

1,250
10
24

DjaouadNM · Accepted Answer · 2017-09-10T00:54:50.093

First, you style a class by adding a dot before it, like .body-container.
As for your problem, by setting a height and width of 100% to the .body-container, html and body must also have width and height of 100% in order for the .body-container to take full size, like:

html, body {
  width: 100%;
  height: 100%;
}
.body-container {
  width: 100%;
  height: 100%;
  background-color: blue;
}

<div class="body-container">
  <p>Hello</p>

</div>

You can also force full size using viewport units vh and vw:

.body-container {
  width: 100vw;  /* 1vw = 1% of screen width */
  height: 100vh; /* 1vh = 1% of screen height */
  background-color: blue;
}

<div class="body-container">
  <p>Hello</p>

</div>

Div is only as tall as content

2 Answers2