height 100vh nur bis Browserfenster

tachyon76 · 26. Juli 2018

Hallo,
ich habe hier ein Problem, dass ich ein Div nicht bis zum unteren Rand des Contents bekomme, wenn der Inhalt nicht ganz ins Browserfenster passt. Beispiel:
Bas rote Content-Div hätte ich gerne bis zum unteren Rand, auch webnn ich nach unten scrolle.
Wie stelle ich das mit css an?

HTML

<!DOCTYPE html>
<html>
<head>
<style>
body, htmnl {
height: 100%;
margin: 0px;
}
.header {
height: 100px;
background-color: #236744;
}
.content {
height: calc(100vh - 100px);
background-color: #891333;
}
</style>
</head>
<body>
<div class="header">
HEAD
</div>
<div class="content">
CONTENT
<div style="height:1200px;width:100px;background-color:#505050"></div>
</div>
</body>
</html>

Alles anzeigen

Sailor · 26. Juli 2018

Die Höhe eines Elements wird vom Inhalt bestimmt... es sei denn, du hast was anderes vorgegeben wie zB

height: calc(100vh - 100px);

daran hält sich der Browser natürlich. Mach die Zwangsjacke weg und sag ihm, er soll die Höhe mindestens so hoch machen und sich ansonsten am Inhalt orientieren, dann sollte es klappen.

min-height: calc(100vh - 100px);

tachyon76 · 26. Juli 2018

funktioniert - und kapiert

Danke

Arne Drews · 17. August 2018

Leo1973: Welches Panorama läuft an Dir vorbei? Deine Antwort hat nichts mit irgendeinem Beitrag in diesem Thema zu tun.
Weniger ist manchmal mehr, also bitte schreibe Beiträge in Zukunft nur, wenn Du wirklich was zu sagen hast, danke.

Tags