web-dev-qa-db-de.com

Die obere Navigationsleiste überschneidet sich mit dem Hauptinhalt

Ich konvertiere meine Landing Page von Bootstrap zu Semantic-UI. Die Seite hat eine positionierte obere Navigationsleiste. Der Hauptinhalt ist in zwei Spalten (3-Spalten und 9-Spalten) unterteilt. In der linken Spalte wird eine Seitenleiste angezeigt und in der rechten Spalte wird der aktuelle Inhalt angezeigt.

Ich habe versucht, die Demoseite von Semantic-UI zu kopieren. Die Navbar ist 45px hoch. Mir ist aufgefallen, dass sich die ersten 45px des Hauptinhalts überschneiden.

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

Meine derzeitige Problemumgehung besteht darin, nach der Navbar einen 45px hohen Platzhalter hinzuzufügen.

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

Ich bin mir ziemlich sicher, dass es einige gute CSS-Stilnamen gibt, die den überlappenden Inhalt korrigieren können. 

htmlcssgrid-layoutsemantic-ui
13
stanleyxu2005

Die Lösung ist viel einfacher. Sie müssen nur eine Auffüllung zu Ihrem Hauptcontainer hinzufügen:

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

Und fügen Sie in Ihrem CSS hinzu:

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

Sie müssen Ihren Seiteninhalt in die Raster-Klasse einschließen:

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

Was Sie tun können, ist die Höhe des Inhaltsdivs und dann den Überlauf einzustellen: Bildlauf. Auf diese Weise scrollen alle langen Inhalte im div und sie bewegen sich nicht auf der Seite und unter der Navigationsleiste.

1
I_Khanage