如何将我的页面的内容保持在Navbar下方，无论屏幕高度如何？
我正在尝试将主页的内容放在页面中心的Navabr下方。 我能够将内容放在Navbar下方，但是当我更改窗口的高度时，它会更改。 如何使其在Navbar下方贴上？ 这是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>
请注意，这是一个单页应用程序，主页的内容是从单独的HTML文件中获得的。
I am trying to place the content of my homepage below my navabr which is located at the center of the page.
I was able to place the content below the navbar, but it changes when I change the window's height.
How do I make it stick below the navbar?
this is the 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%;
}
This is my 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>
Please note that this is a single-page application, and the content of the main-page is obtained from a separate HTML file.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
身体元素中
您可以将CSS添加到IT的 。
另外，您可以将标题和底部内容包裹在
div中，然后将保证金top给予该div元素。包装班的CSS：
You can add css to the body element
That's it.
Alternatively, you can wrap the header and bottom content in a
divand then givemargin-topto thatdivelement.CSS for wrapper class: