Html 顶部导航栏与主要内容重叠

我正在将我的登录页从引导转换为语义用户界面。页面有一个位置固定的顶部导航栏。主要内容分为两列（3列和9列）。左栏用于显示侧栏，右栏用于显示当前内容

我试图复制并粘贴语义用户界面的演示页面。导航条是45像素高。我注意到主内容的前45px是重叠的

仪表板
第一项
第二项
第三项
第四项
第五项
应用程序内容
第一段

第二段

第三段

您可以在content div上设置一个高度，然后设置overflow:scroll。这样，任何长内容都将在div中滚动，并且不会在页面上和导航栏下移动。

您必须将页面内容包装在grid类中：

仪表板
第一项
第二项
第三项
第四项
第五项
应用程序内容
第一段

第二段

第三段

解决方案要简单得多。您只需在主容器中添加一个填充：

<div id="navbar" class="ui fixed inverted main menu">
 <!-- header content here -->
</div>
<div id="content" class="ui container">
 <!-- main content here -->   
</div>

---

您的代码中没有

id=“container”

元素。最好是制作一个JSFIDLE，它会给您带来问题。我想为任何使用gulp构建的人指出，如果您有一个固定的菜单，后跟一个“grid”元素，您可以使用menu.variables文件中的“@fixedPrecingGridMargin”变量自定义网格顶部边距。它看起来越来越接近解决方案，只是侧边栏的高度无法适应浏览器窗口。为什么要使用侧边栏？使用垂直菜单组件不是更好吗？当你想在页面中获取可推式内容时，侧边栏会更好。我尝试了垂直菜单，但它看起来与侧边栏不同。侧栏右侧有一个阴影。当使用侧边栏时，菜单项之间会有分隔符。对于我来说，垂直菜单是更好的选择。如果您不喜欢它的外观，您可以随时修改它们并创建自己的。这里有一个链接，指向如何做的说明。这实际上是我的无脑解决方案。真的很实用。我是一个初学者，所以请原谅我的简单问题：）所以我们唯一要做的就是在“并添加你的CSS:”后面是什么，对吗？只是将css文件（.ui#content等…）放入bootstrap.css文件？第二个问题，css应该被添加到bootstrap.css文件中的任何特定位置，还是仅仅放在文件的末尾？哦，它说“填充应该与页眉高度相同”。你怎么知道收割台的高度是多少？

.ui#content{
  // padding should be the same as header height
  padding-top: 55px;
}