Wie man die Hauptinhalts-Div-Füllhöhe des Bildschirms mit CSS erstellt [duplicate]

Lesezeit: 9 Minuten

Benutzer-Avatar
Benutzer2713516

Ich habe also eine Webseite mit Kopf-, Haupt- und Fußzeile. Ich möchte, dass der Haupttext 100 % der Seite ausfüllt (zwischen Fußzeile und Kopfzeile zu 100 % füllen). Meine Fußzeile ist absolut positioniert mit unten: 0. Jedes Mal, wenn ich versuche, den Haupttext auf 100 % Höhe zu setzen oder die Position oder etwas zu ändern, wird dies auch der Fall sein Überlauf der Kopfzeile. Wenn wenn setze den Körper auf absolute Position mit top: 40 (da mein Header 40 Pixel hoch ist), wird er einfach 40 Pixel zu weit nach unten gehen und eine Bildlaufleiste erstellen.

Ich habe eine einfache HTML-Datei erstellt, da ich nicht die gesamte Seite/CSS aus dem eigentlichen Projekt posten kann. Mit dem Beispielcode geht der Hauptinhalt, obwohl er den Bildschirm ausfüllt, 40 Pixel zu weit nach unten (Ursache des Headers, nehme ich an).

html,
body {
  margin: 0;
  padding: 0;
}

header {
  height: 40px;
  width: 100%;
  background-color: blue;
}

#maincontent {
  background-color: green;
  height: 100%;
  width: 100%;
}

footer {
  height: 40px;
  width: 100%;
  background-color: grey;
  position: absolute;
  bottom: 0;
}
<html>

<head>
  <title>test</title>
  <link href="https://stackoverflow.com/questions/18665171/style.css" rel="stylesheet" type="text/css">
</head>

<body>
  <header></header>
  <div id="maincontent">

  </div>

  <footer></footer>
</body>

</html>

Weiß jemand die Antwort?

  • Alles ist sehr breit… willst du ie5.5 für mac, ie6, ie7, ie8, ie9, aktuelle Browser (ie10, chrome, ff, opera, safari), oder was?

    – Tschad

    6. September 2013 um 19:36 Uhr


  • Nur eine Randbemerkung: Vermeiden Sie die absolute Positionierung für Website-Hauptabschnitte (Kopfzeile, Hauptteil, Fußzeile usw.). Sie erhalten sehr komische Ergebnisse auf mobilen Browsern und alten Browsern

    – böseReiko

    6. September 2013 um 22:31 Uhr


  • Ich merke es mir 🙂

    – Benutzer2713516

    7. September 2013 um 12:49 Uhr

Benutzer-Avatar
sudhan kantharuban

Diese sind nicht notwendig

  • Abtragshöhe in %
  • jQuery entfernen

Stretch div mit bottom & top :

.mainbody{
    position: absolute;
    top: 40px; /* Header Height */
    bottom: 20px; /* Footer Height */
    width: 100%;
}

überprüfen Sie meinen Code: http://jsfiddle.net/aslancods/mW9WF/

oder hier nachschauen:

body {
    margin:0;
}

.header {
    height: 40px;
    background-color: red;
}

.mainBody {
    background-color: yellow;
    position: absolute;
    top: 40px;
    bottom: 20px;
    width:100%;
}

.content {
    color:#fff;
}

.footer {
    height: 20px;
    background-color: blue;
    
    position: absolute;
    bottom: 0;
    width:100%;
}
<div class="header" >
    &nbsp;
</div>
<div class="mainBody">
    &nbsp;
    <div class="content" >Hello world</div>
</div>
<div class="footer">
    &nbsp;
