Damit div die volle Höhe ausdehnt

Question 1

Gibt es eine Methode, mit der sich ein Div auf die volle Höhe ausdehnen kann? Ich habe auch eine klebrige Fußzeile drin.

Hier ist die Webseite: Website entfernt . Das mittlere Bit, von dem ich spreche, ist das weiße div, midcontent, das CSS-Werte hat:

.midcontent{
     width:85%;
     margin:0 auto;
     padding:10px 20px;
     padding-top:0;
     background-color:#FFF;
     overflow:hidden;
     min-height:100%;
     max-width:968px; 
     height:100%;
}

Also ja, hat offensichtlich height:100%nicht funktioniert. Darüber hinaus ist für ALLE übergeordneten Container die Höhe festgelegt.

Hier ist die allgemeine Struktur

<body>
    <div id="wrap">
        <div id="main">
            <div class="headout">
                <div class="headimg"></div>
            </div>
            <div class="midcontainer"></div>
        </div>
    </div>
    <div id="footer">
        <div class="footer"></div>
    </div>

Question 2

Haben Sie sich daran erinnert, die Höhe der HTML- und Body-Tags in Ihrem CSS festgelegt zu haben? So habe ich DIVs im Allgemeinen dazu gebracht, sich auf die volle Höhe auszudehnen:


<html>
  <head>
    <style type="text/css">

      html,body { height: 100%; margin: 0px; padding: 0px; }
      #full { background: #0f0; height: 100% }

    </style>
  </head>
  <body>
    <div id="full">
    </div>
  </body>
</html>

Question 3

Dies könnte hilfreich sein: http://www.webmasterworld.com/forum83/200.htm

Ein relevantes Zitat:

Die meisten Versuche, dies zu erreichen, wurden durch Zuweisen der Eigenschaft und des Werts unternommen: div {height: 100%} - dies allein funktioniert nicht. Der Grund dafür ist, dass ohne eine übergeordnete definierte Höhe das div {height: 100%;} nichts zu 100% Prozent zu faktorisieren hat und standardmäßig den Wert div {height: auto;} verwendet - auto ist ein "nach Bedarf" -Wert "was durch den tatsächlichen Inhalt geregelt wird, so dass das div {height: 100%} a = nur so weit reicht, wie es der Inhalt erfordert.

Die Lösung des Problems wird gefunden, indem dem übergeordneten Container, in diesem Fall dem body-Element, ein Höhenwert zugewiesen wird. Wenn Sie Ihren Körper so schreiben, dass er eine Körpergröße von 100% enthält, erhalten Sie den erforderlichen Wert.
html, body { 
  margin:0; 
  padding:0; 
  height:100%; 
}

Question 4

Dies ist eine alte Frage. CSS hat sich weiterentwickelt. Es gibt jetzt die vhEinheit (Ansichtsfensterhöhe), auch neue Layoutoptionen wie flexboxoder CSS gridum klassische Designs auf sauberere Weise zu erzielen.

Question 5

Falls auch das Einstellen der Höhe von HTML und Körper auf 100% alles für Sie unordentlicher macht als für mich, hat Folgendes für mich funktioniert:

height: calc(100vh - 33rem)

Das - 33rem ist die Höhe der Elemente, die nach dem kommen, das wir in voller Höhe nehmen möchten, dh 100vh. Durch Subtrahieren der Höhe stellen wir sicher, dass es keinen Überlauf gibt und dass er immer reagiert (vorausgesetzt, wir arbeiten mit rem anstelle von px).

Question 6

Wenn das Einstellen der Höhe auf 100% nicht funktioniert, versuchen Sie min-height = 100% für div. Sie müssen noch das HTML-Tag festlegen.

html {
    height: 100%;
    margin: 0px;
    padding: 0px;
    position: relative;
}

#fullHeight{

    width: 450px;
    **min-height: 100%;**
    background-color: blue;

}

Answer 1

79

Gibt es eine Methode, mit der sich ein Div auf die volle Höhe ausdehnen kann? Ich habe auch eine klebrige Fußzeile drin.

Hier ist die Webseite: Website entfernt . Das mittlere Bit, von dem ich spreche, ist das weiße div, midcontent, das CSS-Werte hat:

.midcontent{
     width:85%;
     margin:0 auto;
     padding:10px 20px;
     padding-top:0;
     background-color:#FFF;
     overflow:hidden;
     min-height:100%;
     max-width:968px; 
     height:100%;
}

Also ja, hat offensichtlich height:100%nicht funktioniert. Darüber hinaus ist für ALLE übergeordneten Container die Höhe festgelegt.

Hier ist die allgemeine Struktur

<body>
    <div id="wrap">
        <div id="main">
            <div class="headout">
                <div class="headimg"></div>
            </div>
            <div class="midcontainer"></div>
        </div>
    </div>
    <div id="footer">
        <div class="footer"></div>
    </div>

css xhtml html Bär
quelle

Dies ist eine SEHR häufige Frage. Ihre Lösung wird mit ziemlicher Sicherheit in anderen Antworten zu finden sein: stackoverflow.com/search?q=css+div+100 oder stackoverflow.com/search?q=css+div+height

Ben

2

Ich habe mich durchgesehen, die meisten sagen dasselbe. Ich habe angewendet, was gesagt wurde, immer noch nicht behoben.

tragen

1

Ich bin mir nicht sicher, ob Ihre Frage klar genug ist. Suchen Sie etwas, das "midcontainer" dazu bringt, den gesamten verbleibenden Platz zwischen "headout" und " footer" einzunehmen ? Denn das ist sicherlich nicht gleich 100%

Cesarsalazar

Answer 2

Dies ist eine SEHR häufige Frage. Ihre Lösung wird mit ziemlicher Sicherheit in anderen Antworten zu finden sein: stackoverflow.com/search?q=css+div+100 oder stackoverflow.com/search?q=css+div+height

Ben

Answer 3

2

Ich habe mich durchgesehen, die meisten sagen dasselbe. Ich habe angewendet, was gesagt wurde, immer noch nicht behoben.

tragen

Answer 4

1

Ich bin mir nicht sicher, ob Ihre Frage klar genug ist. Suchen Sie etwas, das "midcontainer" dazu bringt, den gesamten verbleibenden Platz zwischen "headout" und " footer" einzunehmen ? Denn das ist sicherlich nicht gleich 100%

Cesarsalazar

Answer 5

137

Haben Sie sich daran erinnert, die Höhe der HTML- und Body-Tags in Ihrem CSS festgelegt zu haben? So habe ich DIVs im Allgemeinen dazu gebracht, sich auf die volle Höhe auszudehnen:


<html>
  <head>
    <style type="text/css">

      html,body { height: 100%; margin: 0px; padding: 0px; }
      #full { background: #0f0; height: 100% }

    </style>
  </head>
  <body>
    <div id="full">
    </div>
  </body>
</html>

Tom
quelle

Ich habe das gleiche Problem, aber obwohl ich die Körpergröße auf 100% eingestellt habe, funktioniert es nicht. Link Wenn Sie auf Portfolio klicken, eine Kategorie auswählen und dann auf eine Miniaturansicht klicken, wird eine Diashow angezeigt. Der Hintergrund der Diashow erstreckt sich nicht auf die gesamte Seite, obwohl die Höhe auf 100% festgelegt ist.

Natriumnitrat

2

Ich denke, dass der Code korrekt ist, aber die Frage ist falsch: Es sollte gefragt werden, ob Sie die Body- UND HTML-Tags auf 100% setzen. Denn irgendwie kann das HTML-Tag auch die Ausgabe auf unterschiedliche Weise beeinflussen ...

Alexis Wilke

2

Irgendwie scheint HTML 100% nur den sichtbaren Bildschirm zu erfassen. Wenn ich mit chrome devtool das Element "html" auswähle, endet es am Ende der sichtbaren Seite. Wenn ich nach unten scrolle, ist es so, als ob es nicht mehr Teil von <html> ist

Nathan H

was ist mit vh?

Mfnx

Answer 6

Ich habe das gleiche Problem, aber obwohl ich die Körpergröße auf 100% eingestellt habe, funktioniert es nicht. Link Wenn Sie auf Portfolio klicken, eine Kategorie auswählen und dann auf eine Miniaturansicht klicken, wird eine Diashow angezeigt. Der Hintergrund der Diashow erstreckt sich nicht auf die gesamte Seite, obwohl die Höhe auf 100% festgelegt ist.

Natriumnitrat

Answer 7

2

Ich denke, dass der Code korrekt ist, aber die Frage ist falsch: Es sollte gefragt werden, ob Sie die Body- UND HTML-Tags auf 100% setzen. Denn irgendwie kann das HTML-Tag auch die Ausgabe auf unterschiedliche Weise beeinflussen ...

Alexis Wilke

Answer 8

2

Irgendwie scheint HTML 100% nur den sichtbaren Bildschirm zu erfassen. Wenn ich mit chrome devtool das Element "html" auswähle, endet es am Ende der sichtbaren Seite. Wenn ich nach unten scrolle, ist es so, als ob es nicht mehr Teil von <html> ist

Nathan H

Answer 9

was ist mit vh?

Mfnx

Answer 10

38

Dies könnte hilfreich sein: http://www.webmasterworld.com/forum83/200.htm

Ein relevantes Zitat:

Die meisten Versuche, dies zu erreichen, wurden durch Zuweisen der Eigenschaft und des Werts unternommen: div {height: 100%} - dies allein funktioniert nicht. Der Grund dafür ist, dass ohne eine übergeordnete definierte Höhe das div {height: 100%;} nichts zu 100% Prozent zu faktorisieren hat und standardmäßig den Wert div {height: auto;} verwendet - auto ist ein "nach Bedarf" -Wert "was durch den tatsächlichen Inhalt geregelt wird, so dass das div {height: 100%} a = nur so weit reicht, wie es der Inhalt erfordert.

Die Lösung des Problems wird gefunden, indem dem übergeordneten Container, in diesem Fall dem body-Element, ein Höhenwert zugewiesen wird. Wenn Sie Ihren Körper so schreiben, dass er eine Körpergröße von 100% enthält, erhalten Sie den erforderlichen Wert.
html, body { 
  margin:0; 
  padding:0; 
  height:100%; 
}

Brian Clapper
quelle

2

Hallo, alle Elterncontainer haben height:100%.

tragen

2

@ Shamil, Alle Eltern einschließlich des HTML-Tags? Das könnte dein Problem gewesen sein. Am häufigsten vergesse ich das HTML-Tag als grafisches Tag.

Alexis Wilke

@AlexisWilke yep, es hat - selten füge ich keine HTML-Tags ein

tragen

3

Einschließlich des Formular-Tags zu meiner Überraschung

Adam

Das Schlüsselelement ist die 100% Höhe auf dem Körper UND HTML-Tags

Luismesas

Answer 11

2

Hallo, alle Elterncontainer haben height:100%.

tragen

Answer 12

2

@ Shamil, Alle Eltern einschließlich des HTML-Tags? Das könnte dein Problem gewesen sein. Am häufigsten vergesse ich das HTML-Tag als grafisches Tag.

Alexis Wilke

Answer 13

@AlexisWilke yep, es hat - selten füge ich keine HTML-Tags ein

tragen

Answer 14

3

Einschließlich des Formular-Tags zu meiner Überraschung

Adam

Answer 15

Das Schlüsselelement ist die 100% Höhe auf dem Körper UND HTML-Tags

Luismesas

Answer 16

8

Dies ist eine alte Frage. CSS hat sich weiterentwickelt. Es gibt jetzt die vhEinheit (Ansichtsfensterhöhe), auch neue Layoutoptionen wie flexboxoder CSS gridum klassische Designs auf sauberere Weise zu erzielen.

Frank Lämmer
quelle

1

Dies. Alles, was ich in meinem Fall tun musste, war das innere Div auf zu setzen height: 100vh- keine anderen Stile oder Tags erforderlich.

Radicand

Answer 17

1

Dies. Alles, was ich in meinem Fall tun musste, war das innere Div auf zu setzen height: 100vh- keine anderen Stile oder Tags erforderlich.

Radicand

Answer 18

Falls auch das Einstellen der Höhe von HTML und Körper auf 100% alles für Sie unordentlicher macht als für mich, hat Folgendes für mich funktioniert:

height: calc(100vh - 33rem)

Das - 33rem ist die Höhe der Elemente, die nach dem kommen, das wir in voller Höhe nehmen möchten, dh 100vh. Durch Subtrahieren der Höhe stellen wir sicher, dass es keinen Überlauf gibt und dass er immer reagiert (vorausgesetzt, wir arbeiten mit rem anstelle von px).

Answer 19

Stellen Sie nur sicher, dass Sie nicht dort tun, height: calc(100vh -33rem)wo das negative Vorzeichen den Wert berührt, da dies ungültiges CSS ist. Auch 33rem könnte durch einen Pixelwert ersetzt werden.

Rich Finelli

Answer 20

Wenn das Einstellen der Höhe auf 100% nicht funktioniert, versuchen Sie min-height = 100% für div. Sie müssen noch das HTML-Tag festlegen.

html {
    height: 100%;
    margin: 0px;
    padding: 0px;
    position: relative;
}

#fullHeight{

    width: 450px;
    **min-height: 100%;**
    background-color: blue;

}

Damit div die volle Höhe ausdehnt

Antworten: