Kopf- und Fußzeile mit scrollbarem Inhalt korrigiert

Question 1

Wie kann ich eine feste Kopf- und Fußzeile mit scrollbarem Inhalt erhalten? So etwas wie diese Seite . Ich kann mir die Quelle ansehen, um das CSS zu erhalten, aber ich möchte nur das Minimum an CSS und HTML kennen, das ich brauche, damit dies funktioniert.

Question 2

Etwas wie das

<html>
  <body style="height:100%; width:100%">
    <div id="header" style="position:absolute; top:0px; left:0px; height:200px; right:0px;overflow:hidden;"> 
    </div> 
    <div id="content" style="position:absolute; top:200px; bottom:200px; left:0px; right:0px; overflow:auto;"> 
    </div> 
    <div id="footer" style="position:absolute; bottom:0px; height:200px; left:0px; right:0px; overflow:hidden;"> 
    </div>
  </body>
</html>

Question 3

Wenn Sie auf Browser abzielen, die flexible Boxen unterstützen, können Sie Folgendes tun: http://jsfiddle.net/meyertee/AH3pE/

HTML

<div class="container">
    <header><h1>Header</h1></header>
    <div class="body">Body</div>
    <footer><h3>Footer</h3></footer>
</div>

CSS

.container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

header {
    flex-shrink: 0;
}
.body{
    flex-grow: 1;
    overflow: auto;
    min-height: 2em;
}
footer{
    flex-shrink: 0;
}

Update:
Informationen zur Browserunterstützung flexibler Boxen finden Sie unter "Kann ich verwenden ?" .

Question 4

Ansatz 1 - Flexbox

Es funktioniert sowohl für bekannte als auch für unbekannte Höhenelemente. Stellen Sie sicher, dass das äußere Div auf eingestellt ist, height: 100%;und setzen Sie die Standardeinstellung marginauf zurück body. Siehe die Browser-Support-Tabellen .

jsFiddle

html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header, .footer {
  background: silver;
}
.content {
  flex: 1;
  overflow: auto;
  background: pink;
}

<div class="wrapper">
  <div class="header">Header</div>
  <div class="content">
    <div style="height:1000px;">Content</div>
  </div>
  <div class="footer">Footer</div>
</div>

Erweitern Sie das Snippet

Ansatz 2 - CSS-Tabelle

Für bekannte und unbekannte Höhenelemente. Es funktioniert auch in älteren Browsern einschließlich IE8.

jsFiddle

Code-Snippet anzeigen

html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  height: 100%;
  width: 100%;
  display: table;
}
.header, .content, .footer {
  display: table-row;
}
.header, .footer {
  background: silver;
}
.inner {
  display: table-cell;
}
.content .inner {
  height: 100%;
  position: relative;
  background: pink;
}
.scrollable {
  position: absolute;
  left: 0; right: 0;
  top: 0; bottom: 0;
  overflow: auto;
}

<div class="wrapper">
  <div class="header">
    <div class="inner">Header</div>
  </div>
  <div class="content">
    <div class="inner">
      <div class="scrollable">
        <div style="height:1000px;">Content</div>
      </div>
    </div>
  </div>
  <div class="footer">
    <div class="inner">Footer</div>
  </div>
</div>

Erweitern Sie das Snippet

Ansatz 3 - `calc()`

Wenn Kopf- und Fußzeile eine feste Höhe haben, können Sie CSS verwenden calc().

jsFiddle

Code-Snippet anzeigen

html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  height: 100%;
}
.header, .footer {
  height: 50px;
  background: silver;
}
.content {
  height: calc(100% - 100px);
  overflow: auto;
  background: pink;
}

<div class="wrapper">
  <div class="header">Header</div>
  <div class="content">
    <div style="height:1000px;">Content</div>
  </div>
  <div class="footer">Footer</div>
</div>

Erweitern Sie das Snippet

Ansatz 4 -% für alle

Wenn die Kopf- und Fußzeile eine bekannte Höhe haben und auch prozentual sind, können Sie einfach die einfache Berechnung durchführen, um sie zu 100% hoch zu machen.

Code-Snippet anzeigen

html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  height: 100%;
}
.header, .footer {
  height: 10%;
  background: silver;
}
.content {
  height: 80%;
  overflow: auto;
  background: pink;
}

<div class="wrapper">
  <div class="header">Header</div>
  <div class="content">
    <div style="height:1000px;">Content</div>
  </div>
  <div class="footer">Footer</div>
