Erstellen Sie eine variable Höhe "fixiert" - header in CSS mit scrollbaren Inhalt

Ich möchte erstellen Sie eine Kopfzeile auf der Seite, bewegt sich nicht, wenn Sie die Seite scrollen.

Das scheint einfach, fügen Sie einfach "position: fixed" für den Stil, aber der Inhalt erscheint unterhalb der Kopfzeile, da die Kopfzeile ist "entfernt aus dem Fluss". Also die Lösung, die ich denke, ist das hinzufügen von "margin-top: Höhe" auf den Inhalt.

Was ist der beste Weg, um dieses Problem zu lösen, wenn die Höhe des headers ist variabel?

Ich habe eine Geige, die das problem veranschaulicht:

http://jsfiddle.net/waterlooalex/j4Z8F/2/

Angabe Ihrer browser-Fenster ist nicht zu groß, der content-text-scroll unten das 'hello world header', das problem ist, dass die erste Zeile der text "Lorem ipsum..." ist ausgeblendet. Ich habe einige auskommentieren javascript, die Werke rund um das Thema.

Sie wollen also einen header, der Aufenthalt auf der Oberseite der Seite und sich nicht bewegen? Warum nicht einfach machen es einem div und style es wie ein header? Scheint der einfachste Weg
Ich bin mir nicht sicher, ob ich verstehe. Ich verwende ein div, siehe fiddle-link oben.

InformationsquelleAutor Alex Black | 2011-07-20

10

Könnte man hinzufügen, eine zweite Kopie der header div das ist nicht fest und verwenden Sie so etwas wie visibility:hidden auf Sie. So ist es schiebt den content nach unten, um die genaue Stelle, die Sie brauchen, aber ohne Verwendung von JavaScript. Ein bisschen hackish aber ich versuchte es in Ihrer fiddle und es funktioniert.
- Das ist eine Coole Idee, aber beginnt zu fühlen, noch mehr hackish, wenn ich mehr Inhalt, position: fixed...
- Ja, ich Stimme zu, es ist hackish. Sie konnte Minimierung der extra-Bilanz diese erstellt in HTML durch die Verwendung alternativer HTML-Code für die versteckte version, die die gleiche Höhe, aber weniger text. In der fiddle-Beispiel, so etwas wie <h1>X</h1> statt <h1>Hallo Welt</h1>. Triviales Beispiel, aber mit einer komplexeren header, es könnte die Materie eine ganze Menge.
- Schmutzig, aber wirkungsvoll, toll!
- sollte visibility:hidden?
- Du hast Recht. Ich werde den Beitrag editieren. Danke @funkybro!
InformationsquelleAutor curtisdf

Lösen können Sie dieses mit flexbox layout-Modell, wie in der folgenden demo.

Beachten Sie, dass ich Hinzugefügt habe display:flex zu <body> für demo-Zwecke, idealerweise sollten Sie geben es einem mehr bestimmten übergeordneten element.

CSS:

* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
#header {
  background: dodgerblue;
}
h1 {
  font-size: 2em;
  font-weight: 700;
}
#content {
  flex: auto;
  overflow-y: auto;
}

HTML:

<div id="header">
  <h1>hello world</h1>
