[HTML/CSS] <div> Tag ohne Inhalt mit maximaler Höhe

Kodak · 15.04.2015, 16:13

Huhu,

ich bin gerade dabei für einen Bekannten eine Website zu erstellen. Und momentan ärgere ich mich etwas mit einem div-Tag, dessen Höhe ich gerne auf die Gesamthöhe des Browserfensters hätte, allerdings ohne Scrollbalken. Zumindest nur dann einen Scrollbalken, wenn der Inhalt tatsächlich über das Browserfenster rübergeht.

Im Grunde habe ich im oberen Viertel einen <header> Bereich, der ein Logo und eine Navigation enthält. Darunter kommt dann direkt eine <section> mit dem besagten <div> Tag, dessen Höhe sich ja nach dem Inhalt richtet. Dadurch hört mein Hintergrund quasi direkt mit dem Inhalt des <div> Tags auf und gibt mir einen hässlichen weissen Kasten im unteren Bereich :/

Hat ja jemand eine Idee wie ich das <div> Tag zwingen kann die volle Höhe unabhängig vom Inhalt einzunehmen?

Tweak-IT · 15.04.2015, 16:38

Weiß gerade nicht ob das praktikabel ist aber das sollte mit CSS und gehen siehe:

CSS height, width ? Breite und Höhe von HTML-Elementen | mediaevent.de

**Exit** · 15.04.2015, 22:49

Schau mal hier rein:

Quick Tip: CSS 100% Height | TutWow

ich habs gerade ausprobiert - und es scheint zu funktionieren.

Test-Code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<title>CSS 100% Height</title>
<style type="text/css">
html {
    height: 100%;
}
body {
    margin: 0;
    padding: 0;
    height: 100%;
}
#content {
    background: #EEE;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    padding: 0 20px 0 20px;
    margin: auto;
    font: 1.5em arial, verdana, sans-serif;
    width: 960px;
    min-height: 100%;
}
</style>
</head>

<body>
<div id="content">
Hallo Welt
</div>
</body>
</html>

Wie Du da noch Deinen Header rein bekommst, musst Du mal schauen.

Kodak · 16.04.2015, 21:33

Danke Exit, das hat mir schon gut weitergeholfen, auch wenn ich jetzt mit dem Header etwas umdisponieren musste. Aber ich glaube im Endeffekt ist es etwas übersichtlicher geworden

**Exit** · 16.04.2015, 21:36

Freut mich, wenn es Dir hilft

HTML/CSS kann bei solchen Sachen echt frickelig sein.