</div>

Erweitern Sie das Snippet

jsFiddle

Question 5

Jetzt haben wir ein CSS-Raster. Willkommen im Jahr 2019.

/* Required */
body {
   margin: 0;
   height: 100%;
}

#wrapper {
   height: 100vh;
   display: grid;
   grid-template-rows: 30px 1fr 30px;
}

#content {
   overflow-y: scroll;
}

/* Optional */
#wrapper > * {
   padding: 5px;
}

#header {
   background-color: #ff0000ff;
}

#content {
   background-color: #00ff00ff;
}

#footer {
   background-color: #0000ffff;
}

<body>
   <div id="wrapper">
      <div id="header">Header Content</div>
      <div id="content">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
      <div id="footer">Footer Content</div>
   </div>
</body>

Erweitern Sie das Snippet

Question 6

Ab 2013: Dies wäre mein Ansatz. jsFiddle:

HTML

<header class="container global-header">
    <h1>Header (fixed)</h1>
</header>

<div class="container main-content">
    <div class="inner-w">
        <h1>Main Content</h1>
    </div><!-- .inner-w -->
</div> <!-- .main-content -->

<footer class="container global-footer">
    <h3>Footer (fixed)</h3>
</footer>

SCSS

// User reset

* { // creates a natural box model layout
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} // asume normalize.css


// structure

.container {
    position: relative;
    width: 100%;
    float: left;
    padding: 1em;
}


// type

body {
    font-family: arial;   
}

.main-content {
    h1 {
        font-size: 2em;
        font-weight: bold;
        margin-bottom: .2em;
    }
} // .main-content


// style

    // variables
    $global-header-height: 8em;
    $global-footer-height: 6em;

.global-header {
    position: fixed;
    top: 0; left: 0;
    background-color: gray;
    height: $global-header-height;
}

.main-content {
    background-color: orange;
    margin-top: $global-header-height;
    margin-bottom: $global-footer-height;
    z-index: -1; // so header will be on top
    min-height: 50em; // to make it long so you can see the scrolling
}

.global-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    height: $global-footer-height;
    background-color: gray;
}

Question 7

Folgendes hat bei mir funktioniert. Ich musste einen Rand unten hinzufügen, damit die Fußzeile meinen Inhalt nicht auffrisst:

header {
  height: 20px;
  background-color: #1d0d0a;
  position: fixed;
  top: 0;
  width: 100%;
  overflow: hide;
}

content {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 100px;
  margin-top: 20px;
  overflow: auto;
  width: 80%;
}

footer {
  position: fixed;
  bottom: 0px;
  overflow: hide;
  width: 100%;
}

Answer 1

83

Wie kann ich eine feste Kopf- und Fußzeile mit scrollbarem Inhalt erhalten? So etwas wie diese Seite . Ich kann mir die Quelle ansehen, um das CSS zu erhalten, aber ich möchte nur das Minimum an CSS und HTML kennen, das ich brauche, damit dies funktioniert.

html css RKP
quelle

gleiche Frage mit diesen Qualifikanten: eckig, materialisieren ...

mobibob

Answer 2

gleiche Frage mit diesen Qualifikanten: eckig, materialisieren ...

mobibob

Answer 3

130

Etwas wie das

<html>
  <body style="height:100%; width:100%">
    <div id="header" style="position:absolute; top:0px; left:0px; height:200px; right:0px;overflow:hidden;"> 
    </div> 
    <div id="content" style="position:absolute; top:200px; bottom:200px; left:0px; right:0px; overflow:auto;"> 
    </div> 
    <div id="footer" style="position:absolute; bottom:0px; height:200px; left:0px; right:0px; overflow:hidden;"> 
    </div>
  </body>
</html>

John Hartsock
quelle

Nicht im Zusammenhang mit den Abstimmungen, aber ich bin hierher gekommen und das hat bei mir nicht funktioniert (und ich habe den Stil buchstäblich kopiert). Wahrscheinlich spielt jQuery Mobile herum. Aber selbst wenn es funktioniert hat, mag ich es nicht, die festen Abmessungen zu harcodieren. Ich denke, HTML / CSS ist ein Schritt zurück von nativen UI-Komponenten. In jeder nativen Plattform, mit der ich gearbeitet habe, war es ein Kinderspiel, scrollbare Container herzustellen.

