html - 不知道标题高度的CSS高度100％

Question

我知道这个问题被问过很多次，但对我来说仍然是个谜。无论如何，我有这样的代码:

<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>

现在，我如何设置例如 .upper div 以适应窗口，因为我不知道标题的高度是多少？

Answer 1

你可以使用媒体查询

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

表示如果 .upper 的高度至少为 500px，它将被显示。您还可以将其从 position: fixed; (我想是的)设置为 position: absolute; 如果窗口太小，则必须滚动而不是压缩你的内容