</div>

  • Header & Body -> ist Position: Statisch, MainBody & Footer -> Position: Absolute. Rechts ? hast du meinen Code von jsFiddle überprüft und befolgt?

    – sudhan kantharuban

    6. September 2013 um 20:14 Uhr

  • Ich habe vergessen, dass ich noch Höhe hatte: 100%, als ich es auf Auto umstellte, funktionierte es 🙂

    – Benutzer2713516

    6. September 2013 um 20:15 Uhr

  • Diese Lösung funktioniert nur gut, wenn Sie die Größe Ihrer Kopf- und Fußzeile kennen. Bitte schauen Sie sich die Lösung von @ Mark Murphy an, wenn Sie unabhängig von den Höhen der Kopf- und Fußzeile arbeiten möchten.

    – Äbsubis

    17. Juli 2015 um 13:03 Uhr

  • @sudhnk Versuchen Sie, mehr Inhalt hinzuzufügen, und es gibt ein Problem, wenn Sie ihn scrollen. jsfiddle.net/sgs7yog0

    – FDisk

    7. Februar 2017 um 9:14 Uhr

  • Diese Lösung hat Probleme. Der Inhalt geht über die Fußzeile hinaus und die Fußzeile scrollt nach oben. Versuchen Sie, dem bereitgestellten jsfiddle-Link eine Reihe von Inhalten hinzuzufügen. Die folgende Lösung funktioniert hervorragend. Versucht auf Chrome und Safari.

    – Landon Poch

    30. März 2018 um 4:30 Uhr


Benutzer-Avatar
Markus Murphy

Dafür sind kein Javascript, keine absolute Positionierung und keine festen Höhen erforderlich.

Hier ist eine All-CSS / Nur-CSS-Methode, die erfordert keine festen Höhen oder absolute Positionierung:

/* Reset */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}


/* Essentials */

.container {
  display: table;
}

.content {
  display: table-row;
  height: 100%;
}

.content-body {
  display: table-cell;
}


/* Aesthetics */

.container {
  width: 100%;
  height: 100%;
}

.header,
.footer {
  padding: 10px 20px;
  background: #f7f7f7;
}

.content-body {
  padding: 20px;
  background: #e7e7e7;
}
<div class="container">
  <header class="header">
    <p>This is the header</p>
  </header>
  <section class="content">
    <div class="content-body">
      <p>This is the content.</p>
    </div>
  </section>
  <footer class="footer">
    <p>This is the footer.</p>
  </footer>
</div>

Der Vorteil dieser Methode besteht darin, dass die Fuß- und Kopfzeile mitwachsen können, um mit ihrem Inhalt übereinzustimmen, und der Körper sich automatisch anpasst. Sie können ihre Höhe auch mit CSS begrenzen.

  • Der Inhaltsbereich erhält keine Bildlaufleiste: jsfiddle.net/AzLQY/517

    – Junle Li

    31. Mai 2016 um 9:13 Uhr

  • @JunleLi Wenn Sie möchten, dass es scrollt, können Sie Folgendes tun: jsfiddle.net/geprhxxv/1

    – Mark Murphy

    1. Juni 2016 um 16:39 Uhr


  • Danke für deine Antwort. Ich möchte eine Lösung mit scrollbarem Hauptbereich und ohne magische Zahl für Kopf- und Fußzeile. Ich suche viel und gebe auf. Wie auch immer, vielen Dank! Ihre Lösung ist inspirierend! 🙂

    – Junle Li

    1. Juni 2016 um 18:36 Uhr

  • @JunleLi In dieser Lösung gibt es keine magischen Zahlen. Klingt also so, als ob du danach suchst oder meintest du das?

    – Mark Murphy

    1. Juni 2016 um 18:39 Uhr

  • Hallo Mark. Das ist ein schöner Weg. Aber es funktioniert nicht für IE. 🙁 Danke für Ihre Hilfe!

    – Junle Li

    1. Juni 2016 um 18:48 Uhr

Benutzer-Avatar
FreudeLeerzeichen

Es gibt eine CSS-Einheit namens Viewport-Höhe / Viewport-Breite.

Beispiel

.mainbody{height: 100vh;} ähnlich html,body{width: 100vw;}

oder 90vh = 90 % der Höhe des Ansichtsfensters.