Mister Smith

@MisterSmith Entschuldigung, ich habe eindeutig vergessen, den Stil hinzuzufügen, um die rechte Seite der Container zu sperren. Außerdem wird dieser Code nur auf die Größe seines Containers gerendert. Wenn es sich unter dem Body-Tag befindet und Sie einen Vollbildmodus wünschen, müssen Sie Höhe und Breite auf 100% einstellen. Was schließlich die hartcodierten Stile betrifft, ist dies nur ein Beispiel und nicht für die Produktionsfreigabe. Ich würde niemals Inline-Stile wie diesen veröffentlichen, aber es schien eine angemessenere Möglichkeit zu sein, die Antwort zu erklären.

John Hartsock

@ JohnHartsock Auf jeden Fall war es JQM, der schlechte Dinge tat. Was die fest codierten Dimensionen betrifft, mag ich es nicht, die absolute Höhe in Pixel einzustellen. Auf anderen Plattformen, mit denen ich gearbeitet habe, war es möglich, einen Container zu erstellen und ihn anzuweisen, die erforderliche Höhe zu verwenden.

Mister Smith

@ Herr Smith. Sie müssen die Abmessungen in px nicht fest codieren. Sie können Prozentsätze verwenden, wenn Sie möchten. Außerdem müssen Sie den Stil nicht über das style-Attribut im Tag festlegen, sondern nur ein CSS-Stylesheet einrichten, das auf die IDs verweist. Ich habe die Dinge in der Antwort einfach so gemacht, um es sehr einfach zu verstehen.

John Hartsock

2

@ JohnHartsock Downvotes wahrscheinlich, weil es Inline-CSS ist und nicht erklärt, warum es nur eine Antwort zum Kopieren und Einfügen ist

treyBake

Answer 4

Nicht im Zusammenhang mit den Abstimmungen, aber ich bin hierher gekommen und das hat bei mir nicht funktioniert (und ich habe den Stil buchstäblich kopiert). Wahrscheinlich spielt jQuery Mobile herum. Aber selbst wenn es funktioniert hat, mag ich es nicht, die festen Abmessungen zu harcodieren. Ich denke, HTML / CSS ist ein Schritt zurück von nativen UI-Komponenten. In jeder nativen Plattform, mit der ich gearbeitet habe, war es ein Kinderspiel, scrollbare Container herzustellen.

Mister Smith

Answer 5

@MisterSmith Entschuldigung, ich habe eindeutig vergessen, den Stil hinzuzufügen, um die rechte Seite der Container zu sperren. Außerdem wird dieser Code nur auf die Größe seines Containers gerendert. Wenn es sich unter dem Body-Tag befindet und Sie einen Vollbildmodus wünschen, müssen Sie Höhe und Breite auf 100% einstellen. Was schließlich die hartcodierten Stile betrifft, ist dies nur ein Beispiel und nicht für die Produktionsfreigabe. Ich würde niemals Inline-Stile wie diesen veröffentlichen, aber es schien eine angemessenere Möglichkeit zu sein, die Antwort zu erklären.

John Hartsock

Answer 6

@ JohnHartsock Auf jeden Fall war es JQM, der schlechte Dinge tat. Was die fest codierten Dimensionen betrifft, mag ich es nicht, die absolute Höhe in Pixel einzustellen. Auf anderen Plattformen, mit denen ich gearbeitet habe, war es möglich, einen Container zu erstellen und ihn anzuweisen, die erforderliche Höhe zu verwenden.

Mister Smith

Answer 7

@ Herr Smith. Sie müssen die Abmessungen in px nicht fest codieren. Sie können Prozentsätze verwenden, wenn Sie möchten. Außerdem müssen Sie den Stil nicht über das style-Attribut im Tag festlegen, sondern nur ein CSS-Stylesheet einrichten, das auf die IDs verweist. Ich habe die Dinge in der Antwort einfach so gemacht, um es sehr einfach zu verstehen.

John Hartsock

Answer 8

2

@ JohnHartsock Downvotes wahrscheinlich, weil es Inline-CSS ist und nicht erklärt, warum es nur eine Antwort zum Kopieren und Einfügen ist

treyBake

Answer 9

61

Wenn Sie auf Browser abzielen, die flexible Boxen unterstützen, können Sie Folgendes tun: http://jsfiddle.net/meyertee/AH3pE/

HTML

