CODEWITHSUNDEEP
csshtmlheight
Basj
Basj

Reputation: 46223

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/.

Upvotes: 0

Views: 1232

Answers (3)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196177

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

Upvotes: 0

Anup
Anup

Reputation: 9748

Try this 1:-

body, html {
    height: 100%;    
}

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

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

FIDDLE

Upvotes: -1

Green Wizard
Green Wizard

Reputation: 3667

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;
}

Upvotes: 2

Related Questions