11

How to size a div's height to its container height, using CSS ?

<div class='container'><br>
  &nbsp;&nbsp;<div style='display: block; height: 500px'>left</div><br>
  &nbsp;&nbsp;<div id='to-be-sized' >right</div><br>
</div>
1
  • Could you not set the height of the contained element to be height:100%;
    – AJM
    Dec 10, 2009 at 13:43

13 Answers 13

8

You can either:

  • use the incomplete but philosophically correct path of pure CSS and face every kind of incompatibility between browsers

or

  • write 3 lines of dirty semantically incorrect and devil made table and have it work perfectly everywhere

Your pick :)

3
  • 1
    For years and years tables have been hated by so many people, and for year tables have been the only reliable solution to so many problems. The CSS standard has been broken from the very beginning. Such a simple problem should be piece of cake, but it isn't.
    – GetFree
    May 21, 2013 at 20:45
  • 1
    Tables were allover in the 90s :D then modern web development said they were bad. Now, oh! What a new feature, tables!!!
    – FilippoG
    May 15, 2019 at 17:36
  • 1
    See stackoverflow.com/users/967727/cfrydlewicz answer below; absolutely possible with CSS using min-height: nn; flex-grow: 1;
    – JESii
    Jan 19, 2022 at 18:29
6

There's a way to do this IF you happen to be using jQuery. As you asked for CSS this might not be an option available to you, but if you can utilise it it will do exactly what you want.

$(divToResize).css('height',$(container).innerHeight());

$(divToResize) is the selector for the DIV you wish to match the height of it's container and $(container) is logically the container whose height you want to get.

This will work regardless of if the container's height is specified in CSS or not.

5

I know this was answered forever ago, but when I run into this issue nowadays, I use Flex Box. It's awesome. See A Complete Guide to Flexbox by Chris Coyier

.parent {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  width: 100%;
}
.child {
  flex-grow: 1;
}
.child1 {
  min-height: 200px;
  background-color: #fee;
}
.child2 {
  background-color:#eef;
}
<div class="parent">
  <div class="child child1">Child 1</div>
  <div class="child child2">Child 2</div>
</div>

The Flexbox Layout (Flexible Box) module aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex").

The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space, or shrinks them to prevent overflow.

Most importantly, the flexbox layout is direction-agnostic as opposed to the regular layouts (block which is vertically-based and inline which is horizontally-based). While those work well for pages, they lack flexibility (no pun intended) to support large or complex applications (especially when it comes to orientation changing, resizing, stretching, shrinking, etc.).

2
  • 2
    Better to post actual code and cite the link - that way, if the site goes down, the code will still be available.
    – Wex
    Dec 15, 2015 at 21:28
  • This is the actual solution IMO. Mar 14, 2019 at 18:57
3

If my understanding is correct and the default height of a div where no height is specified is auto then this is not possible without setting an explicit height on the containing div. If an explicit height is set on the containing div then height:100% on the contained div will mean that it grows to the height of the container.

2

It seems like you are trying to get equal height columns. You could use the fauxcolumns method where a background image is used to fake the equal height. There are other methods out there.

1
  • I have to testify that this is the simplest method out there, and has the best browser support.
    – invot
    Sep 30, 2014 at 17:23
2

You can tell the container div to display as table and have the inner div to display as a table cell.

The HTML

<body>
<div id="wrap">
    <div id="header">
        <h1>
            My Header</h1>
    </div>
    <div id="main">
        <ul id="nav">
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
        </ul>
        <div id="primaryContent">

        </div>
    </div>
    <div id="footer">
        <h1>
            My Footer</h1>
    </div>
</div>

The CSS

#wrap
{
    width: 800px;
    margin: auto;
}

#header
{
    background: red;
}

#main
{
    display: table;
}

#nav
{
    background: gray;
    width: 150px;
    display: table-cell;
}

#primaryContent
{
    background: yellow;
    padding: 0 .5em;
    display: table-cell;
}

Fixes for IE

    #wrap 
{
    width: 800px;
    margin: auto;
}

#header, #footer
{
    background: red;
}

#main 
{
    background: url(../bg.png) repeat-y;
}

#nav 
{
    background: gray;
    width: 150px;
    float: left;
}

#primaryContent 
{
    background: yellow;
    margin-left: 150px;
    padding: 0 .5em;
}
1

It's a tricky thing to do--there's no clear-cut best approach, but there are a few common ones. If we assume that what you REALLY need is for the height of the right column to be (or appear to be) equivalent to the height of the left column, you can use any of the techniques frequently used to get equal height columns. This piece contains a few tricks to get the right look and behavior. I recommend reading it to see if it solves your problem.

The other approach uses Javascript to determine the height of the container, and setting your right-hand column to that. That technique has been discussed on SO here. As long as your container's size is not the only thing determining the size of your outer container, that should be a valid approach (if that's not the case, you'll have a chicken-egg problem that could cause weird behavior).

1
0

Sample code, you need to start from the html element so you can make use of the flexible height in the containers.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>100% Test</title>
 <style type="text/css">

   html, body, #inner { height: 100% }
   #inner { border: 4px blue solid } 
   #container { height: 200px; border: 4px red solid }

 </style>
</head>
<body>

    <div id="container">
        <div id="inner">
            lorem ipsum
        </div>
    </div>

</body>
</html>
0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
.container{
    position:relative;
    background-color:#999;
}
#to-be-sized{
    position:absolute;
    top:0;
    height:100%;
    background-color:#ddd;
}
</style>
<body>

<div class='container'>
    <br>
    &nbsp;&nbsp;
    <div style='display: block; height: 500px'>left</div>
    <br>
    &nbsp;&nbsp;
    <div id='to-be-sized' >right</div><br>
</div>

</body>
</html>
0

CSS files use the 'padding' function to determine the height and depth of containers. To change the height of the container field simple insert of adjust the padding fields for the specified containers.

The code excerpt below is an example of the CSS used for a container class (you'd find this as in the html file.

.container{padding-top:100px;padding-bottom:50px}header
0

i use the overflow:hidden it work properly.

.bu {
    overflow: hidden;
    background-color:blue;
}
<div class="bu">
    <button>english</button>
</div>

0

try adding this to the div to be resized

.layout-fill {
    margin: 0;
    width: 100%;
    min-height: 100%;
    height: 100%;
}

-1

I did something similar to KyokoHunter:

$('div.row').each(function(){
     var rowHeight = $(this).innerHeight();
     $(this).children('div.column').css('height',rowHeight);
});

This goes through every row in a div "table" and makes the heights all match, as long as the divs are classed accordingly.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.