<div class="container">
    <header><h1>Header</h1></header>
    <div class="body">Body</div>
    <footer><h3>Footer</h3></footer>
</div>

CSS

.container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

header {
    flex-shrink: 0;
}
.body{
    flex-grow: 1;
    overflow: auto;
    min-height: 2em;
}
footer{
    flex-shrink: 0;
}

Update:
Informationen zur Browserunterstützung flexibler Boxen finden Sie unter "Kann ich verwenden ?" .

meyertee
quelle

Ich verwende eine Kopf- und Fußzeile mit variabler Höhe und glaube, dass dies den Trick für mich tun wird. Zum Glück ziele ich auch auf die neuesten Browser. Vielen Dank!

Jimmie Tyrrell

Toll! Gibt es eine Möglichkeit, ein anderes solches Konstrukt in das .bodyGebiet zu bringen? Wenn ich das mache, .containerrollt das Äußere aus der Ansicht heraus, sobald das Innere .body .bodyganz nach unten gescrollt ist.

Philk

1

Dies ist meiner Meinung nach die beste Antwort und dies sollte die beste Antwort sein! Vielen Dank!

Kombinieren Sie den

Wenn ich mich nicht irre, ist dies die Antwort auf eine andere Frage? Hier erscheint die Bildlaufleiste auf der gesamten Seite, während in der Antwort von John die Bildlaufleiste nur auf dem Hauptinhalt erscheint (was stellt die Frage)? Zumindest sehe ich das in der Geige.

Bersling

Answer 10

Ich verwende eine Kopf- und Fußzeile mit variabler Höhe und glaube, dass dies den Trick für mich tun wird. Zum Glück ziele ich auch auf die neuesten Browser. Vielen Dank!

Jimmie Tyrrell

Answer 11

Toll! Gibt es eine Möglichkeit, ein anderes solches Konstrukt in das .bodyGebiet zu bringen? Wenn ich das mache, .containerrollt das Äußere aus der Ansicht heraus, sobald das Innere .body .bodyganz nach unten gescrollt ist.

Philk

Answer 12

1

Dies ist meiner Meinung nach die beste Antwort und dies sollte die beste Antwort sein! Vielen Dank!

Kombinieren Sie den

Answer 13

Wenn ich mich nicht irre, ist dies die Antwort auf eine andere Frage? Hier erscheint die Bildlaufleiste auf der gesamten Seite, während in der Antwort von John die Bildlaufleiste nur auf dem Hauptinhalt erscheint (was stellt die Frage)? Zumindest sehe ich das in der Geige.

Bersling

Answer 14

Ansatz 1 - Flexbox

Es funktioniert sowohl für bekannte als auch für unbekannte Höhenelemente. Stellen Sie sicher, dass das äußere Div auf eingestellt ist, height: 100%;und setzen Sie die Standardeinstellung marginauf zurück body. Siehe die Browser-Support-Tabellen .

jsFiddle

html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header, .footer {
  background: silver;
}
.content {
  flex: 1;
  overflow: auto;
  background: pink;
}

<div class="wrapper">
  <div class="header">Header</div>
  <div class="content">
    <div style="height:1000px;">Content</div>
  </div>
  <div class="footer">Footer</div>
</div>

Erweitern Sie das Snippet

Ansatz 2 - CSS-Tabelle

Für bekannte und unbekannte Höhenelemente. Es funktioniert auch in älteren Browsern einschließlich IE8.

jsFiddle

Code-Snippet anzeigen

html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  height: 100%;
  width: 100%;
  display: table;
}
.header, .content, .footer {
  display: table-row;
}
.header, .footer {
  background: silver;
}
.inner {
  display: table-cell;
}
.content .inner {
  height: 100%;
  position: relative;
  background: pink;
}
.scrollable {
  position: absolute;
  left: 0; right: 0;
  top: 0; bottom: 0;
  overflow: auto;
}

<div class="wrapper">
  <div class="header">
    <div class="inner">Header</div>
  </div>
  <div class="content">
    <div class="inner">
      <div class="scrollable">
        <div style="height:1000px;">Content</div>
      </div>
    </div>
  </div>
  <div class="footer">
    <div class="inner">Footer</div>
  </div>
</div>

Erweitern Sie das Snippet

Ansatz 3 - `calc()`

Wenn Kopf- und Fußzeile eine feste Höhe haben, können Sie CSS verwenden calc().

jsFiddle

