Computer Hardware Forum - TweakPC - [HTML/CSS] <div> Tag ohne Inhalt mit maximaler Höhe

Computer Hardware Forum - TweakPC (https://www.tweakpc.de/forum/)

- Programmiersprachen (https://www.tweakpc.de/forum/programmiersprachen/)

- - [HTML/CSS] <div> Tag ohne Inhalt mit maximaler Höhe (https://www.tweakpc.de/forum/programmiersprachen/99893-html-css-div-tag-ohne-inhalt.html)

Kodak

15.04.2015 16:13

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

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

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

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

[url=http://www.mediaevent.de/css/width-height.html]CSS height, width ? Breite und Höhe von HTML-Elementen | mediaevent.de[/url]

Exit	15.04.2015 22:49

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

Schau mal hier rein:

[url=http://www.tutwow.com/htmlcss/quick-tip-css-100-height/]Quick Tip: CSS 100% Height | TutWow[/url]

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>[/code]

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

Kodak

16.04.2015 21:33

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

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

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

Freut mich, wenn es Dir hilft ;-)

HTML/CSS kann bei solchen Sachen echt frickelig sein.

Alle Zeitangaben in WEZ +1. Es ist jetzt 18:42 Uhr.