</div>
<div id="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et ante quam, vitae fringilla odio. Nulla molestie, justo non adipiscing varius, mi turpis luctus ligula, sit amet posuere massa elit a tellus. Cras metus risus, sagittis hendrerit sollicitudin
    in, lobortis at elit. Nam posuere molestie enim, sagittis mattis justo vehicula gravida. Fusce placerat porta fermentum. Sed laoreet leo ac tellus consectetur blandit. Sed consequat, ipsum a imperdiet convallis, elit est ultrices elit, et malesuada
    lorem magna eu eros. Sed convallis adipiscing nibh ut volutpat. In consequat egestas elit, eget venenatis lacus condimentum sed. Maecenas semper sapien in lacus feugiat volutpat vestibulum dolor pulvinar. Duis ultricies interdum ante elementum tempor.</p>

  <p>Aliquam nulla tellus, consequat nec suscipit vitae, laoreet non erat. Donec tempor ligula in nisi porttitor nec interdum magna gravida. Aenean eleifend, ipsum eu tincidunt tristique, orci mi molestie libero, at aliquam massa velit ut tortor. Aenean
    nisi velit, feugiat ut posuere eget, porta ac erat. Morbi lobortis ligula nec sem bibendum in imperdiet ipsum tempus. Integer tincidunt mauris quis justo consequat eget pharetra arcu rutrum. Nullam auctor libero luctus eros porta commodo. Aenean auctor
    libero eu arcu porta cursus. Fusce viverra arcu nec elit rutrum et fringilla lectus vulputate. Integer sed leo sit amet ligula aliquam suscipit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla commodo
    varius lectus, non pellentesque dui ornare vel. Duis pretium purus at sapien sollicitudin posuere. Curabitur volutpat posuere diam, at tincidunt leo lacinia quis. Quisque eu arcu enim. Vestibulum condimentum condimentum erat. Sed eros erat, volutpat
    et molestie nec, pharetra vitae diam. Proin tempus, massa vitae malesuada dignissim, ipsum ipsum sagittis neque, ac vehicula neque odio nec urna.</p>

  <p>Praesent sed arcu in nunc egestas sagittis sollicitudin at nunc. Curabitur mattis viverra odio. Donec volutpat mauris nec libero molestie quis venenatis mauris convallis. Mauris porta varius nibh, id tincidunt nunc ullamcorper in. Vestibulum ante ipsum
    primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce auctor ultrices vulputate. Nam in lacus metus. Duis tempus fringilla lacus ut tristique. Nunc sed hendrerit nunc. Nunc non tellus a magna accumsan volutpat. Aenean sollicitudin
    orci in sapien interdum rhoncus cursus ligula iaculis. Nunc mauris sapien, euismod non egestas vitae, dapibus at libero.</p>

  <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque tortor nisi, pellentesque et vestibulum eu, scelerisque eget est. Vivamus porta erat vitae eros sodales accumsan. Duis ligula dui, scelerisque sollicitudin
    blandit quis, sollicitudin vel ipsum. Sed semper dictum eleifend. Duis diam leo, ultricies at consequat nec, consectetur vel lacus. Proin semper luctus nisl, ut luctus sapien egestas vitae. Maecenas eu est nisi. Aliquam erat volutpat. Sed vulputate
    ligula rutrum nunc fermentum vitae consequat magna congue. Donec accumsan consequat pellentesque. Cras justo enim, venenatis non venenatis eu, faucibus id ligula. Aliquam et lorem purus. Sed fringilla gravida dui vitae viverra. Sed id erat nisl. Nulla
    nibh nisi, luctus sed scelerisque id, congue in risus.</p>

  <p>Phasellus eu purus nibh, sit amet sodales dui. Integer tincidunt magna id sem varius faucibus. Etiam id condimentum velit. Cras cursus diam eget libero tristique malesuada. Pellentesque quis arcu tincidunt dolor adipiscing congue ut a enim. Nulla nec
    lacinia est. Pellentesque nec dui mauris, eu eleifend felis. Aliquam feugiat ultrices mi id hendrerit. Phasellus varius sagittis urna, ut fringilla nisi sollicitudin non. Pellentesque ac ligula dolor, ut volutpat sapien. Curabitur vitae diam quis
    ante laoreet suscipit non vitae tellus. Nam id magna est, eu tincidunt odio.
  </p>
</div>

InformationsquelleAutor T J

Diesem javascript wird die variable Höhe eines festen header und legen Sie den oberen Rand des content-flow unter. Einfach anrufen onload

<script type="text/javascript">
    function AdjustHeight() {
        var height = document.getElementById("fixedheader").offsetHeight;
        document.getElementById("content").style.marginTop = height + 'px';
    }    
</script>

InformationsquelleAutor Keith

0

Habe ich immer einen Rand auf der Oberseite der Inhalt jedoch hoch der header ist, wie mein Kopf normalerweise nicht ändern müssen Höhe.

Wenn Ihr header hat ändern die Höhe dann gehen zu müssen, gehen Sie für die JavaScript zu umgehen, fürchte ich. Wird aus der Strömung bedeutet, dass der rest der Seite wird normal weiter zu tragen und JavaScript haben, um Schritt zu helfen.
- Ah, es ist nicht, dass der header ändert seine Höhe, seine nur, dass ich nicht weiß, wie die Höhe. E. g. seine nicht 100px, seine nur einige der Höhe, basierend auf, was Inhalte, die in ihm ist, und was für die Größe des browser entschieden zu erbringen, dass der Inhalt.
InformationsquelleAutor Flux
0

Um dies zu beheben, ich landete hinzufügen eines 'dummy' - div in meiner Inhalte.
Dieses div die gleiche Höhe hat wie der header-div, damit schiebt den content nach unten genau genug, um die richtige offset.
Dies ist die gleiche Antwort wie oben von @curtisdf, aber er schlägt vor, machen eine Kopie von deinem header, ich bin darauf hindeutet, wodurch ein leeres div mit gleicher Höhe.

Da gibt es viele Gründe, die Höhe ändern kann (Fenster Größe ändern, content ändern, ...) landete ich mit https://github.com/marcj/css-element-queries/blob/master/src/ResizeSensor.js halten der Höhe aus dem dummy-div in sync mit dem echten header:
```
        var me = this;
        var summary = me.summary;
        var dummy = me.summaryDummy;
        var resize = function () {
            dummy.style.height = summary.clientHeight + 'px';
        };
        new ResizeSensor(summary, resize);
        resize();
```
Beachten Sie, dass ich den Verweis auf die real-header (mich.Zusammenfassung) und den dummy (mich.summaryDummy), weil der aurelia.io ' s ref-Implementierung, aber Sie bekommen einen Verweis auf deine divs mit JQuery oder über die ID.

InformationsquelleAutor Jan Van der Haegen

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.