Code-Snippet anzeigen

html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  height: 100%;
}
.header, .footer {
  height: 50px;
  background: silver;
}
.content {
  height: calc(100% - 100px);
  overflow: auto;
  background: pink;
}

<div class="wrapper">
  <div class="header">Header</div>
  <div class="content">
    <div style="height:1000px;">Content</div>
  </div>
  <div class="footer">Footer</div>
</div>

Erweitern Sie das Snippet

Ansatz 4 -% für alle

Wenn die Kopf- und Fußzeile eine bekannte Höhe haben und auch prozentual sind, können Sie einfach die einfache Berechnung durchführen, um sie zu 100% hoch zu machen.

Code-Snippet anzeigen

html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  height: 100%;
}
.header, .footer {
  height: 10%;
  background: silver;
}
.content {
  height: 80%;
  overflow: auto;
  background: pink;
}

<div class="wrapper">
  <div class="header">Header</div>
  <div class="content">
    <div style="height:1000px;">Content</div>
  </div>
  <div class="footer">Footer</div>
</div>

Erweitern Sie das Snippet

jsFiddle

Answer 15

Jetzt haben wir ein CSS-Raster. Willkommen im Jahr 2019.

/* Required */
body {
   margin: 0;
   height: 100%;
}

#wrapper {
   height: 100vh;
   display: grid;
   grid-template-rows: 30px 1fr 30px;
}

#content {
   overflow-y: scroll;
}

/* Optional */
#wrapper > * {
   padding: 5px;
}

#header {
   background-color: #ff0000ff;
}

#content {
   background-color: #00ff00ff;
}

#footer {
   background-color: #0000ffff;
}

<body>
   <div id="wrapper">
      <div id="header">Header Content</div>
      <div id="content">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
      <div id="footer">Footer Content</div>
   </div>
</body>

Erweitern Sie das Snippet

Answer 16

1

Sie brauchen die Körpergröße nicht. Stellen Sie einfach die Wrapper-Höhe auf 100 VH ein, und es funktioniert sowohl hier als auch in freier Wildbahn.

Henrique Erzinger

Answer 17

Ab 2013: Dies wäre mein Ansatz. jsFiddle:

HTML

<header class="container global-header">
    <h1>Header (fixed)</h1>
</header>

<div class="container main-content">
    <div class="inner-w">
        <h1>Main Content</h1>
    </div><!-- .inner-w -->
</div> <!-- .main-content -->

<footer class="container global-footer">
    <h3>Footer (fixed)</h3>
</footer>

SCSS

// User reset

* { // creates a natural box model layout
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} // asume normalize.css


// structure

.container {
    position: relative;
    width: 100%;
    float: left;
    padding: 1em;
}


// type

body {
    font-family: arial;   
}

.main-content {
    h1 {
        font-size: 2em;
        font-weight: bold;
        margin-bottom: .2em;
    }
} // .main-content


// style

    // variables
    $global-header-height: 8em;
    $global-footer-height: 6em;

.global-header {
    position: fixed;
    top: 0; left: 0;
    background-color: gray;
    height: $global-header-height;
}

.main-content {
    background-color: orange;
    margin-top: $global-header-height;
    margin-bottom: $global-footer-height;
    z-index: -1; // so header will be on top
    min-height: 50em; // to make it long so you can see the scrolling
}

.global-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    height: $global-footer-height;
    background-color: gray;
}

Answer 18

Ich würde wahrscheinlich ab 2016 Flex-Box verwenden. Es hängt jedoch immer vom Kontext ab. Heikle Situationen! :)

sheriffderek

Answer 19

Folgendes hat bei mir funktioniert. Ich musste einen Rand unten hinzufügen, damit die Fußzeile meinen Inhalt nicht auffrisst:

header {
  height: 20px;
  background-color: #1d0d0a;
  position: fixed;
  top: 0;
  width: 100%;
  overflow: hide;
}

content {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 100px;
  margin-top: 20px;
  overflow: auto;
  width: 80%;
}

footer {
  position: fixed;
  bottom: 0px;
  overflow: hide;
  width: 100%;
}

Kopf- und Fußzeile mit scrollbarem Inhalt korrigiert

Antworten:

Ansatz 1 - Flexbox

Ansatz 2 - CSS-Tabelle

Ansatz 3 - calc()

Ansatz 4 -% für alle

Ansatz 3 - `calc()`