**IE9+ und die meisten modernen Browser.

  • Dies ist eine gute Lösung, aber vh wird nicht in allen modernen Browsern unterstützt, z. B. iOS 7.1 Safari und Android Chrome < 4.4

    – 1800 INFORMATIONEN

    5. Januar 2015 um 3:02 Uhr

  • Ich sehe ein Problem mit der vh-Einheit in mobilen Browsern. Die URL-Leiste scheint in das ganze vh eingerechnet zu sein. Wenn Sie also scrollen und die URL-Leiste zusammenbricht, scheint es ein Fehler zu sein und die Website versucht, eine Neuberechnung durchzuführen. Nur in Bezug auf die Präsentation ist es schwach. Jemand mit einer Lösung?

    – Eshwaren Manoharen

    25. Oktober 2016 um 2:58 Uhr

  • Das gibt dem Element die Größe des Bildschirms, garantiert aber nicht, dass es tatsächlich den Bildschirm ausfüllt – oder überhaupt auf dem Bildschirm zu sehen ist.

    – jpaugh

    31. August 2017 um 1:20 Uhr


Benutzer-Avatar
Matthew

Dies ermöglicht einen zentrierten Inhaltskörper mit minimaler Breite, damit meine Formulare nicht komisch zusammenbrechen:

html {
    overflow-y: scroll;
    height: 100%;
    margin: 0px auto;
    padding: 0;
}

body {
    height: 100%;
    margin: 0px auto;
    max-width: 960px;
    min-width: 750px;
    padding: 0;
}
div#footer {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 60px;
}

div#wrapper {
    height: auto !important;
    min-height: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

div#pageContent {
    padding-bottom: 60px;
}

div#header {
    width: 100%;
}

Und meine Layoutseite sieht so aus:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
    <title></title>
</head>
<body>
<div id="wrapper">
        <div id="header"></div>
        <div id="pageContent"></div>
        <div id="footer"></div>
    </div>
</body>
</html>

Beispiel hier: http://data.nwtresearch.com/

Noch ein Hinweis: Wenn Sie möchten, dass der Hintergrund der gesamten Seite so aussieht, wie der von Ihnen hinzugefügte Code aussieht, entfernen Sie die height: auto !important; aus dem Wrapper-Div: http://jsfiddle.net/mdares/a8VVw/

Benutzer-Avatar
Knifflig12

Verwenden top: 40px und bottom: 40px (vorausgesetzt, Ihre Fußzeile ist ebenfalls 40 Pixel groß) ohne definierte Höhe können Sie dies zum Laufen bringen.

.header {
    width: 100%;
    height: 40px;
    position: absolute;
    top: 0;
    background-color:red;
}
.mainBody {
    width: 100%;
    top: 40px;
    bottom: 40px;
    position: absolute;
    background-color: gray;
}
.footer {
    width: 100%;
    height: 40px;
    position: absolute;
    bottom: 0;
    background-color: blue;
}

JSFiddle

  • -1 für? Das funktioniert gut.

    – Knifflig12

    6. September 2013 um 19:46 Uhr

  • Ich denke wahrscheinlich, weil er feste Höhen für seine Kopf- und Fußzeile hat.

    – Tschad

    6. September 2013 um 19:50 Uhr

  • feste Höhen für Fußzeile und Kopfzeile ja, also 10% ‘von oben’ funktionieren beim Skalieren nicht.

    – Benutzer2713516

    6. September 2013 um 19:57 Uhr

  • Überprüfen Sie es jetzt, es funktioniert mit Kopf- und Fußzeilen mit fester Höhe.

    – Knifflig12

    6. September 2013 um 19:58 Uhr

  • Das wird nicht mit Inhalt erweitert.

    – Tschad

    6. September 2013 um 20:08 Uhr

Benutzer-Avatar
Tschad

Nun, es gibt verschiedene Implementierungen für verschiedene Browser.

