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

Question

我正在将我的登陆页面从Bootstrap转换为Semantic-UI。 该页面的位置固定在顶部导航栏上。 主要内容分为两列（3-cols和9-cols）。 左列用于显示侧栏，右栏用于显示当前内容。

我试图复制并粘贴Semantic-UI的演示页面。 导航栏高45px。 我注意到第一个45px的主要内容是重叠的。

 <link href="//semantic-ui.com/dist/semantic.min.css" rel="stylesheet"/> <script src="//semantic-ui.com/dist/semantic.min.js"></script> <div id="navbar" class="ui fixed inverted main menu"> <div class="container"> <div class="title item"> <b>Dashboard</b> </div> </div> </div> <div id="maincontent" class="ui bottom attached segment pushable"> <div id="sidebar" class="ui visible left vertical sidebar menu"> <a class="item">First Item</a> <a class="item">Second Item</a> <a class="item">Third Item</a> <a class="item">Fourth Item</a> <a class="item">Fifth Item</a> </div> <div id="content" class="pusher"> <div class="ui basic segment"> <h3 class="ui header">Application Content</h3> <p>First paragraph...</p> <p>Second paragraph...</p> <p>Third paragraph...</p> </div> </div> </div> 

我目前的解决方法是在导航栏后添加一个45px高的占位符。

<div style="height:45px"></div>

我很确定有一些好的CSS样式名称可以修复内容重叠。

Answer 1

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

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

并添加您的CSS：

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

Answer 2

您必须将网页内容包装在网格类中：

 <link href="//semantic-ui.com/dist/semantic.min.css" rel="stylesheet"/> <script src="//semantic-ui.com/dist/semantic.min.js"></script> <div id="navbar" class="ui fixed inverted main menu"> <div class="container"> <div class="title item"> <b>Dashboard</b> </div> </div> </div> <div class="ui grid"> <div class="row"> <div class="column"> <div id="maincontent" class="ui bottom attached segment pushable"> <div id="sidebar" class="ui visible left vertical sidebar menu"> <a class="item">First Item</a> <a class="item">Second Item</a> <a class="item">Third Item</a> <a class="item">Fourth Item</a> <a class="item">Fifth Item</a> </div> <div id="content" class="pusher"> <div class="ui basic segment"> <h3 class="ui header">Application Content</h3> <p>First paragraph...</p> <p>Second paragraph...</p> <p>Third paragraph...</p> </div> </div> </div> </div> </div> </div> 

Answer 3

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