CODEWITHSUNDEEP
htmlcssheight
David
David

Reputation: 1963

CSS Height 100% without knowing height of header

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?

Upvotes: 0

Views: 231

Answers (1)

AlexG
AlexG

Reputation: 5919

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

Upvotes: 1

Related Questions