webentwicklung-frage-antwort-db.com.de

CSS div 100% Höhe

Ich entwickle diese Website und möchte, dass die rechte Seitenleiste 100% Höhe hat.

body { 
    height: 100%; 
    min-height: 100%;
    position: relative;
}

mydiv { 
    height: 100%; 
    min-height: 100%; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0;
    width: 290px;
}

Ich habe eine Menge Antworten gelesen, insbesondere diese (Antwort von Prestaul): Einstellung von 100% Höhe auf ein absolut positioniertes Element, wenn der Inhalt über die Fenstergröße hinausgeht .

Aber für mich funktioniert dieser Trick nicht, auch das Geigenbeispiel funktioniert nicht!

Dies ist das jsfiddle-Arbeitsbeispiel.

Dies ist derselbe Code, der nicht funktioniert.

cssheightcss-position
22
T1T

stellen Sie den Körperstil folgendermaßen ein:

body { position:relative;}

es hat für mich funktioniert

5
J Max

Legen Sie auch das HTML-Tag fest. Auf diese Weise sind keine seltsamen Positionshacks erforderlich.

html, body {height: 100%}

41
MildlySerious

Flexbox-Lösung

Hinweis: Fügen Sie Flex-Anbieterpräfixe hinzu, wenn dies von Ihren unterstützten Browsern erforderlich ist.

html {
  height: 100%;
}

body {
  height: 100%;
  display: flex;
}

.Content {
  flex-grow: 1;
}

.Sidebar {
  width: 290px;
  flex-shrink: 0;
}
<div class="Content" style="background:#bed">Content</div>
<div class="Sidebar" style="background:#8cc">Sidebar</div>

1
Reggie Pinkham

Ich habe noch einen Vorschlag. Wenn myDiv eine Höhe von 100% haben soll, verwenden Sie diese zusätzlichen 3 Attribute für Ihr div:

myDiv {
    min-height: 100%;
    overflow-y: hidden;
    position: relative;
}

Das sollte den Job machen!

0
Lars Ljungvist