How to fill 100% of remaining height?

Question

+--------------------+
|                    |
|                    |
|                    |
|                    |
|         1          |
|                    |
|                    |
|                    |
|                    |
+--------------------+
|                    |
|                    |
|                    |
|                    |
|         2          |
|                    |
|                    |
|                    |
|                    |
+--------------------+

Contents of (1) as shown above are unknown, as it may increase or decrease in dynamically generated pages. The second div (2) as shown above, should fill the remaining space.

here is an example of my html

<div id="full">
<!--contents of 1 -->
<div id="someid">
<!--contents of 2 -->
</div>
</div>

css...

#full{width: 300px; background-color: red;}
#someid{height: 100%;}

Or is this method wrong? How should I do this? please see my demo and show me my mistake.

Do you want the height of 1 + 2 to be the exact height of the viewport? Or 2 is the same size as the viewport and it scrolls down equal to the height of 1? — thgaskell, Mar 13 '13 at 03:54
height of 1 I don't know, and remaining of 1 then 2 be full height. — Bhojendra Rauniyar, Mar 13 '13 at 03:56
@C-Link What do you mean by `height:100%` ? Do you mean the div should occupy the remaining height? — Mr_Green, Mar 13 '13 at 04:37
@C-Link remaining height of the page or the remaining scrollheight inside the page? — Mr_Green, Mar 13 '13 at 05:28
@C-Link I can't help you but just update your question so that others can help you. From next time please explain your post clearly.. :) — Mr_Green, Mar 13 '13 at 06:02

score 69 · Accepted Answer · edited May 29 '16 at 12:50

69

You should be able to do this if you add in a div (#header below) to wrap your contents of 1.

If you float #header, the content from #someid will be forced to flow around it.
Next, you set #header's width to 100%. This will make it expand to fill the width of the containing div, #full. This will effectively push all of #someid's content below #header since there is no room to flow around the sides anymore.
Finally, set #someid's height to 100%, this will make it the same height as #full.

JSFiddle

HTML

<div id="full">
    <div id="header">Contents of 1</div>
    <div id="someid">Contents of 2</div>
</div>

CSS

html, body, #full, #someid {
  height: 100%;
}

#header {
  float: left;
  width: 100%;
}

Update

I think it's worth mentioning that flexbox is well supported across modern browsers today. The CSS could be altered have #full become a flex container, and #someid should set it's flex grow to a value greater than 0.

html, body, #full {
  height: 100%;
}

#full {
  display: flex;
  flex-direction: column;
}

#someid {
  flex-grow: 1;
}

edited May 29 '16 at 12:50

Mosh Feu

28,354
16
88
135

answered Mar 13 '13 at 04:36

thgaskell

12,772
5
32
38

