我试图将主页的内容放置在位于页面中心的导航栏下方。 我能够将内容放置在导航栏下方，但当我更改窗口的高度时，它会发生变化。 如何让它粘在导航栏下方？ 这是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 文件获取的。
最佳答案
您可以将 css 添加到 body 元素
body{
margin-top: 200px;
}
就是这样。
或者，您可以将标题和底部内容包装在 div 中，然后将 margin-top 赋予该 div 元素。
<div class="wrapper">
<nav>Header Area</nav>
<!-- Everything else goes here -->
</div>
包装类的 CSS:
.wrapper{
margin-top: 200px;
}
关于html - 无论屏幕高度如何，如何将页面内容保持在导航栏下方？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/71850990/