Wie erzwinge ich, dass ein DIV-Block bis zum Ende einer Seite reicht, auch wenn er keinen Inhalt hat?

190

In dem unten gezeigten Markup versuche ich, den Inhaltsbereich bis zum Ende der Seite zu strecken, aber er wird nur gedehnt, wenn Inhalt angezeigt werden soll. Der Grund, warum ich dies tun möchte, ist, dass der vertikale Rand immer noch auf der Seite angezeigt wird, auch wenn kein Inhalt angezeigt werden soll.

Hier ist mein HTML :

<body>
    <form id="form1">
    <div id="header">
        <a title="Home" href="index.html" />
    </div>

    <div id="menuwrapper">
        <div id="menu">
        </div>
    </div>

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

Und mein CSS :

body {
    font-family: Trebuchet MS, Verdana, MS Sans Serif;
    font-size:0.9em;
    margin:0;
    padding:0;
}
div#header {
    width: 100%;
    height: 100px;
}
#header a {
    background-position: 100px 30px;
    background: transparent url(site-style-images/sitelogo.jpg) no-repeat fixed 100px 30px;
    height: 80px;
    display: block;
}
#header, #menuwrapper {
    background-repeat: repeat;
    background-image: url(site-style-images/darkblue_background_color.jpg);
}
#menu #menuwrapper {
    height:25px;
}
div#menuwrapper {
    width:100%
}
#menu, #content {
    width:1024px;
    margin: 0 auto;
}
div#menu {
    height: 25px;
    background-color:#50657a;
}
css html border Vince Panuccio
quelle
Was soll es tun, wenn mehr Inhalte vorhanden sind, als auf die Seite passen? Welche Browser interessieren Sie?
drs9222

Antworten:

117

Ihr Problem ist nicht, dass sich das div nicht auf 100% Höhe befindet, sondern dass sich der Container um es herum nicht befindet. Dies hilft in dem Browser, von dem ich vermute, dass Sie ihn verwenden:

html,body { height:100%; }

Möglicherweise müssen Sie auch das Auffüllen und die Ränder anpassen, aber dies bringt Sie zu 90% dorthin. Wenn Sie es mit allen Browsern zum Laufen bringen möchten, müssen Sie ein wenig damit herumspielen.

Diese Seite hat einige hervorragende Beispiele:

http://www.brunildo.org/test/html_body_0.html
http://www.brunildo.org/test/html_body_11b.html
http://www.brunildo.org/test/index.html

Ich empfehle auch, zu http://quirksmode.org/ zu gehen.

Jason Hernandez
quelle
46
Diese Lösung ist nicht für Seiten geeignet, die einen Bildlauf durchführen.
Jbranchaud
3
Min-Höhe Eigenschaft in CSS sollte ihm helfen ... Ich denke
Alfabravo
1
Interessanterweise sortierte dies meine Bildlaufprobleme, anstatt sie zu verursachen
Alan Macdonald
In der neuesten Version von Chrome funktioniert das bei mir nicht.
HelloWorldNoMore
48

Ich werde versuchen, die Frage direkt im Titel zu beantworten, anstatt unbedingt eine Fußzeile am Ende der Seite anzubringen.

Lassen Sie div bis zum Ende der Seite verlängern, wenn nicht genügend Inhalt vorhanden ist, um das verfügbare vertikale Browser-Ansichtsfenster zu füllen:

Demo unter (ziehen Sie den Rahmengriff, um den Effekt zu sehen): http://jsfiddle.net/NN7ky
(Oberseite: sauber, einfach. Nachteil: erfordert Flexbox - http://caniuse.com/flexbox )

HTML:

<body>

  <div class=div1>
    div1<br>
    div1<br>
    div1<br>
  </div>

  <div class=div2>
    div2<br>
    div2<br>
    div2<br>
  </div>

</body>

CSS:

* { padding: 0; margin: 0; }

html, body {
  height: 100%;

  display: flex;
  flex-direction: column;
}

body > * {
  flex-shrink: 0;
}

.div1 { background-color: yellow; }

.div2 {
  background-color: orange;
  flex-grow: 1;
}

ta-da - oder ich bin einfach zu müde

Gima
quelle
14
Einige von uns haben das Glück, nur "moderne" Browser zu unterstützen, daher war dies für mich unglaublich nützlich. Danke Gima. Ich habe verschiedene Möglichkeiten ausprobiert, um so etwas zu tun, aber es wurde immer auf verschiedene subtile Arten gebrochen. Das ist viel besser. Ich verstehe immer noch nicht genau, warum es so funktioniert.
Chris Nicola
1
Das Flexbox-Element versucht, seinen Inhaltsbereich auf die darin enthaltenen Elemente aufzuteilen. Die von mir angebotene Lösung funktioniert durch 1) Verweigern des Verkleinerns von Divs und 2) Ermöglichen des Wachstums von .div2. Daher schrumpfen Divs nicht, um ihren Inhalt zu verbergen, und nur .div2 darf erweitert werden.
Gima
Dies behebt das Problem, das ich in Firefox hatte, wo der Inhalt für den Browser noch etwas zu groß war. Leider behebt dies allein in Chrome dieses Problem nicht. Wenn Sie jedoch auch den Rand und das Auffüllen auf 0 setzen, ist dies der Fall.
Michael Scheper
Dies ist die richtige Antwort, min-height: 100% funktioniert nur, wenn sich nichts mehr im übergeordneten Container befindet, und calc hilft nicht wirklich, wenn die Geschwister über dem expandierenden Element eine unbekannte Höhe haben
zakius
Nach stundenlangem Kampf mit diesem Problem ist dies die einzige Lösung, die es wirklich für mich behoben hat. Es fehlt nur eine kleine Erklärung, was jeder Teil tut. Aber trotzdem vielen Dank @Gima.
Pylund
18

Versuchen Sie, mit der folgenden CSS-Regel herumzuspielen:

#content {
    min-height: 600px;
    height: auto !important;
    height: 600px;
}

Ändern Sie die Höhe entsprechend Ihrer Seite. Die Höhe wird aus Gründen der Cross-Browser-Kompatibilität zweimal angegeben.

Kevin Read
quelle
Dies funktioniert, aber ich habe festgestellt, dass beim Erhöhen der Mindesthöhe auf mehr als 600 Pixel eine Schriftrolle erstellt wird. Haben Sie eine Idee, warum dies geschieht?
Siddharth Patel
1
@SiddharthPatel Weil das #content div sein übergeordnetes Element überläuft. Stellen Sie also das übergeordnete Element des div #content so ein, dass es einen Überlauf: auto oder overflow: hidden css-Wert hat, und es sollte erweitert / überlaufen, um zu passen, anstatt zu scrollen. Wäre wahrscheinlich besser, solche Fragen als neue Fragen beim nächsten Mal zu stellen, als Kommentare :)
Colt McCormack
Nachdem Sie die Methode jeder Antwort ausprobiert haben, ist dies die einzige, die funktioniert. Auch dies funktioniert einwandfrei, da ich den Höhenwert an die Höhe der Seite anpassen muss, sodass Anpassungen erforderlich sind. Es funktioniert jedoch für alle Browser gleichermaßen.
TARKUS
Vielen Dank für diese Antwort. Es ist einfach und funktioniert gut auf mehreren Plattformen. Ich hatte dies tatsächlich schon einmal benutzt, ohne es vor ungefähr einem Jahr zu bemerken. Ich wünschte, ich könnte zweimal upvoten.
vedi0boy
6

Sie können es mit der Min-Höhe- Deklaration hacken

<div style="min-height: 100%">stuff</div>
Owen
quelle
3

Die Eigenschaft min-height wird nicht von allen Browsern unterstützt. Wenn Sie Ihren #content benötigen, um seine Höhe auf längeren Seiten zu erweitern, wird er durch die Eigenschaft height gekürzt.

Es ist ein bisschen wie ein Hack, aber Sie könnten ein leeres Div mit einer Breite von 1px und einer Höhe von zB 1000px in Ihrem #content div hinzufügen. Dadurch wird der Inhalt mindestens 1000 Pixel hoch und bei längeren Inhalten kann die Höhe bei Bedarf verlängert werden

Gen
quelle
3

Es ist zwar nicht so elegant wie reines CSS, aber ein bisschen Javascript kann dabei helfen:

<html>
<head>
<style type='text/css'>
    div {
        border: 1px solid #000000;
    } 
</style>
<script type='text/javascript'>

    function expandToWindow(element) {
         var margin = 10; 

         if (element.style.height < window.innerHeight) { 
            element.style.height = window.innerHeight - (2 * margin) 
         }
    }


