A <div> that can increase/decrease its own height

I would like to create a <div> (called div1 here) which expands its own height up to the limit of the browser's height (ie maximum height until it would produce an overflow with scrollbar):

<div id="div1"> </div>
<div id="div2">Bonjour </div>

Here is the css :

#div2 {
   height: 300px;
   background-color: #ccffcc;
}

#div1 {
   height: 80px; // what should I do here in order to maximize the height until overflow?
   background-color: #cc00cc;
}

How to increase the height of div1 to maximum possible height?

Here is a live demo : http://jsfiddle.net/XAjGM/2/.

Answers


This can be your css so that you can achieve the desired.

html,body{
height:100%;
}

#div2 {
    height: 300px;
    background-color: #ccffcc;
}

#div1 {
    height: calc(100% - 300px); //where 300px is the height of div2
   background-color: #cc00cc;
}

You should use a wrapper element and use display:table on it and display:table-row on the .div1 and .div2 elements

CSS

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
}
.wrapper {
    display: table;
    height: 100%;
    width: 100%;
    background: yellow;
}
.div1 {
    display: table-row;
    background: #cc00cc;
    height: 100%;
}
.div2 {
    display: table-row;
    background: #ccffcc;
}

HTML

<div class="wrapper">
    <div class="div1">
        contents of div 1
    </div>
    <div class="div2">
        contents of div 2
    </div>
</div>

Demo at http://jsfiddle.net/gaby/55z22/


As you add content to .div2 the .div1 will shrink


Try this 1:-

body, html {
    height: 100%;    
}

#div1 {
   height: 80px;
   background-color: #ccffcc;
}

#div2 {
   height: 100%;
   background-color: #cc00cc;
    overflow: auto;
}

FIDDLE


Need Your Help

AJAX request on Node.js server

html ajax json node.js

I am unable to make an AJAX request from my .html page to my node.js server for a JSON file. I've been reading on AJAX requests, but all I am able to make out is how to display the servers respons...

Python daemon shows no output for an error

python daemon python-daemon

I read How do you create a daemon in Python? and also this topic, and tried to write a very simple daemon :