0

I'm trying to make page with normal div #header and scrollable div #content, so my #content fill all the height left from the #header, even if #header changes his own height.

I tried several options and that is this is my last one http://jsfiddle.net/C4wEg/. But the flaw of this option is that I need to change top property of #content (utilize JavaScript) if height of the #header changes.

Is there any solution to achive my goals only with css?

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    position: relative;
}
#header {
    background-color: tan;
}
#content {
    overflow: auto;
    background-color: teal;
    position: absolute;
    bottom: 0;
    top: 20px;
}

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

<div id="content">
    Test content
</div>
arzzzen
  • 361
  • 1
  • 9
  • if understand right the only solution is to use table? – arzzzen Jun 12 '14 at 14:12
  • Why do you have the content positioned absolute? If you just have them stacked it works the same and lets you change the height of the header. I'm a little confused on what you want. – Spencer May Jun 12 '14 at 14:28
  • It's because I need to make scrollable only #content, but not entire page. – arzzzen Jun 12 '14 at 14:47

1 Answers1

0

Since css ignores the dimensions of absolute/fixed objects (those are out-of-flow as far as their neighbours are concerned), you can use media queries to emulate dynamic height behaviour:

@media only screen and ( max-width: 700px ) {
    #header {
        height: 40px;
    }
    #content {
        padding-top: 40px;
    }
}

http://jsfiddle.net/2RTFW/ (resize the width of display area to see the effect).

If you are using SASS, then you can easily generate such media queries, even in 10px increments, if you wish (use "for" loop).

Ingmars
  • 998
  • 5
  • 10
  • My #content block will contain a document (like docs.google.com) so in my case it's very essential to make scrollable only #content. – arzzzen Jun 12 '14 at 15:21
  • Updated fiddle with only #content scrolling: http://jsfiddle.net/8DF92/1/ As I said, it does not change the general idea of "pseudo-dynamic" height. – Ingmars Jun 12 '14 at 15:50
  • Yes thankyou. As I understand there is no way to acheve my goals only with CSS (not set height directly), so your solution is the best. – arzzzen Jun 12 '14 at 16:04