</script>
</head>
<body onload='expandToWindow(document.getElementById("content"));'>
<div id='content'>Hello World</div>
</body>
</html>
Adam Franco
quelle
3

Versuchen:

html, body {
    height: 102%;
}
.wrapper {
    position: relative;
    height: 100%;
    width: 100%;
}
.div {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1000px;
    min-height: 100%;
}

Habe es noch nicht getestet ...

Steph
quelle
3

Klebrige Fußzeile mit fester Höhe:

HTML-Schema:

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

CSS:

html, body {
    height: 100%;
}
#wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -60px;
}
#footer {
    height: 60px;
}
David Horák
quelle
2

Versuchen Sie http://mystrd.at/modern-clean-css-sticky-footer/

Der obige Link ist nicht verfügbar, aber dieser Link https://stackoverflow.com/a/18066619/1944643 ist in Ordnung. : D.

Demo:

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="author" content="http://mystrd.at">
    <meta name="robots" content="noindex, nofollow">
    <title>James Dean CSS Sticky Footer</title>
    <style type="text/css">
        html {
            position: relative;
            min-height: 100%;
        }
        body {
            margin: 0 0 100px;
            /* bottom = footer height */
            padding: 25px;
        }
        footer {
            background-color: orange;
            position: absolute;
            left: 0;
            bottom: 0;
            height: 100px;
            width: 100%;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <article>
        <!-- or <div class="container">, etc. -->
        <h1>James Dean CSS Sticky Footer</h1>

        <p>Blah blah blah blah</p>
        <p>More blah blah blah</p>
    </article>
    <footer>
        <h1>Footer Content</h1>
    </footer>
</body>

</html>
Vinicius José Latorre
quelle
1
@codemirror danke, ich habe gerade den Kommentar mit einem anderen Link bearbeitet, der funktioniert.
Vinicius José Latorre
1

Sie können die Längeneinheit "vh" für die Eigenschaft min-height des Elements selbst und seiner übergeordneten Elemente verwenden. Es wird seit IE9 unterstützt:

<body class="full-height">
    <form id="form1">
    <div id="header">
        <a title="Home" href="index.html" />
    </div>

    <div id="menuwrapper">
        <div id="menu">
        </div>
    </div>

    <div id="content" class="full-height">
    </div>
</body>

CSS:

.full-height {
    min-height: 100vh;
    box-sizing: border-box;
}
Nico
quelle
Dadurch wird das div nur auf die Höhe des Ansichtsfensters ausgedehnt, nicht auf die Seite selbst.
jansmolders86
1

Ich denke, das Problem wurde behoben, indem nur der HTML-Code zu 100% gefüllt wurde. Möglicherweise füllt der Körper den HTML-Code zu 100%, aber der HTML-Code füllt nicht 100% des Bildschirms.

Versuche es mit: 

html, body {
      height: 100%;
}
David Marciel
quelle
0

Ich habe den Code nicht, aber ich weiß, dass ich dies einmal mit einer Kombination aus Höhe: 1000px und Rand-unten: -1000px getan habe. Versuch das.

Alexander Morland
quelle
Wow, das funktioniert tatsächlich! Aber wenn der Inhalt den Container überläuft, ist es nicht möglich, den übergelaufenen Teil zu sehen ...
adripanico
0

Abhängig davon, wie Ihr Layout funktioniert, müssen Sie möglicherweise den Hintergrund für das <html>Element festlegen, der immer mindestens der Höhe des Ansichtsfensters entspricht.


quelle
0

Dies kann nicht nur mit Stylesheets (CSS) erreicht werden. Einige Browser akzeptieren dies nicht

height: 100%;

als höherer Wert als der Blickwinkel des Browserfensters.

Javascript ist die einfachste browserübergreifende Lösung, obwohl sie, wie erwähnt, keine saubere oder schöne ist.

Martin
quelle
-2

Ich weiß, dass dies nicht die beste Methode ist, aber ich konnte es nicht herausfinden, ohne meine Header-, Menü- usw. Positionen durcheinander zu bringen. Also ... ich habe einen Tisch für diese beiden Spalten verwendet. Es war eine schnelle Lösung. Kein JS benötigt;)

Wen-D
quelle
-2

Weder die beste noch die beste Implementierung der größten Standards, aber Sie können den DIV für einen SPAN ändern ... Es ist eine nicht so empfehlenswerte, aber schnelle Lösung = P =)

Metafaniel
quelle