Position fixed content überlagernde problem

Dies ist meine html5-markup 

<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>

Nun css

header{ height: 95px;position: fixed;width: 100%;min-width: 980px;}
footer{background:#000000;bottom:0;height:30px;position:fixed;width:100%;min-width: 980px}

Nun mein problem ist, wenn ich alle Inhalte in 

<div id="content">
</div>

Den Inhalt kommt von oben:0 ist nicht erforderlich. Ich möchte nicht use padding oder margin-top über den Inhalt. Gibt es eine Möglichkeit, von dem Inhalt unten kommt-header.

  • Was ist ein <content> tag? Wo hast du diese Idee aus?
  • write tag "<Artikel>" statt "<content>"
InformationsquelleAutor Soarabh | 2011-03-15
  1. 9

    Ist der Hauptgrund, weil die <header> ist position:fixed man es aus dem Belegfluss. Müssen Sie margin oder padding entweder die <body> oder Ihre <content>(??) element. Auch, wenn Sie mit HTML5-Elemente, fügen Sie diese an den Anfang Ihrer CSS-Regeln für die Kompatibilität mit älteren Browsern.

    /* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}

    Entnommen Eric Meyer ' s CSS Reset.

    InformationsquelleAutor Marcel
  2. 2

    Folgen die HTML5-tags, die vorhanden sind. Wenn Sie gehen, um Ihre eigenen erstellen, dann könnte das haben consequencies.

    Hier Folgen. 

    <header>
</header>
<section>
</section>
<footer>
</footer>

    Lernen über gültige HTML5-tags Folgen Sie bitte diesem link.

    InformationsquelleAutor Starx
  3. 1

    Sie nicht noch andere layout-Anforderungen, die Sie haben können, aber das wäre ein guter Anfang

    content {position: relative; top: 95px}

    Update

    Als die anderen guten Menschen, <content> ist keine gültige HTML5-tag. Vielleicht ist es doesn T haben zu tun mit der konkreten Frage, sondern Folgen Ihren Rat, und zu vermeiden, Rollen Sie Ihre eigenen tags. Verwenden Sie ein standard anstelle.

    • Ich glaube nicht, Sie sollte ermutigend sein die OP zu schreiben, seine eigenen custom-tags.
    • Ich 'm nicht gerade ermutigend alles. Du und alle anderen Recht, die sagen "nicht verwenden <content>", aber das wäre immer noch keine Lösung für die OP ' s problem.
    • IMO der Straße zu beginnen, die Lösung seines Problems ist, beginnt, wenn er entfernt seine <content> tag
    InformationsquelleAutor Jon
  4. 0

    Ich nehme an, Sie meine nicht wirklich <content>, als dass nicht eine gültige HTML5-tag. Trotzdem, das problem, das Sie sehen, ist bis auf die position: fixed Richtlinie für Ihre <header> element. Versuchen Sie, und gehen von dort aus.

    InformationsquelleAutor Ben
  5. 0

    Wenn andere Lösungen nicht funktionieren, überprüfen Sie, dass Ihr hintergrund/hintergrund-Farbe ist nicht transparent, und auf weiß eingestellt.

    InformationsquelleAutor ElaGorilaki
  6. 0

    Also für das, was ich von dieser Frage, dass Sie versuchen, nicht zu überlappen Zeug, könnten Sie mit z-index innerhalb Ihrer div's css:

    .Beispiel {

        position: absolute;

    z-index: -10;

    }

    z-index funktioniert nur bei positionierten Elementen (position:absolute, position:relative oder position:fixed)

    InformationsquelleAutor Diego Grin
Schreibe einen Kommentar