CODEWITHSUNDEEP
htmlcsslayout
fedor_bel
fedor_bel

Reputation: 105

How-to mix fixed and percentage heights/width using css without javascript

I want to achieve a layout like this: 

 -----------------------------------------------------------
|                                                          |
|  fixed height                                            |
|                                                          |
|----------------------------------------------------------|
|                                                      | s |
| takes all the rest available screen height           | c |
| fluid height, not fixed,                             | r | 
| dependent on the screen height                       | o |
|                                                      | l |   
|                                                      | l |
|                                                      | b |
|                                                      | a |
|                                                      | r |
------------------------------------------------------------

Using css and html, without javascript, is it possible? Scrollbar should be completely visible, from top to bottom.

Upvotes: 5

Views: 4600

Answers (2)

thirtydot
thirtydot

Reputation: 228182

See: http://jsfiddle.net/s7FH6/show/ (edit)

HTML:

<div id="header"></div>
<div id="content"></div>

CSS:

html, body {
    margin: 0;
    padding: 0;
    overflow: hidden
}
#header {
    background: #ccc;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 150px
}
#content {
    background: #eee;
    position: absolute;
    left: 0;
    top: 150px;
    bottom: 0;
    width: 100%;
    overflow-y: scroll
}

Upvotes: 7

Villi Katrih
Villi Katrih

Reputation: 389

you can achieve layout like that very simple to be honest just read about divs and some css heres a example:

<div style="width: 604px; height: 405px; border: solid 1px black;">
<div style="width: 100%; height: 100px; border: solid 1px green;"></div>
<div style="width: 100%; height: 74%; border: solid 1px blue;"></div>
</div>

dont forget that the width: 604px is only for example just set it to 100% to use all screen size same goes for height.

good luck.

example: http://jsfiddle.net/DCbur/2/

dont forget to vote if you like the answer

Upvotes: -1

Related Questions