0

I know this question was asked many times, but it's still unfigurable for me. Anyway I have a code like this:

<div id="header">
Here are many different div's with various position (relative, absolute, static, etc).
</div>
<div id="content">
  <div class="row">
    <div class="inner">
      <div class="upper">
         Some dummy content
      </div>
      <div class="lower">
      </div>
    </div>
  </div>
</div>

Now, how can I set for example .upper div to fit into the window, since I have no idea what's the height of header?

GreyRoofPigeon
  • 17,833
  • 4
  • 36
  • 59
David
  • 1,932
  • 3
  • 27
  • 35
  • Without setting a fixed `height` to `#header`, this can only be done via scripting or altering your structure so the `#header` is inside `#upper` with `#upper`, `#inner`, `#row`, `#content`, `body`, and `html` having a `height` of 100%. Which option would you prefer to pursue? If the script, do you want plain JavaScript, or jQuery? – Christopher Esbrandt Feb 16 '15 at 16:14
  • possible duplicate of [How to Force Child Div to 100% of Parent's Div Without Specifying Parent's Height?](http://stackoverflow.com/questions/1122381/how-to-force-child-div-to-100-of-parents-div-without-specifying-parents-heigh) – TylerH Feb 16 '15 at 16:16
  • @IkoTikashi it doesn't really matter what the css is. It's just a general example and question of how to handle this thing no matter what the css is. There are plenty of nested containers with different width and height an d position. – David Feb 16 '15 at 16:23
  • Try looking at the `display: table` usage from [this answer](http://stackoverflow.com/a/17618682/1654265), it *might* help widening your horizon :) But beware of cross-browser compatibility. – Andrea Ligios Feb 16 '15 at 16:32

1 Answers1

1

You could work with media querys

@media(min-height: 500px){
    .upper{
        display: none;
    }
}

means if the height of .upper is at least 500px high it will be displayed. You could also set it from position: fixed; (what I suppose it is) to position: absolute; if the window is too small, then you'd have to scroll instead of squashing your content

AlexG
  • 5,649
  • 6
  • 26
  • 43
  • I don;t wanna display it conditionally. I want it to be always visible and always set to the bottom of the page, whatever the window height is. – David Feb 16 '15 at 16:10
  • I suppose it is "position: fixed"? Set it to "absolute" if the window gets to small – AlexG Feb 16 '15 at 16:16
  • Ok, so what if I have some divs beneath this #content tag? It goes up and it's overlay the #content. – David Feb 16 '15 at 16:34
  • Usually the divs that are beneath (NOT inside) the #content should stay outside of it. If its width is 100% they should always stay beneath it. – AlexG Feb 16 '15 at 16:38