CODEWITHSUNDEEP
csshtmlheightstretching
user1392013
user1392013

Reputation: 65

HTML/CSS: stretching height <div> layout

<div style="width: 800px; height: 600px"> 
    <div style="height: 100px"> 
        top fixed-height row
    </div> 
    <div style="???"> 
        bottom stretching row (the height should be 500px in this case.) 
    </div> 
</div>

What's the standard way to create two-row layout without javascript where the top one is fixed-size and the bottom one stretches and fits to its parent div?

Thanks!

Upvotes: 1

Views: 1728

Answers (4)

MadManMathew
MadManMathew

Reputation: 1

I have just written a blog about HTML CSS layouts, the demo lets you manipulate most css settings via javascript.

http://attemptingawesomeness.blogspot.com.au/2012/05/css-html-layout-guide_13.html

http://attemptingawesomeness.blogspot.com.au/2012/05/ultimate-html-css-layout-demo.html

Upvotes: 0

Bongs
Bongs

Reputation: 5592

You can use display property in CSS to fix this.

working EXAMPLE

HTML

<div id="a" style="width: 300px; height: 200px"> 
    <div id="b" style="height: 55%"> 
        top fixed-height row
    </div> 
    <div id="c" style=""> 
        bottom stretching row (the height should be 500px in this case.) 
    </div> 
</div> ​

CSS

#a
{
    border: 1px solid black;
    display:table;
}
#b
{
    background-color:red;
    display:table-row;
}
#c
{
    background-color:green;
    display:table-row;
}​

Upvotes: 1

mborecki
mborecki

Reputation: 162

For this case you can use preprocesor (like LESS):

@contHeight: 600px;
@topHeight: 100px;

div#containingdiv { 
    width: 800px; 
    height: @contHeight; 
    }
div#toprow { 
    width: 100%;
    height: @topHeight; 
    }
div#bottomrow {
    height: @contHeight - @topHeight; 
    }

Upvotes: 1

FluffyKitten
FluffyKitten

Reputation: 14312

HTML and CSS are static not dynamic languages where you could perform calculations. You can only apply styles to each div individually because there is actually no dependency between the styles for each "row" div for you to determine the height of one based on the other.

However depending on what you are trying to achieve, it may be possible to style the containing div instead of the bottom div.

e.g. a very simplistic example where the top row should have a red background and bottom row have a yellow background, set the style for the containing div to have the appearance you require for the bottom div, and the top div will cover this appearance on the upper part of the container:

div#containingdiv { width: 800px; height: 600px; background:#ffff00; }
div#toprow { height: 100px; background:#ff0000; width 100%; }
div#bottomrow { }

Upvotes: 0

Related Questions