Für div, um volle Höhe zu erweitern

Gibt es eine Methode, die ich für ein div verwenden kann, um auf volle Höhe zu erweitern? Ich habe auch eine klebrige Fußzeile drin.Für div, um volle Höhe zu erweitern

Hier ist die Webseite: Website entfernt. Das mittlere Bit ich rede ist die weiße div, midcontent die 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, offensichtlich height:100% nicht funktionierte. Darüber hinaus haben alle übergeordneten Container 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>

Quelle

2010-12-27 bear

Dies ist eine sehr häufige Frage, wird Ihre Lösung fast auf jeden Fall in anderen Antworten zu finden: http://stackoverflow.com/search?q=css+div+100 oder http://stackoverflow.com/ suche? q = css + div + height – Ben

Ich bin durchgebrannt, die meisten sagen das Gleiche. Ich habe was gesagt, immer noch nicht behoben. – bear

Ich bin mir nicht sicher, ob deine Frage klar genug ist. Suchst du nach etwas, das "Midcontainer" den * vollen verbleibenden * Abstand zwischen "headout" und "footer" einnimmt? Denn das ist sicherlich nicht gleich 100% – cesarsalazar

108

Haben Sie daran gedacht in Ihrem CSS die Höhe der HTML-und Body-Tags einstellen? Dies ist im Allgemeinen, wie ich habe DIVs bekommen auf die volle Höhe zu erstrecken:

 

<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>

Quelle

2010-12-28 22:58:43 Tom

Ich habe das gleiche Problem, aber obwohl ich die Körpergröße auf 100% eingestellt habe, funktioniert es nicht. [link] (http://www.cerensaner.com/) Wenn Sie auf Portfolio klicken, eine Kategorie auswählen und dann auf ein Thumbnail klicken, wird eine Slideshow angezeigt. Der Hintergrund der Diashow erstreckt sich nicht auf die gesamte Seite, obwohl die Höhe auf 100% eingestellt ist. – sodiumnitrate

Ich denke, dass der Code korrekt ist, aber die Frage ist falsch: Es sollte gefragt werden, ob Sie die Körper und HTML Tags auf 100% setzen. Weil das HTML-Tag irgendwie die Ausgabe auf verschiedene Arten beeinflussen kann ... –

Irgendwie scheint HTML 100% nur den sichtbaren Bildschirm zu erfassen. Wenn ich das "html" -Element benutze, wird es am Ende der sichtbaren Seite angezeigt –

Diese eine Hilfe sein könnte: http://www.webmasterworld.com/forum83/200.htm

Ein relevantes Zitat:

Die meisten Versuche, dies durch die Zuweisung der Eigenschaft und Wert wurden gemacht zu erreichen : div {height: 100%} - dies allein funktioniert nicht. Der Grund dafür ist, dass, ohne dass ein übergeordneter Wert height definiert ist, div {height: 100%;} nichts zu 100% von factor hat und standardmäßig value von div {height: auto;} - auto ist ein "as benötigter Wert ", der durch den tatsächlichen Inhalt geregelt wird, so dass das div {height: 100%} a = nur so weit reicht, wie der Inhalt es verlangt.

Die Lösung für das Problem wird durch Zuweisen eines Höhenwerts zum übergeordneten Container in diesem Fall das body-Element gefunden. Schreiben Sie Ihren Körper stlye, um Höhe 100% liefert den benötigten Wert.
html, body { 
    margin:0; 
    padding:0; 
    height:100%; 
} 

Quelle

2010-12-27 00:27:14

Hallo, haben alle Eltern-Container 'Höhe: 100%'. – bear

@Shamil, alle Eltern einschließlich der HTML-Tag? Das könnte dein Problem gewesen sein. Ich vergesse oft das HTML-Tag als grafisches Tag. –

@AlexisWilke Yep, es tat - selten ich html Tags nicht enthalten – bear

Wenn aus irgendeinem Grund ein Element ist als die Höhe des HTML oder Körper größer gemacht wird, würde ich jQuery verwenden Sie den Abschnitt größer zu machen .

<script type="text/javascript"> 
    $($('#full').height($('#main').height())); 
</script>

Quelle

2017-10-26 23:40:40

Für div, um volle Höhe zu erweitern

Antwort

Verwandte Themen