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

41ik7eoe 于 2023-05-08 发布在其他

关注(0)|答案(3)|浏览(173)

我正在将我的着陆页从Bootstrap转换为Semantic-UI。该页面有一个位置固定的顶部导航栏。主要内容分为两列（3列和9列）。左列用于显示侧边栏，右列用于显示当前内容。
我尝试复制并粘贴Semantic-UI的演示页面。导航栏是45 px高。我注意到主要内容的前45 px是重叠的。

<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>

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

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

我敢肯定有一些好的css样式名称可以解决内容重叠的问题。

css

来源：https://stackoverflow.com/questions/28627049/top-navbar-overlaps-with-main-content

3条答案

按热度按时间

n9vozmp41#

解决办法要简单得多。你只需要在你的主容器中添加一个padding：

<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;
}

赞(0）回复(0）举报 2023-05-08

yqlxgs2m2#

你必须将你的页面内容 Package 在网格类中：

<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>

赞(0）回复(0）举报 2023-05-08

axkjgtzd3#

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

赞(0）回复(0）举报 2023-05-08