please se my **[demo](http://jsfiddle.net/Y7PhV/99/) and rectify it where is mistake. – Bhojendra Rauniyar Mar 13 '13 at 06:05
I think you are right but my problem couldn't be solved but anyway this helped me to understand about this. So I'm accepting your answer. – Bhojendra Rauniyar Mar 14 '13 at 02:59
Your answer works beautifully, but I am slightly confused as to why it works: If you play with the background colors, you can see that `#someid` is ALWAY equal to the height of `#full`, despite the height of `#header`. Logically, the content of `#someid` should start at the top of `#full`. Why does `#header` push the content down? – Hunter S Oct 10 '15 at 19:00
Well, it works beautifully until you try giving a child of `#someid` a height of 100%. – Hunter S Oct 10 '15 at 19:11
3

The problem with this is it makes `#someid` the same height as `#full`, so `#someid` overflows `#full` by the height of `#header`. It doesn't set `#someid` to 100% of the _remaining_ space. If you set `overflow: scroll;` on `#someid` you would see the problem. – Old Pro Nov 17 '15 at 22:25
3

Yeah, this answer should be updated. It was a hack that abused the fact that float pushed content down, which was a "good enough" at the time when dealing with browsers that didn't support things like `calc` and `flexbox` layouts weren't widely supported. Look how far we've come in less than 3 years! – thgaskell Nov 18 '15 at 00:25
It's an hack, but does not solve the problem, the bottom div's height is 100% screen height and it overflows. Not the ideal solution for the problem at hand and very misleading. – Giridhar Karnik May 25 '16 at 07:56
JS will do it... nice alternative though.... but just in case if we have to do set any child element height based on the parent div (the second div, which is pushed to the bottom) it'll cause problems, didn't see the update though... flex is a good solution but with very less fallback.., Have to do some heavy lifting through JS – Giridhar Karnik May 26 '16 at 06:14
@Olof_t The flexbox solution shown here does work in IE11. – hashchange Feb 20 '17 at 07:56
The flexbox solution here works only on IE11, all other browsers provide a scroll. – Dan Nov 23 '17 at 08:41
The flex solution works in 2023.. – RiaanP Mar 09 '23 at 14:23

Serdalis · Answer 2 · 2013-03-13T03:54:15.970

15

To get a div to 100% height on a page, you will need to set each object on the hierarchy above the div to 100% as well. for instance:

html { height:100%; }
body { height:100%; }
#full { height: 100%; }
#someid { height: 100%; }

Although I cannot fully understand your question, I'm assuming this is what you mean.

This is the example I am working from:

<html style="height:100%">
    <body style="height:100%">
        <div style="height:100%; width: 300px;">
            <div style="height:100%; background:blue;">

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

Style is just a replacement for the CSS which I haven't externalised.

edited Mar 13 '13 at 03:54

answered Mar 13 '13 at 03:48

Serdalis

10,296
2
38
58

which element do you want to be 100% height? and in relation to what? – Serdalis Mar 13 '13 at 03:52
(2) should be 100% in height. Your method may work in without wrapper but I'm using a wrapper. – Bhojendra Rauniyar Mar 13 '13 at 03:54
if you want `someid` to also be 100% then you have to add 100% to it, and set the container to 100% too. I've edited my question to show this. – Serdalis Mar 13 '13 at 03:56
I already said it may not work coz I use a wrapper and then setting it to 100% also don't work. – Bhojendra Rauniyar Mar 13 '13 at 03:59
Try the example I posted, You might just be missing some thing along the hierarchy which is screwing it up. – Serdalis Mar 13 '13 at 04:00
Ok! I'm sure now you are right but din't find what happened please check this and rectify. **[Demo](http://jsfiddle.net/Y7PhV/99/)** – Bhojendra Rauniyar Mar 13 '13 at 04:17

Ernesto Hegi · Answer 3 · 2016-02-16T15:34:32.290

8

    html,
    body {
        height: 100%;
    }

    .parent {
        display: flex;
        flex-flow:column;
        height: 100%;
        background: white;
    }

    .child-top {
        flex: 0 1 auto;
        background: pink;
    }

    .child-bottom {
        flex: 1 1 auto;
        background: green;
    }

    <div class="parent">
        <div class="child-top">
          This child has just a bit of content
        </div>
        <div class="child-bottom">
          And this one fills the rest
        </div>
    </div>

edited Feb 16 '16 at 15:34

answered Feb 15 '16 at 12:32

Ernesto Hegi

333
3
3

Could you please elaborate a bit on this code-only answer? Thanks! – arkascha Feb 15 '16 at 13:59
Hello @arkascha, I've just updated my post with a working code example. Thanks for the suggestion. Cheers. – Ernesto Hegi Feb 16 '16 at 15:35
1

If you put this into a React code sandbox, this doesn't work – libby Apr 02 '21 at 20:35
@libby for react, you have to add the `height: 100%` for the root div too – shim-kun Mar 10 '23 at 21:02

score 4 · Answer 4 · answered Aug 11 '15 at 22:14

This can be done with tables:

<table cellpadding="0" cellspacing="0" width="100%" height="100%">
    <tr height="0%"><td>
        <div id="full">
            <!--contents of 1 -->
        </div>
    </td></tr>
    <tr><td>
        <div id="someid">
            <!--contents of 2 -->
        </div>
    </td></tr>
</table>

Then apply css to make someid fill the remaining space:

#someid {
    height: 100%;
}

Now, I can just hear the angry shouts from the crowd, "Oh noes, he's using tables! Feed him to the lions!" Please hear me out.

Unlike the accepted answer which accomplishes nothing aside from making the container div the full height of the page, this solution makes div #2 fill the remaining space as requested in the question. If you need that second div to fill the full height allotted to it, this is currently the only way to do it.

But feel free to prove me wrong, of course! CSS is always better.

score 1 · Answer 5 · answered May 25 '16 at 11:29

I know this is a late entry but even in 2016 I am surprised by the complete lack of IE support for flex (currently 11 is the only one to support it and its majorly buggy at that http://caniuse.com/#feat=flexbox) which from a business perspective is not great! So I think until IE is shut down the best solution and most cross-browser friendly one surely must be a JS/Jquery one?

Most sites already use Jquery and a very simple example (for my code) is:

$('#auto_height_item').height($(window).height() - $('#header').height());

You can obviously replace window and header and let the basic math do the work. Personally I'm still not convinced about flex yet...

score 1 · Answer 6 · answered Mar 07 '19 at 15:53

I know this is an old question, but nowadays there is a super easy form to do that, which is CCS Grid, so let me put the divs as example:

<div id="full">
  <div id="header">Contents of 1</div>
  <div id="someid">Contents of 2</div>
</div>

then the CSS code:

.full{
  width:/*the width you need*/;
  height:/*the height you need*/;
  display:grid;
  grid-template-rows: minmax(100px,auto) 1fr;
 }

And that's it, the second row, scilicet, the someide, will take the rest of the height because of the property 1fr, and the first div will have a min of 100px and a max of whatever it requires.

I must say CSS has advanced a lot to make easier programmers lives.

score 0 · Answer 7 · answered May 07 '15 at 18:57

0

I added this for pages that were too short.

html:

<section id="secondary-foot"></section>

css:

section#secondary-foot {
    height: 100%;
    background-color: #000000;
    position: fixed;
    width: 100%;
}

answered May 07 '15 at 18:57

Repressed Radar

144
1
7

I tried this in @BhojendraNepal's JSFiddle, but couldn't get it to work. Could you show in you own JSFiddle or describe where you added your element? – Dag Høidahl May 07 '15 at 19:39

score 0 · Answer 8 · answered Jul 03 '18 at 21:34

0

Create a div, which contains both divs (full and someid) and set the height of that div to the following:

height: 100vh;

The height of the containing divs (full and someid) should be set to "auto". That's all.

answered Jul 03 '18 at 21:34

H.A.

350
5
14

How to fill 100% of remaining height?

8 Answers8

Linked

Related