Die einfachste und eleganteste Lösung ist meiner Meinung nach die Verwendung von CSS calc(). Leider ist diese Methode in IE8 und niedriger nicht verfügbar und auch nicht in Android-Browsern und Mobile Opera verfügbar. Wenn Sie dafür jedoch separate Methoden verwenden, können Sie Folgendes versuchen: http://jsfiddle.net/uRskD/

Das Markup:

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

Und das CSS:

html, body {
    height: 100%;
    margin: 0;
}
#header {
    background: #f0f;
    height: 20px;
}
#footer {
    background: #f0f;
    height: 20px;
}
#body {
    background: #0f0;
    min-height: calc(100% - 40px);
}

Meine sekundäre Lösung beinhaltet die Sticky-Footer-Methode und die Box-Größenanpassung. Dies ermöglicht im Wesentlichen, dass das Körperelement 100 % der Höhe seines übergeordneten Elements ausfüllt, und schließt die Polsterung zu 100 % mit ein box-sizing: border-box;. http://jsfiddle.net/uRskD/1/

html, body {
    height: 100%;
    margin: 0;
}
#header {
    background: #f0f;
    height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
#footer {
    background: #f0f;
    height: 20px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
#body {
    background: #0f0;
    min-height: 100%;
    box-sizing: border-box;
    padding-top: 20px;
    padding-bottom: 20px;
}

Meine dritte Methode wäre die Verwendung von jQuery, um die Mindesthöhe des Hauptinhaltsbereichs festzulegen. http://jsfiddle.net/uRskD/2/

html, body {
    height: 100%;
    margin: 0;
}
#header {
    background: #f0f;
    height: 20px;
}
#footer {
    background: #f0f;
    height: 20px;
}
#body {
    background: #0f0;
}

Und die JS:

$(function() {
    headerHeight = $('#header').height();
    footerHeight = $('#footer').height();
    windowHeight = $(window).height();
   $('#body').css('min-height', windowHeight - headerHeight - footerHeight);
});

  • -1 für? Das funktioniert gut.

    – Knifflig12

    6. September 2013 um 19:46 Uhr

  • Ich denke wahrscheinlich, weil er feste Höhen für seine Kopf- und Fußzeile hat.

    – Tschad

    6. September 2013 um 19:50 Uhr

  • feste Höhen für Fußzeile und Kopfzeile ja, also 10% ‘von oben’ funktionieren beim Skalieren nicht.

    – Benutzer2713516

    6. September 2013 um 19:57 Uhr

  • Überprüfen Sie es jetzt, es funktioniert mit Kopf- und Fußzeilen mit fester Höhe.

    – Knifflig12

    6. September 2013 um 19:58 Uhr

  • Das wird nicht mit Inhalt erweitert.

    – Tschad

    6. September 2013 um 20:08 Uhr

Benutzer-Avatar
TyMayn

Ich bin mir nicht sicher, wonach du suchst, aber ich glaube, ich verstehe es.

Eine Kopfzeile – bleibt oben auf dem Bildschirm? Eine Fußzeile – bleibt am unteren Bildschirmrand? Inhaltsbereich -> passt der Abstand zwischen Fußzeile und Kopfzeile?

Sie können dies durch absolute Positionierung oder mit fester Positionierung tun.

Hier ein Beispiel mit absoluter Positionierung: http://jsfiddle.net/FMYXY/1/

Auszeichnung:

<div class="header">Header</div>
<div class="mainbody">Main Body</div>
<div class="footer">Footer</div>

CSS:

.header {outline:1px solid red; height: 40px; position:absolute; top:0px; width:100%;}
.mainbody {outline:1px solid green; min-height:200px; position:absolute; top:40px; width:100%; height:90%;}
.footer {outline:1px solid blue; height:20px; position:absolute; height:25px;bottom:0; width:100%; } 

Damit es am besten funktioniert, würde ich vorschlagen, % anstelle von Pixeln zu verwenden, da Sie Probleme mit unterschiedlichen Bildschirm-/Gerätegrößen haben.

1228410cookie-checkWie man die Hauptinhalts-Div-Füllhöhe des Bildschirms mit CSS erstellt [duplicate]

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy