Я конвертирую свою целевую страницу из 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>