Div height 100% and expands to fit content

Question

I have a div element on my page with its height set to 100%. The height of the body is also set to 100%. The inner div has a background and all that and is different from the body background. This works for making the div height 100% of the browser screen height, but the problem is I have content inside that div that extends vertically beyond the browser screen height. When I scroll down, the div ends at the point at which you had to begin scrolling the page, but the content overflows beyond that. How do I make the div always go all the way to the bottom to fit the inner content?

Here's a simplification of my CSS:

body {
    height:100%;
    background:red;
}

#some_div {
    height:100%;
    background:black;
}

Once I scroll the page, the blackness ends and the content flows onto the red background. It doesn't seem to matter whether I set the positon to relative or absolute on the #some_div, the problem occurs either way. The content inside the #some_div is mostly absolutely positioned, and it is dynamically generated from a database so its height can't be known in advance.

Edit: Here is a screenshot of the problem: div problem

This was asked a few weeks ago. I'll see if I can find that question. I believe I commented on it. *edit* I believe your question is similar to this: http://stackoverflow.com/questions/9398313/html-body-is-smaller-than-its-contents/9398562#9398562 — jmbertucci, Mar 02 '12 at 17:42
You want all my thousands of lines of php code, css and javascript? I posted the portion of css that was relevant to the question... — Joey, Mar 02 '12 at 18:09
NECROPOST IS A GO: setting the overflow property generally fixes issues like these where content inside a div is stretching past it (`overflow: hidden;`, `overflow: scroll;`, etc). — AlbertEngelB, May 07 '13 at 21:35
http://stackoverflow.com/questions/1230354/how-to-get-a-div-to-resize-its-height-to-fit-container — Ciro Santilli OurBigBook.com, Sep 28 '15 at 06:54

João Pimentel Ferreira · Accepted Answer · 2018-04-02T16:01:56.873

395

Here is what you should do in the CSS style, on the main div

display: block;
overflow: auto;

And do not touch height

edited Apr 02 '18 at 16:01

answered Jul 23 '13 at 10:33

João Pimentel Ferreira

14,289
10
80
109

7

Worked great. I needed to add `height: 100%` to `html, body` and the container div to make it fill the height when there was not enough content though. – Nico Huysamen Aug 29 '13 at 08:22
amazing solution but you can actually touch the height if the objetive is something like a responsive window fitting – Alexis Rabago Carvajal Aug 18 '15 at 03:19
3

Is the `display: block;` needed? Divs are already block-level elements. – Max Heiber Sep 09 '15 at 16:46
4

it adds an inner scrollbar for me (both horizontal and vertical) – Nathan H Oct 22 '15 at 08:11
If you still get the parent element a little bit taller than the children elements, then check for any extra spaces and/or ` `, remove them. Also try to adjust the line-height. For example I've put `line-height: 0`, because I didn't need text, just to show an image. – Zorgatone Nov 26 '15 at 11:52
DON'T touch height! I had "height: auto" and it messed up my expanding div. removed it and everything worked great – Gambai Jul 12 '16 at 17:31
Instead of div expanding, I get a scrollbar. Is there a fix to this? – R.S.K Nov 23 '16 at 22:37
When I set `overflow: auto;` it just sets the height of my content to zero and it becomes invisible. – Aaron Franke Nov 24 '18 at 04:28
Great for
(
... ) + "stacks" as well. Every time a label wrapped, it skewed the position of the next label (even in its own div!) without this. I'm sure I'm "doing HTML + CSS wrong", but I do the best I can and this was VERY helpful.
– Roboprog Apr 16 '19 at 01:05
@NathanH I also got an unwanted scrollbar that can be hidden with `overflow: hidden;` – Peopleware Mar 05 '20 at 08:44

score 87 · Answer 2 · edited Feb 09 '16 at 12:17

87

Set the height to auto and min-height to 100%. This should solve it for most browsers.

body {
  position: relative;
  height: auto;
  min-height: 100% !important;
}

edited Feb 09 '16 at 12:17

Igor Ivancha

3,413
4
30
39

answered Dec 01 '12 at 22:46

Matthew Sprankle

1,626
1
19
26

4

