CSS - Making a Div Consume All Available Space

CSS - Making a div consume all available space

You can use relative and absolute positions. Here an example:

css

   html,body,#wrapper {
        height:100%;
        margin:0;
        padding:0;
    }
    #wrapper {
        position:relative;
    }

    #top, #middle, #bottom {
        position:absolute;
    }

    #top {
        height:50px;
        width:100%;
        background:grey;
    }
    #middle {
        top:50px;
        bottom:50px;
        width:100%;
        background:black;
    }
    #bottom {
        bottom:0;
        height:50px;
        width:100%;
        background:grey;
    }

html

<div id="wrapper">
    <div id="top"></div>
    <div id="middle"></div>
    <div id="bottom"></div>
</div>

Demo: http://jsfiddle.net/jz4rb/4

Make div expand to take all the available space

The easiest way to achieve this is using flexbox.

You assign display: flex to the parent container. in your case this is outer .outer.
a flexbox works in a single direction. So you can look at them like a column (vertical) or row(horizontal). The default setting is that it spreads the children elements out over a row. But we want to create a column. Therefore we have to change the flex-direction on .outer to flex-direction: column.
Now we need to specify how we want the flexbox to divide the amount of space available in the .outer. Normal behaviour is that the flexbox gives its children their normal width/height. But by assigning flex:1 to .should_fill_available_space, this element will get all the extra available space. What the flexbox basically says is that we want the computer to use all 1/1 = 100% (used flex value divided by the total flex value of all children) available room to apply to .should_fill_available_space, while keeping minimal space for the .menu width. Technically flex: is a shorthand for some other properties, but that doesn't really matter for this question.

Here is your JS-Fiddle: https://jsfiddle.net/cryh53L7/

html

<div class="outer">
  <div class="menu">
    Lorem Ipsum
    Lorem Ipsum
    Lorem Ipsum
  </div>
  <div id="this" class="should_fill_available_space">
    Brown color should go all the way down
  </div>
</div>

css

 div{
      padding: 0px
    }
    html, body{
      height: 100%;
      padding: 0px;
      margin: 0px;
    }
    .outer {
      display: flex;
      flex-direction: column;
      background: olive;
      height: 100%;
    }
    .menu{
      background: orange;

    }
    .should_fill_available_space{
      flex: 1;
      background: brown;

    }

Make a div fill the height of the remaining screen space

2015 update: the flexbox approach

There are two other answers briefly mentioning flexbox; however, that was more than two years ago, and they don't provide any examples. The specification for flexbox has definitely settled now.

Note: Though CSS Flexible Boxes Layout specification is at the Candidate Recommendation stage, not all browsers have implemented it. WebKit implementation must be prefixed with -webkit-; Internet Explorer implements an old version of the spec, prefixed with -ms-; Opera 12.10 implements the latest version of the spec, unprefixed. See the compatibility table on each property for an up-to-date compatibility status.

(taken from https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)

All major browsers and IE11+ support Flexbox. For IE 10 or older, you can use the FlexieJS shim.

To check current support you can also see here:
http://caniuse.com/#feat=flexbox

Working example

With flexbox you can easily switch between any of your rows or columns either having fixed dimensions, content-sized dimensions or remaining-space dimensions. In my example I have set the header to snap to its content (as per the OPs question), I've added a footer to show how to add a fixed-height region and then set the content area to fill up the remaining space.

html,body {  height: 100%;  margin: 0;}
.box {  display: flex;  flex-flow: column;  height: 100%;}
.box .row {  border: 1px dotted grey;}
.box .row.header {  flex: 0 1 auto;  /* The above is shorthand for:  flex-grow: 0,  flex-shrink: 1,  flex-basis: auto  */}
.box .row.content {  flex: 1 1 auto;}
.box .row.footer {  flex: 0 1 40px;}

<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->
<div class="box">  <div class="row header">    <p><b>header</b>      <br />      <br />(sized to content)</p>  </div>  <div class="row content">    <p>      <b>content</b>      (fills remaining space)    </p>  </div>  <div class="row footer">    <p><b>footer</b> (fixed height)</p>  </div></div>

How to make a div fill a remaining horizontal space?

