无论屏幕高度如何，如何将我的页面内容保持在导航栏下方？

Question

我试图将主页的内容放在位于页面中心的 navabr 下方。我能够将内容放在导航栏下方，但是当我更改 window 的高度时它会发生变化。我如何让它停留在导航栏下方？这是 css:

.content {
    position: relative;
    height: 100vh;
    transition: 0.3s;
}

.homeNav {
    transition: 0.3s;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

.homeContent {
    position: absolute;
    transition: 0.3s;
    top: 65%;
}

这是我的 html:

<body>
    <div class="container content">
        <nav class="homeNav" id="all">
            <img src="/images/400x200.png" class="img-fluid mx-auto d-block" />
            <div class="row bg-info">

             NAVIGATION BAR HERE

            </div>
        </nav>
        <div id="main-page" class="homeContent">
        </div>
    </div>
</body>

请注意，这是一个单页应用程序，main-page 的内容是从单独的 HTML 文件中获取的。

Answer 1

您可以将 css 添加到 body 元素

body{
  margin-top: 200px;
}

就是这样。或者，您可以将 header 和底部内容包装在 div 中，然后将 margin-top 赋给 div 元素。

<div class="wrapper">
   <nav>Header Area</nav>
   <!-- Everything else goes here -->
</div>

CSS 包装 class:

.wrapper{
   margin-top: 200px;
}

无论屏幕高度如何，如何将我的页面内容保持在导航栏下方？

How to keep the content of my page below the navbar, regardless of screen height?

html

css

screen-orientation

responsive-design