Верхняя панель navbar перекрывается с основным контентом

Я конвертирую свою целевую страницу из Bootstrap в Semantic-UI. Страница имеет положение фиксированной верхней navbar. Основное содержание делится на две колонки (3-cols и 9-cols). Левый столбец используется для отображения боковой панели, а правый столбец-для текущего содержимого.

Я попытался скопировать и вставить демонстрационную страницу Semantic-UI. В navbar является x 45 пикселей высокая. Я заметил, что первые 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 после navbar.

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

Я уверен, что есть некоторые хорошие имена стилей css, которые могут исправить перекрытие контента.

12
css grid-layout html semantic-ui

4 ответов

решение намного проще. Вам просто нужно добавить дополнение к основному контейнеру:

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

вы должны обернуть содержимое страницы в класс сетки:

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

Что вы можете сделать, это установить высоту на div содержимого, а затем установить overflow: scroll. Таким образом, любой длинный контент будет прокручиваться в div, и он не будет двигаться вверх по странице и под навигационной панелью.

1

код navbar и fixed класса. Удалите этот класс из элемента, и ваше меню не будет зафиксировано на странице, поэтому оно не будет перекрывать maincontent.

http://jsfiddle.net/abszsLno/

-2