CSS: height- fill out rest of div?

Question

i wonder if this is possible with simple css or if i have to use javascript for this?

i have a sidebar on my website. a simple div#sidbar it's normally about 1024px high, but the height changes dynamically due to it's content.

so let's imaginge the following case:

<div id="sidebar">
   <div class="widget"></div> //has a height of 100px
   <div class="widget"></div> //has a height of 100px
   <div id="rest"></div> //this div should have the rest height till to the bottom of the sidebar
</div>

i want the div#rest to fill out the rest of the sidebar till it reaches the bottom of the div#sidebar.

is this possible with pure css?

score 35 · Answer 1 · edited Nov 16 '11 at 16:59

35

If you know the exact height of #widget (100px in your case), you can avoid using JavaScript by using absolute positioning:

#sidebar
{
height: 100%;
width: ...;
position: relative;
}

.widget
{
height: 100px;
}

#rest
{
position: absolute;
left: 0;
width: 100%;
top: 200px;
bottom: 0;
}

edited Nov 16 '11 at 16:59

sth

222,467
53
283
367

answered Feb 16 '11 at 16:39

Jirka

359
3
3

6

A good demonstration of this is available at http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/. This technique even works in IE7. – saluce Jul 10 '12 at 20:05
@ChristianNilsson fiddle doesn't work as expected in FF 49.0.2 – mlt Nov 19 '16 at 00:19

casablanca · Accepted Answer · 2010-08-05T02:53:46.303

7

What you want is something like 100% - 200px but CSS doesn't support expressions such as these. IE has a non-standard "expressions" feature, but if you want your page to work on all browsers, I can't see a way to do this without JavaScript. Alternatively, you could make all the divs use percentage heights, so you could have something like 10%-10%-80%.

Update: Here's a simple solution using JavaScript. Whenever the content in your sidebar changes, just call this function:

function resize() {
  // 200 is the total height of the other 2 divs
  var height = document.getElementById('sidebar').offsetHeight - 200;
  document.getElementById('rest').style.height = height + 'px';
};

edited Aug 05 '10 at 02:53

answered Aug 05 '10 at 02:35

casablanca

69,683
7
133
150

do you know the javascript way? – matt Aug 05 '10 at 02:36
Careful of flickering. This did not work well at all for creating an inset shadow. – Mar 04 '12 at 01:30
14

`100% - 200px` is possible with the [`calc`](https://developer.mozilla.org/en-US/docs/CSS/calc) CSS value. – Rob W Dec 22 '12 at 09:29
1

Wouldn't `height: 100%; margin-bottom: 200px;` do it? – MiniGod Jan 28 '13 at 23:35
@RobW: Or rather, *[will be possible](http://caniuse.com/#feat=calc)* on desktops when enough people stop using Windows XP (or enough XP users switch to Chrome or Firefox), as IE8 doesn't support it and that's the max IE for XP. IE8 and below account for ~30% of global web users at present (more like ~23% if you don't have to support China, but that's still nearly a quarter of potential visitors). Going to be a long wait, particularly for all those corporates who have the right to use XP until the EOL of Windows 7 as part of their volume license. :-) – T.J. Crowder Jun 25 '13 at 17:40
@RobW that should really be its own answer +1 – joneshf Jul 09 '13 at 20:51
@RobW its not just IE8 also some android browsers don't support it http://caniuse.com/#feat=calc – Peter Mar 24 '15 at 07:25

score 6 · Answer 3 · edited Apr 16 '14 at 02:53

6

I propose the table-element as an alternative:

+: clean CSS
+: avoiding javascript
-: table semantically misused
-: not the requested div-elements

edited Apr 16 '14 at 02:53

user253751

57,427
7
48
90

answered Sep 24 '13 at 16:16

table

69
1
1

score 4 · Answer 4 · answered May 21 '13 at 17:22

I came across this question while looking for an answer to a similar question, and I thought I'd illustrate calc. As of this post, calc is not yet supported cross-browser; however, you can check this link here to see if your target browsers are supported. I've modified matt's hypothetical case to use calc in an example on jsFiddle. Essentially it is a pure CSS solution that does what casablanca proposes in his answer. For example, if a browser supports calc, then height: calc(100% - 200px); would be valid as well as for similar properties.

score 0 · Answer 5 · answered Apr 05 '20 at 15:36

0

Sometimes a workaround might be:

#rest {
  height: 100%;
  padding-bottom: 200px;
}

The div itself will be too high, but because of the padding its content will have the right height.

answered Apr 05 '20 at 15:36

ChrisW

54,973
13
116
224

score -3 · Answer 6 · answered Aug 15 '11 at 22:14

you can do this with nested div tags. you have one specifying the width on the left, and then another left blank. To fill the rest of the other side you nest a 100% relative div inside the right side div. like so:

<div style="width:100%">
  <div style="width:300px;background-color:#FFFF00;float:left">
  </div>
  <div style="margin-left:300px">
    <div style="position:relative;left:0px;width:100%;background-color:#00FFFF">
    </div>
  </div>
</div>

score -5 · Answer 7 · answered Aug 05 '10 at 02:25

-5

Try

height: 100%;

or

height: auto;

answered Aug 05 '10 at 02:25

James Hulse

1,566
15
32

6

`100%` will overshoot the height of the sidebar because there are already 2 other divs. – casablanca Aug 05 '10 at 02:29
already tried! doesn't work. if i set "100%" the div#rest gets the 100% from the entire page. so that means it's a lot longer than the actual sidebar itself. with "auto" happens nothing. – matt Aug 05 '10 at 02:29
I'm not 100% sure but when you set "auto" you may need to change the "position" attribute. I'm in no way a CSS expert but I seen to remember that "auto" behaved differently for each type of position. – James Hulse Aug 05 '10 at 03:12

CSS: height- fill out rest of div?

7 Answers7

Linked