DIV Container füllend anzeigen

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas

14:03, 22.12.2013

Hallo
ich Arbeite zur Zeit an einer neuen Hompage dabei bin ich auf ein paar Probleme gestoßen.
Die 2 mittleren Divs wollen den restlichen Raum nicht ausfüllen.
Wie kann ich dieses Problem beheben?

Spitzei

HTML:

<!DOCTYPE html>
<html>
	<head>
		<title>Homepage</title>
		<meta name="robots" 	content="all">
		<meta name="author" 	content="Daniel Bacher">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">

		<link rel="stylesheet" type"text/css" href="css/page.css">

	</head>

	<body>
		<div id="page">
				<div id="logo"></div>
				<div id="head"></div>
				<div id="menu">Hallo</div>
				<div id="content">Hallo</div>
				<div id="footer">Test</div>
		</div>
	</body>
</html>

CSS:

html, body {
	height:100%;
	margin: 0;
}

#page {
	background-color:black;
	min-height:100%;
	width:100%;
	position:absolute;
}

#logo {
	background-color:yellow;
	min-height:150px;
	max-height:150px;
	width:15%;
	float:left;
}

#head {
	background-color:blue;
	max-height:150px;
	min-height:150px;
	width:85%;
	float:right;
}

#menu {
	background-color:green;
	width:15%;
	min-height:100%;
	max-height:100%;
	float:left;
}

#content {
	background-color:white;
	width:85%;
	float:right;
	min-height:100%;
	max-height:100%;
}

#footer {
	position:absolute;
	bottom:0px;
	background-color:gray;
	width:100%;
	min-height:20px;
	max-height:20px;
}

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage
aff3m1tw4ff3

aff3m1tw4ff3 hat kostenlosen Webspace.
15:34, 22.12.2013
Hi,

wenn ich dich richtig verstehe, möchtest Du das eine DIV (Menu) auf 100% breite und das 2te (Content) dann wohl auf 100% Höhe. Dazu musst Du die Angaben im CSS anpassen.

Bei Menu musst Du die
```
width:15%
```
auf 100% setzen, dann passt es sich auf die Seite an. Die Angaben
```
min-hight
```
und
```
max-hight
```
sind da überflüssig würde ich sagen.
```
#menu {
	background-color:green;
	width:100%;
	float:left;
}
```
Beim Content DIV musst Du entweder Inhalt in das DIV setzen, also mehr als eine Zeile, dann passt es sich halt an deren Höhe an oder Du gibst in Pixel an wie hoch es sein soll. Wobei Du dann aufpassen musst das Dein Inhalt nicht Höher als die angegebenen Pixel sind.
```
#content {
	background-color:white;
	width:500px;
	float:right;
}
```
Vielleicht ist das ja Dein Problem, falls nicht solltest Du etwas genauer beschreiben was Du meinst.

LG Marco
copynpaste

copynpaste hat kostenlosen Webspace.

19:51, 22.12.2013
Mal eben von #page das min-height zu height geändert, zeigt der Firefox die beiden Boxen mit 100% Höhe an. Allerdings bedeuten 100% Höhe, dass die Divs dann unter dem Fensterrand weiter gehen, aso größer als deine aktuelle Ansicht ist. Wenn du so Prozentural arbeitest und nicht scrollen willst, solltest du wohl die Prozente nochmal anpassen bzw allgemein nochmal über dein Größenangabe nachdenken.
Aber allgemein kannst du - soweit ich gesehen hab - deine min- und max-height komplett durch normale height Angaben ersetzen, für mehr Kompatibilität - wie du am Firefox schon siehst.
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city

DIV Container füllend anzeigen

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!