将 div 拉到导航栏后面答案

【问题标题】：Pull div behind navbar将 div 拉到导航栏后面
【发布时间】：2018-02-12 11:37:56
【问题描述】：

SPA 上的普通 HTML/CSS：

我有一个高度为 40 像素的 CSS 导航栏。我在下面有一个包含一些内容的 DIV。我没有将页面高度设置为 100vh 或其他任何值。

我想让 DIV 位于导航栏“下方”，以便在加载时 DIV 正好等于 100vh。换句话说，我希望在加载时导航栏和 DIV 的组合正好为 100vh，以便第一个滚动显示第二个 DIV 的开头。

    <div class="navbar">
        <img src="./img/logo.svg" />
        BUTTONS AND WHATNOT
    </div>

    <div class="home">...</div>
    <div class="2nd div>...</div>

【问题讨论】：

标签： html css

【解决方案1】：

只要您可以为导航栏设置固定高度，我认为您可以使用 css 来完成此操作。尝试使用calc() 从100vh 中减去导航栏高度来计算首页的高度。

height: calc( 100vh - 60px );

body {
padding: 0;
margin: 0;
}

.navbar {
  height: 60px;
  background: red;
}

.home {
  height: calc( 100vh - 60px);
  background: green;
}

.second-panel {
  height: 100vh;
  background: blue;
}

<div class="navbar">
  <img src="./img/logo.svg" /> BUTTONS AND WHATNOT
</div>

<div class="home">...</div>
<div class="second-panel">...</div>

【讨论】：

我也在想同样的事情，但我认为我自己的答案发牢骚看起来很琐碎，所以感谢您提出这个问题！这对您的情况有帮助吗？如果你不能使用固定的导航栏高度，我们可以用 js 做类似的事情，但你说的是 vanilla html/css。
@Helle 可能是同一个“小丑”，他们会在一两个小时内结束您的问题，因为他们不遵守Help Center中概述的 SO 规则和政策
@JasonB 是的，可以。通常，即使在移动设备上的导航栏也可以放弃 50 像素的高度。我试试这个，谢谢。