This seems to accomplish what you're going for.

#left {  float:left;  width:180px;  background-color:#ff0000;}#right {  width: 100%;  background-color:#00FF00;}

<div>  <div id="left">    left  </div>  <div id="right">    right  </div></div>

Expand a div to fill the remaining width

The solution to this is actually very easy, but not at all obvious. You have to trigger something called a "block formatting context" (BFC), which interacts with floats in a specific way.

Just take that second div, remove the float, and give it overflow:hidden instead. Any overflow value other than visible makes the block it's set on become a BFC. BFCs don't allow descendant floats to escape them, nor do they allow sibling/ancestor floats to intrude into them. The net effect here is that the floated div will do its thing, then the second div will be an ordinary block, taking up all available width except that occupied by the float.

This should work across all current browsers, though you may have to trigger hasLayout in IE6 and 7. I can't recall.

Demos:

Fixed Left: http://jsfiddle.net/A8zLY/5/
Fixed Right: http://jsfiddle.net/A8zLY/2/

div {
  float: left;
}

.second {
  background: #ccc;
  float: none;
  overflow: hidden;
}

<div>Tree</div>
<div class="second">View</div>

HTML / CSS: child div should use all available space in flexbox

I noticed that the top red div was actually partially hidden by the black sidenav div. So, this meant that the HTML needed to be refactored. Adding content makes it possible to see how it should behave.

You probably also want the black sidenav div to disappear on mobiles, and that can be achieved with a suitable media query.

        .container {
            display: flex;
            flex-direction: row;
        }
        
        .main {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }
        
        .sidenav {
            flex-basis: 160px;
            flex-shrink: 0;
            color: white;
            background-color: black;
            display: flex;
        }
        
        .topDiv {
            flex-grow: 1;
            height: 60px;
            background-color: red;
        }
        
        .grid {
            display: flex;
            flex-direction: row;
        }
        
        .smallDiv {
            background-color: green;
            padding: 10px;
        }
        
        .bigDiv {
            background-color: blue;
        }
        
        @media only screen and (max-width: 600px) {
            .grid {
                flex-direction: column;
            }
        }

    <div class="container">
        <aside class="sidenav">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel facilis alias incidunt aperiam sequi a earum delectus nam similique nostrum, tenetur esse aliquid veritatis dicta tempore? Error asperiores tempore illo!</aside>
        <div class="main">
            <div class="topDiv">
                <h1>A Heading</h1>
            </div>
            <div class="grid">
                <div class="smallDiv">
                    <input type="text"><br><br>
                    <input type="text"><br><br>
                    <input type="text"><br><br>
                    <input type="text"><br><br>
                    <input type="text"><br><br>
                </div>
                <div class="bigDiv">
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet ab doloribus nostrum deleniti debitis, et odit tempora obcaecati perferendis dolorum ratione asperiores odio ipsum. Sequi consequatur qui nisi quibusdam praesentium!
                </div>
            </div>
        </div>
    </div>

(CSS) how I could make the div takes all available space in width without a specific value but there is another div in the same place with a specific

arrange your divs like this

<div id="a">
    <div id="c">456</div>
    <div id="b">123</div>   
</div>

and remove the float from #b

#b{
    background-color:#06F;
}

check the jsFiddle file

Use flex column with wrap in a div taking up all remaining space

First, I tried adding a fixed height to the flex parent and that seemed to work but was not a very elegant solution. So I settled on this :)
Adding the overflow parameter seemed to do the trick.

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.2/tailwind.min.css" rel="stylesheet"/>
<div class="flex flex-col bg-blue-100 h-screen">
  <h1 class="text-center text-3xl bg-blue-200 py-2">My Header</h1>
  
  <div class="flex-auto flex flex-col flex-wrap overflow-auto">
    <div class="bg-blue-300 border-2 border-black h-16 w-12"></div>
    <div class="bg-blue-300 border-2 border-black h-16 w-12"></div>
    <div class="bg-blue-300 border-2 border-black h-16 w-12"></div>
    <div class="bg-blue-300 border-2 border-black h-16 w-12"></div>
  </div>
</div>

CSS - Making a Div Consume All Available Space