How to stretch div height to fill parent div - CSS

Question

I have a page with divs like shown in the layout / screenshot below:

The code is here:

html,
body {
  margin: 0;
  padding: 0;
  border: 0;
}

#B,
#C,
#D {
  position: absolute;
}

#A {
  top: 0;
  width: 100%;
  height: 35px;
  background-color: #99CC00;
}

#B {
  top: 35px;
  width: 200px;
  bottom: 35px;
  background-color: #999999;
  z-index: 100;
  border: solid 4px #00CC00;
}

#B2 {
  margin-top: -35px;
  bottom: 0;
  background-color: #FFFFFF;
  width: 200px;
  overflow: scroll;
}

#B1 {
  height: 35px;
  width: 35px;
  margin-left: 200px;
  background-color: #CC0066;
}

#C {
  top: 35px;
  left: 200px;
  right: 0;
  bottom: 35px;
  background-color: #CCCCCC;
}

#D {
  bottom: 0;
  width: 100%;
  height: 35px;
  background-color: #3399FF;
}

<div id="container">
  <div id="A">A</div>
  <div id="B">
    <div id="B1">B1</div>
    <div id="B2">B2</div>
  </div>
  <div id="C">C</div>
  <div id="D">D</div>
</div>

I want to adjust the height of B2 div to fill (or stretch to) entire B div (marked with a green border in the image) and don't want to cross the footer D div. Here is a working fiddle link(updated). How can I solve this??

why you have B1, what is the use of it? – Atul Rajput May 17 '22 at 05:50 — Atul Rajput, May 17 '22 at 05:50

score 58 · Answer 1 · edited Jun 11 '21 at 11:08

58

Suppose you have

<body>
  <div id="root" />
</body>

With normal CSS, you can do the following. See a working app https://github.com/onmyway133/Lyrics/blob/master/index.html

#root {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

With flexbox, you can

html, body {
  height: 100%
}
body {
  display: flex;
  align-items: stretch;
}

#root {
  width: 100%
}

edited Jun 11 '21 at 11:08

biberman

5,606
4
11
35

answered Jul 06 '17 at 12:34

onmyway133

45,645
31
257
263

2

I just realized this won't work anymore if you add `height: 100%` to #root. Can somebody explain this? – nonNumericalFloat Apr 14 '21 at 18:00
1

@nonNumericalFloat see this answer: https://stackoverflow.com/questions/44048470/how-to-fill-vertical-space-with-flexbox – JCollier Apr 16 '22 at 01:52

score 14 · Answer 2 · edited Nov 15 '19 at 17:10

14

http://jsfiddle.net/QWDxr/1/

Use the "min-height" property
Be wary of paddings, margins and borders :)

html, body {
    margin: 0;
    padding: 0;
    border: 0;
}
#B, #C, #D {
    position: absolute;
}
#A{
    top: 0;
    width: 100%;
    height: 35px;
    background-color: #99CC00;
}
#B {
    top: 35px;
    width: 200px;
    bottom: 35px;
    background-color: #999999;
    z-index:100;
}
#B2 {
    min-height: 100%;
    height: 100%;
    margin-top: -35px;
    bottom: 0;
    background-color: red;
    width: 200px;
    overflow: scroll;
}
#B1 {
    height: 35px;
    width: 35px;
    margin-left: 200px;
    background-color: #CC0066;
}
#C {
    top: 35px;
    left: 200px;
    right: 0;
    bottom: 35px;
    background-color: #CCCCCC;
}
#D {
    bottom: 0;
    width: 100%;
    height: 35px;
    background-color: #3399FF;
}

edited Nov 15 '19 at 17:10

Tintin81

9,821
20
85
178

answered Apr 07 '11 at 13:26

x10

3,820
1
24
32

1

no.. it fill entire page with a top margin. i just want to fill the specific div `B` – Alfred Apr 07 '11 at 13:30
It works correctly in chrome and firefox. If this doesn't work for you, you can use [Faux Columns](http://www.alistapart.com/articles/fauxcolumns/) – x10 Apr 07 '11 at 13:44
it works, but it is cutting the footer `div id= D`. I dont want it to cross div d – Alfred Apr 07 '11 at 13:59
2