IMO, this answers the question "How do I make the div always go all the way to the bottom to fit the inner content?" better than the currently marked answer, which simply turns on overflow-scrolling rather than ensuring the div/body expands to fit its content. +1 – Jammerz858 Aug 03 '14 at 12:04
Worked for my case. Thx! – Tyson Nero Apr 27 '17 at 14:58
It may be worth noting that for some reason, it doesn't work if `height` is `100%` and `min-height` is `auto` - I would expect these to be interchangeable in this case, but looks like they aren't. – peabrainiac Dec 21 '19 at 13:07
1

sweet solution. – Elazar Zadiki Aug 05 '20 at 13:51
alternative for `min-height:100%` : you can use `min-height:92%` or some percentage to fit the container to the screen. This worked in my case. – Sastrabudi Apr 22 '23 at 15:07
I had to change to min-height: 100vh -> parend div color resizes with browser // child div grows with content and no overflow into parent. No extra scrollbars :) – nogood Aug 17 '23 at 13:44

score 16 · Answer 3 · answered Jun 15 '14 at 02:59

Usually this problem arises when the Child elements of a Parent Div are floated. Here is the Latest Solution of the problem:

In your CSS file write the following class called .clearfix along with the pseudo selector :after

.clearfix:after {
content: "";
display: table;
clear: both;
}

Then, in your HTML, add the .clearfix class to your parent Div. For example:

<div class="clearfix">
    <div></div>
    <div></div>
</div>

It should work always. You can call the class name as .group instead of .clearfix , as it will make the code more semantic. Note that, it is Not necessary to add the dot or even a space in the value of Content between the double quotation "". Also, overflow: auto; might solve the problem but it causes other problems like showing the scroll-bar and is not recommended.

Source: Blog of Lisa Catalano and Chris Coyier

how do you set a default height if you do it this way ? My textarea is like one line height before you type anything. — Poyraz Kürkçüoğlu, Jul 30 '21 at 08:46

score 16 · Answer 4 · answered Sep 14 '21 at 10:23

16

#some_div {    
  height: fit-content;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content

answered Sep 14 '21 at 10:23

A Jar of Clay

5,622
6
25
39

This should have more upvotes. – CristianMoisei Oct 15 '22 at 14:20
Easy solution and does not have scrollbars! Well done! – Arjan Singh Feb 25 '23 at 22:34

score 11 · Answer 5 · edited Feb 11 '19 at 19:43

11

This question may be old, but it deserves an update. Here is another way to do that:

#yourdiv {
    display: flex;
    width:100%;
    height:100%;
}

edited Feb 11 '19 at 19:43

jgillich

71,459
6
57
85

answered May 29 '18 at 02:47

user9459537

145
1
2
9

1

If you're going to post on an old question, using current values (AKA no prefixes on flex) is recommended. – jhpratt May 29 '18 at 03:05
1

Sorry I don't know what you are talking about. – user9459537 May 29 '18 at 04:23
1

Flex prefixes haven't been necessary for quite a while now. – jhpratt May 29 '18 at 05:04
And which ones are? – user9459537 May 31 '18 at 16:28
this should be the right answer, without affecting other divs and without !important anywhere. – alejandrosobko Dec 10 '22 at 16:36

score 10 · Answer 6 · edited Feb 09 '16 at 12:14

10

If you just leave the height: 100% and use display:block; the div will take as much space as the content inside the div. This way all the text will stay in the black background.

edited Feb 09 '16 at 12:14

Igor Ivancha

3,413
4
30
39

answered Mar 02 '12 at 17:42

RonnieVDPoel

101
6

Where did you use `display: block`? I don't see that in your question. – Lightness Races in Orbit Mar 02 '12 at 17:59
I added it to #some_div after Ronnie suggested it, but it didn't fix the problem. – Joey Mar 02 '12 at 18:02
1

Could you try adding float: none; to the same #some_div css – RonnieVDPoel Mar 04 '12 at 16:57
1

Instead of `float: none;`, use `clear:both;`. It does the same thing but is more cross-browser, @RonnieVDPoel – Cannicide Feb 03 '17 at 22:59

score 7 · Answer 7 · answered Mar 05 '12 at 10:55

Try this:

body { 
    min-height:100%; 
    background:red; 
} 

#some_div {
    min-height:100%; 
    background:black; 
}

IE6 and earlier versions do not support the min-height property.

I think the problem is that when you tell the body to have a height of 100%, it's background can only be as tall as the hieght of one browser "viewport" (the viewing area that excludes the browsers toolbars & statusbars & menubars and the window edges). If the content is taller than one viewport, it will overflow the height devoted to the background.

This min-height property on the body should FORCE the background to be at least as tall as one viewport if your content does not fill one whole page down to the bottom, yet it should also let it grow downwards to encompass more interior content.

score 4 · Answer 8 · answered Jun 11 '20 at 13:43

4

use flex

.parent{
    display: flex
}

.fit-parent{
    display: flex;
    flex-grow: 1
}

answered Jun 11 '20 at 13:43

Nagibaba

4,218
1
35
43

score 3 · Answer 9 · edited Feb 09 '16 at 11:51

Old question, but in my case i found using position:fixed solved it for me. My situation might have been a little different though. I had an overlayed semi transparent div with a loading animation in it that I needed displayed while the page was loading. So using height:auto / 100% or min-height: 100% both filled the window but not the off-screen area. Using position:fixed made this overlay scroll with the user, so it always covered the visible area and kept my preloading animation centred on the screen.

score 2 · Answer 10 · edited Apr 13 '22 at 14:45

2

In my case it worked only with:

height: auto;

You don't need to put display: block.

edited Apr 13 '22 at 14:45

Penny Liu

15,447
5
79
98

answered Jun 04 '21 at 11:11

Marc

23
5

score 1 · Answer 11 · answered Sep 22 '17 at 19:37

1

Modern browsers support the "viewport height" unit. This will expand the div to the available viewport height. I find it more reliable than any other approach.

#some_div {
    height: 100vh;
    background: black;
}

answered Sep 22 '17 at 19:37

devdrc

1,853
16
21

score 1 · Answer 12 · edited Jul 01 '20 at 14:57

1

Ok, I tried something like this:

body (normal)

#MainDiv { 
  /* where all the content goes */
  display: table;
  overflow-y: auto;
}

It's not the exact way to write it, but if you make the main div display as a table, it expands and then I implemented scroll bars.

edited Jul 01 '20 at 14:57

Run_Script

2,487
2
15
30

answered Apr 16 '18 at 02:03

alex

11
1

score 1 · Answer 13 · answered Oct 30 '18 at 13:24

1

Just add these two line in your css id #some_div

display: block;
overflow: auto;

After that you will get what your are looking for !

answered Oct 30 '18 at 13:24

Vikash Kumar

80
2
12

score 1 · Answer 14 · answered Jan 30 '20 at 15:21

OVERLAY WITHOUT POSITION:FIXED

A really cool way I've figured this out for a recent menu was setting the body to:

position: relative

and set your wrapper class like this:

#overlaywrapper {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: #00000080;
    z-index: 100;
}

This means that you don't have to set position fixed and can still allow for scrolling. I've used this for overlaying menu's that are REALLY big.

score 0 · Answer 15 · edited May 05 '14 at 07:18

I'm not entirely sure that I've understood the question because this is a fairly straightforward answer, but here goes... :)

Have you tried setting the overflow property of the container to visible or auto?

#some_div {
    height:100%;
    background:black; 
    overflow: visible;
    }

Adding that should push the black container to whatever size your dynamic container requires. I prefer visible to auto because auto seems to come with scroll bars...

score 0 · Answer 16 · answered Sep 25 '17 at 10:44

0

Even you can do like this

display:block;
overflow:auto;
height: 100%;

This will include your each dynamic div as per the content. Suppose if you have a common div with class it will increase height of each dynamic div according to the content

answered Sep 25 '17 at 10:44

ahmed sharief

83
2
13

display: table was the only thing that made it work for iphone as well for me. – Ferus Aug 17 '20 at 09:57

score 0 · Answer 17 · answered Dec 05 '19 at 06:53

0

You can also use

 display: inline-block;

mine worked with this

answered Dec 05 '19 at 06:53

Parthan_akon

219
3
10

Div height 100% and expands to fit content

17 Answers17

Linked