Üst navbar, ana içeriğiyle üst üste biniyor

Question

Açılış sayfamı Bootstrap'ten Semantic-UI'ye dönüştürüyorum. Sayfa sabit bir üst navbar konumlandırılmıştır. Ana içerik iki sütuna bölünmüştür (3-cols ve 9-cols). Sol sütun, bir kenar çubuğunu göstermek için kullanılır ve mevcut içerik için doğru sütun kullanılır.

Semantic-UI'nin demo sayfasını kopyalayıp yapıştırmayı denedim. Navbar 45px yüksekliğindedir. Ana içeriğin ilk 45px'inin örtüştüğünü fark ettim.

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

Benim şu anki geçici çözüm

gezinme çubuğu sonra 45px yüksek yer tutucu eklemektir.

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

Oldukça iyi css stili adlarının çakışan içeriği düzeltebileceğine eminim.

Answer 1

çözüm daha basit:

Answer 2

navbar ürününüzün fixed sınıfı vardır. Bu sınıfı öğeden çıkarın ve menünüz bir sayfaya sabitlenmeyecek ve ana sayfanın üst üste gelmeyeceği anlamına gelir. kaydırma: İçerik div üzerinde bir yüksekliğe ayarlayın ve sonra taşma ayarlanır Ne yapabilirdi

http://jsfiddle.net/abszsLno/

Answer 3

. Bu sayede herhangi bir uzun içerik div içinde kayar ve sayfa yukarı ve gezinme çubuğunun altında hareket etmez.

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

Izgara sınıfta sayfa içeriğini kaydırmak zorunda.

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

Ve CSS'nizde ekleyin::

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