`height:100%` is missing a semicolon for the `#B2` style. – Emil Jan 04 '18 at 22:36
Worked for me inside a custom navbar. – dawn Sep 26 '20 at 01:38

Teneff · Answer 3 · 2015-05-22T21:27:35.523

5

If you're gonna use B2 for styling purposes you can try this "hack"

#B { overflow: hidden;}
#B2 {padding-bottom: 9999px; margin-bottom: -9999px}

jsFiddle

edited May 22 '15 at 21:27

answered Apr 07 '11 at 13:34

Teneff

30,564
13
72
103

1

This works, thanks. By the way, it should be `margin-bottom: -9999px;`. You're missing the minus. – Gaui May 22 '15 at 15:22

score 4 · Answer 4 · answered Aug 07 '13 at 07:21

What suited my purpose was to create a div that was always bounded within the overall browser window by a fixed amount.

What worked, at least on firefox, was this

<div style="position: absolute; top: 127px; left: 75px;right: 75px; bottom: 50px;">

Insofar as the actual window is not forced into scrolling, the div preserves its boundaries to the window edge during all re-sizing.

Hope this saves someone some time.

Dmytro Yurchenko · Answer 5 · 2019-02-24T02:05:43.320

1

B2 container position relative

Top position B2 + of remaining height

Height of B2 + height B1 or remaining height

edited Feb 24 '19 at 02:05

answered Feb 24 '19 at 01:56

Dmytro Yurchenko

187
2
3

Setting the parent node to position relative solved my unrelated problem! Thanks! – Deejers Jan 07 '20 at 18:35

score 0 · Answer 6 · answered Nov 10 '21 at 10:25

0

If you are using JQuery, you can do this:

<body onload="$('nav').height($('main').height());">

answered Nov 10 '21 at 10:25

Chong Lip Phang

8,755
5
65
100

Peter Quiring · Answer 7 · 2022-04-22T16:43:52.750

I've always noticed this is possible with tables, so just change your div display types to table types and it works.

To control width: Set container div to display:table (or inline-table) and inside divs to display:table-cell like this:

<div style='width: 100%; height: 100%; display: table;'>
  <div style='background-color: red; width: 50%; height: 100%; display: table-cell;'>
    Left Side
  </div>
  <div style='background-color: green; height: 100%; display: table-cell;'>
    Right Side<br>
    <div style='background-color: blue; width = 100%;'>
      This is 100% of remainder!
    <div>
  </div>
</div>

The above will have the left div is 50% and the right inner div will fill the remainder. You can even place another div in the right inner with 100% width and it will fill the remainder.

To control height you just use table-row instead of table-cell:

<div style='width: 100%; height: 100%; display: table;'>
  <div style='background-color: red; width: 100%; height: 100%; display: table;'>
    <div style='background-color: red; width: 100%; height: 20%; display: table-row;'>
      Top Side
    </div>
    <div style='background-color: green; height: 100%; display: table-row;'>
      Bottom Side<br>
    </div>
  </div>
</div>

No positioning or flexing which usually causes other unwanted side-effects. — Peter Quiring, Apr 22 '22 at 16:48

Chong Lip Phang · Answer 8 · 2022-09-13T06:45:16.220

I have just found another solution, which is to position everything absolutely and then use {top:0; bottom:0}.

#B {
   position:absolute;
   width: 200px;
   height: 200px;
   background-color: orange;
}
#B1 {
   position:absolute;
   top:0;
   bottom: 0;
   width: 100%;
   background-color: cyan;   
}
#B2 {
   position:absolute;
   bottom: 0;
   height: 35px;
   width: 100%;
   background: green;
}

<div id="B">
   <div id="B1">B1</div>
   <div id="B2">B2</div>
</div>

Note that there is some overlapping.

How to stretch div height to fill parent div - CSS

8 Answers8

Linked

Related