3

I want to achieve a layout like this: 

 -----------------------------------------------------------
|                                                          |
|  header height is its content dependant.                 |
|  its height is not set.                                  |      
|  it is as heigh as its content stretches it              |
|----------------------------------------------------------|
|                                                      | s |
| takes all the rest available screen height           | c |
| it is 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.

An example layout is setup here http://jsfiddle.net/uKejq/9/ I want to achieve the same, but without using javascript. is it possible?

fedor_bel
  • 105
  • 2
  • 7
  • Do you mean "with JavaScript" for this question? – thirtydot Jul 18 '11 at 12:46
  • 2
    it is different in only one but very important point: the header height should be its content dependant, not fixed as in previous question. – fedor_bel Jul 18 '11 at 12:46
  • to thirtydot: no, I mean without using javascript. When using javascript I have setup an example on jsfiddle. I want to achieve the same without using javascript. – fedor_bel Jul 18 '11 at 12:48
  • You shouldn't ask a question then rephrase it a bit and re-ask. oezi pointed out that same OP asked same question not long before this one. – Chris Snowden Jul 18 '11 at 12:55
  • 1
    @Chris: I see what you're saying, but the question completely changed after I answered it and the OP realised what he *really* wanted. As per this meta question, it's good to ask a new question in this situation: http://meta.stackexchange.com/questions/96560/significantly-edit-existing-question-or-ask-a-new-question-after-answer-accepted – thirtydot Jul 18 '11 at 12:56
  • @thirtydot, Ok no problem then. – Chris Snowden Jul 18 '11 at 12:58

2 Answers2

0

Please refer to this,

Remove the borders and adjust the width that you want.

CSS

#headerWrapper{
    border:1px solid black;
    width:302px;
}
#header{
    border:1px solid red;
    min-width:300px;
    min-height:100px;
    background:green;

}
#headerScrl{
    width:300px;
    height:100px;
    overflow:scroll;
}

HTML

<div id="headerWrapper">
    <div id="header">
        header
   </div>
   <div id="headerScrl">
    <p> content </p>
    <p> content </p>
    <p> content </p>
    <p> content </p>
    <p> content </p>
    <p> content </p>
    <p> content </p>
    </div>
</div>

http://jsfiddle.net/uKejq/1/

Sarath
  • 9,030
  • 11
  • 51
  • 84
  • stay a little problem: to fit the page $-) – Subdigger Jul 18 '11 at 13:01
  • remove all the width or add width 100% – Sarath Jul 18 '11 at 13:05
  • Your header is fixed height and the whole thing is not fitting the page. It's not quite right.. – thirtydot Jul 18 '11 at 13:05
  • http://jsfiddle.net/uKejq/5/show/ i didnt put any header content, now given min-height just to show – Sarath Jul 18 '11 at 13:08
  • @Sarath Saleem remove haight not width – Subdigger Jul 18 '11 at 13:14
  • @fedor_bel my be this is your [soilution](http://stackoverflow.com/questions/1192783/css-how-to-set-div-height-100-minus-npx) – Subdigger Jul 18 '11 at 13:28
  • @Sarath Saleem: Complete nonsense. The wrapper div should not be fixed height, it should take 100% screen height. This is the question's condition. – fedor_bel Jul 18 '11 at 15:12
  • @Subdigger: thank you for the link. It almost answer my question with only one small exception - I need that header height be not fixed but rather its content defined. This makes the question probably impossible to answer without using javascript. – fedor_bel Jul 18 '11 at 15:29
0

css:

* {margin:0px;padding:0px;overflow:hidden}
body {
    overflow: hidden;
}
div {position:absolute}
div#header {top:0px;left:0px;right:0px;height:60px; border: 1px solid #000}
div#wrapper {top:60px;left:0px;right:0px;bottom:0px; overflow: scroll;}

html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>
<div id="header"></div>
<div id="wrapper">
    saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>
    </div>
</body>
Subdigger
  • 2,166
  • 3
  • 20
  • 42