Set height 100% on absolute div

Question

I am facing a problem with overlaying a 100% height div. I could use position fixed to solve the cover, but that's not really what I want because you should be able to scroll down on the 'cover' > so people with lower resolutions than mine can see the entire content.

Code example:

HTML

<body>
<div>Overlay example text</div>
</body>

CSS

body {
    float: left;
    height: 3000px;
    width: 100%;
}
body div {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: yellow;
}

The problem: The div's height 100% only contains 100% of the webbrowser/viewport, but I want it to cover the entire body.

This is the number one problem with CSS..`min-height` doesn't really promise what the name imply :/ — vsync, Apr 06 '13 at 11:05

Pete · Answer 1 · 2021-09-29T08:35:08.180

82

try adding

position:relative

to your body styles. Whenever positioning anything absolutely, you need one of the parent or ancestor containers to be positioned relative (or anything other than the default position of static) as this will make the item be positioned absolute to the ancestor container that is positioned.

As you had no positioned elements, the css will not know what the div is absolutely positioned to and therefore will not know what to take 100% height of

edited Sep 29 '21 at 08:35

answered Jan 08 '13 at 15:01

Pete

57,112
28
117
166

Thanks for the useful information, altho I had to put a float: left on it aswell to work :) – Nworks Jan 08 '13 at 15:17
3

the float left was in your original code and makes no difference: http://jsfiddle.net/rvKPq/3/ – Pete Jan 08 '13 at 15:20
10

For anyone reading: I think this should be the correct answer (and have a higher upvote), as it was first to correctly provide a solution and it adds an explanation to the solution and not just a code paste. – Arthur Weborg Nov 23 '15 at 23:32
I also think that this is the best answer. – yotka Feb 12 '16 at 17:53
reversing the logic of this answer, i added position: absolute to the child .... and bingo! why it works I have no idea!!! – danday74 Sep 08 '21 at 00:04

score 67 · Accepted Answer · edited Jun 16 '16 at 19:51

67

http://jsbin.com/ubalax/1/edit .You can see the results here

body {
    position: relative;
    float: left;
    height: 3000px;
    width: 100%;
}
body div {
    position: absolute;
    height: 100%;
    width: 100%;
    top:0;
    left:0;
    background-color: yellow;
}

edited Jun 16 '16 at 19:51

Uli Köhler

13,012
16
70
120

answered Jan 08 '13 at 15:04

ashley

2,749
5
26
38

5

Okay, so everyone were on their way to a correct answer but that float: left and position: relative on body solved it. Thanks! – Nworks Jan 08 '13 at 15:15
4

I have ZERO idea why this works, but it does...this is one of these sad moments when you discover a reality where phisics cease to work. – vsync Apr 06 '13 at 11:12
23

It's not the `float` that makes any difference, it's the `position: relative;`. `position: absolute;` works according to a relative parent, that's why this works. "The absolutely positioned element is positioned relative to nearest positioned ancestor(non static)." More info here: https://developer.mozilla.org/en-US/docs/Web/CSS/position – Cthulhu Jan 20 '16 at 15:59
@Cthulhu is right. I have **no** idea why anyone would add `float: left` to body. I mean it doesn't do any harm, but still... – Eduard Luca Nov 23 '16 at 16:36
@Cthulhu What you left out about `position:absolute` is that if there is no positioned ancestor, then the element is positioned relative to its containing block. In this case, that would be `body` anyway, so setting `position:relative` on `body` isn't needed. `height` on `body` is what is making this work. – Scott Marcus Mar 10 '17 at 17:46
@ScottMarcus That is correct for this specific example, but I doubt everyone that lands on this page have the exact same problem. If that would be the case, I have no idea why anyone would use the selector `body div`. :-) – Cthulhu Mar 13 '17 at 16:09
@Cthulhu It is correct for every example. My point is simply that you left out an important piece of information in your description of `position:absolute` and also that the positioning isn't even the issue with the `height` not working. When a `height` is set to a percentage, all of the ancestors heights must also be set. – Scott Marcus Mar 13 '17 at 19:46
6

it doesn't make sense to have `3000px` as it will add scrolling and unnecessary space, fix? – brauliobo Nov 17 '17 at 09:14
Thanks to these comments. For a second there, I thought my div had be yellow for the style to work. – Randell Oct 10 '18 at 04:59
I also have no idea why this works, but it does, and you can set float:left, position:relative on a wrapper element to achieve the same effect without affecting the body – Leon Feb 23 '20 at 19:26

score 13 · Answer 3 · answered Jan 08 '13 at 15:08

13

Few answers have given a solution with height and width 100% but I recommend you to not use percentage in css, use top/bottom and left/right positionning.

This is a better approach that allow you to control margin.

Here is the code :

body {
    position: relative;
    height: 3000px;
}
body div {

    top:0px;
    bottom: 0px;
    right: 0px;
    left:0px;
    background-color: yellow;
    position: absolute;
}

answered Jan 08 '13 at 15:08

Jerome Cance

8,103
12
53
106

This is the solution that worked for me. I never knew you could stretch an image by position. – Daniel H. Mar 10 '18 at 03:41

score 6 · Answer 4 · edited Apr 03 '19 at 12:02

Complete stretching (horizontal/vertical)

The accepted answer is great. Just want to point out some things for others coming here. Margins are not necessary in these cases. If you want a centered layout with a specific "Margin", you can add them to the right and left, like so:

.stretched {
  position: absolute;
  right: 50px;  top: 0;  bottom: 0; left: 50px;
  margin: auto;
}

This is extremely useful.

Centering div (vertical/horizontally)

As a bonus, absolute centering which can be used to get extremely simple centering:

.centered {
  height: 100px;  width: 100px;  
  right: 0;  top: 0;  bottom: 0; left: 0;
  margin: auto;
  position: absolute;
}

score 6 · Answer 5 · answered Sep 26 '16 at 11:29

6

Instead of using the body, using html worked for me:

html {
   min-height:100%;
   position: relative;
}

div {
   position: absolute;

   top: 0px;
   bottom: 0px;
   right: 0px;
   left: 0px;
}

answered Sep 26 '16 at 11:29

Misja

91
1
6

Setting both top and bottom to 0 was what did it for me – schu34 Oct 24 '18 at 17:24

score 1 · Answer 6 · edited Feb 24 '16 at 12:50

Another solution without using any height but still fills 100% available height. Checkout this e.g on the codepen. http://codepen.io/gauravshankar/pen/PqoLLZ

For this html and body should have 100% height. This height is equal to the viewport height.

Make inner div position absolute and give top and bottom 0. This fills the div to available height. (height equal to body.)

html code:

<head></head>

<body>
  <div></div>
</body>

</html>

css code:

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  position: relative;
}

html {
  background-color: red;
}

body {
  background-color: green;
}

body> div {
  position: absolute;
  background-color: teal;
  width: 300px;
  top: 0;
  bottom: 0;
}

Set height 100% on absolute div

6 Answers6

Complete stretching (horizontal/vertical)

Centering div (vertical/horizontally)

Linked