5

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.

fedor_bel
  • 105
  • 2
  • 7

2 Answers2

7

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
}
thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • This is the correct answer to the given question! and I must mark it as absolutely correct to the given conditions. – fedor_bel Jul 18 '11 at 12:24
  • Bad for me, just as I have read the answer, it popped to my mind that I wanted that the top pane height would not be fixed, but rather its size should be content dependent. Sorry for not mentioning it in the conditions - my bad. I suppose If we add that extra condition - there will be no pure html/css solution. I will start a new question with that extra condition. – fedor_bel Jul 18 '11 at 12:30
  • see new question here http://stackoverflow.com/questions/6733015/how-to-mix-fixed-and-percentage-height-width-using-css-without-javascript – fedor_bel Jul 18 '11 at 12:43
-1

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

Villi Katrih
  • 389
  • 1
  • 3
  • 16
  • Dear Villi, thanks for answering. Sorry for being not 100% clear. The bottom pane should have flexible height, taking all the rest screen space. – fedor_bel Jul 18 '11 at 11:27
  • Willi, am talking about HEIGHT of the bottom pane taking all the rest available SCREEN HEIGHT. – fedor_bel Jul 18 '11 at 11:33
  • so just set height: 100% like i did in my post just edited it – Villi Katrih Jul 18 '11 at 11:37
  • your example does not respond to the conditions: 1. the height of the bottom pane should take exactly all of the rest available screen height. 2. The bottom pane content should scroll and scrollbars should be completely visible, from top to bottom. – fedor_bel Jul 18 '11 at 12:04