Mindesthöhe bei CSS

Veröffentlicht 10. Juli 200619 j

Hallo,

ich habe folgendes Layout mit CSS erstellt:


<html>

<head>

<style type="text/css">

body {

	margin: 0px;

	text-align: center;

}

div#container {

	margin-left: auto;

	margin-right: auto;

	background-color: black;

	text-align: left;

	width: 700px;

}

div#information {

	float: left;

	background-color: blue;

	width: 200px;

}

div#banner {

	float: right;

	clear: right;

	background-color: green;

	width: 500px;

}

div#contents {

	float: right;

	background-color: red;

	width: 500px;

}

</style>

</head>

<body>

<div id="container">

	<!-- Container 1: -->

	<div id="information">Container 1</div>


	<!-- Container 2: -->

	<div id="banner">Container 2</div>


	<!-- Container 3: -->

	<div id="contents">Container 3</div>

</div>

</body>

</html>

Jetzt möchte ich aber, dass "Container 1" und "Container 3" bis ganz nach unten gehen. Ich glaube, dass ich das irgendwie mit min-height lösen muss, weiß aber nicht wie. Es wäre schön, wenn mir da jemand weiterhelfen könnte.

MfG

Alex

10. Juli 200619 j

Mir ist gerade noch ein Fehler aufgefallen:

Die Zeile "clear: right;" gehört natürlich zu "div#contents" und nicht zu "div#banner".

11. Juli 200619 j

Hi,

ich hab jetzt Container, Information und Contents die Zeile

height:100%;

ergänzt. Bin mir aber nicht ganz sicher ob es das ist was du haben willst

11. Juli 200619 j

Jetzt möchte ich aber, dass "Container 1" und "Container 3" bis ganz nach unten gehen. Ich glaube, ...

...das ist nicht möglich. 100% height für den gesamten Anzeigebereich im Browser gibt es nicht.

Ich hab das auch schön öfter erläutert warum hier im Forum...werd das jetzt nicht nochmal tun

MinHeight ist, wie der Name schon sagt, die Höhe, die ein Element mindestens haben soll. Wird aber vom Browser aus Redmond nicht verstanden...

EDIT:

Ach ja, mit mit nicht standardkonformem Code (ohne DTD z.B.) kann die Höhe in einem Browser doch mit 100% angegeben werden. Das ist aber eine Eigenart dieses speziellen Browsers

11. Juli 200619 j

Ich habe mal ein bischen rumprobiert und nun scheint alles zu funktionieren. Was meint ihr, kann man das so machen oder sind evtl. noch Fehler drin?

Die HTML-Datei:


<html>

<head>

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

<!-- Hack, da Internet Explorer min-height nicht interpretiert -->

<!--[if IE]>

<link rel="stylesheet" type="text/css" href="internetexplorer.css" media="screen">

<![endif]-->

</head>

<body>

<div id="container1">

	<div id="information">Info-Box</div>

	<div id="container2">

		<div id="banner">Banner</div>

		<div id="contents">Inhalt</div>

	</div>

</div>

</body>

</html>

Das Stylesheet (screen.css):


body {

	margin: 0px;

	text-align: center;

	height: 100%;

}

div#container1 {

	margin-left: auto;

	margin-right: auto;

	background-color: black;

	text-align: left;

	width: 700px;

	height: 100%;

}

div#information {

	float: left;

	background-color: green;

	width: 200px;

	min-height: 100%;

}

div#container2 {

	float: right;

	background-color: blue;

	width: 500px;

	min-height: 100%;

}

div#banner {

	background-color: red;

	width: 500px;

}

div#contents {

	background-color: aqua;

	width: 500px;

}

Der Internet Explorer Hack (internetexplorer.css):


div#information, div#container2 {

	height: 100%;

}

12. Juli 200619 j

ich würde dir empfehlen auf Standard-HTML zu gehen (mit Doctype)

dann ist, wie oben erwähnt, 100% höhe nicht möglich.

ein Workaround wäre, das du ein Div-Layer nimmst und mit einem kleinen Javascript die Fensterhöhe ermittelst und dann dem Div-Layer zuweist.

Für leute ohne javascript ist auch kein Problem, dann ist das Layer eben so hoch wie der Inhalt.

Falls dich das interessiert gib bscheid, dann suche ich das script dazu mal raus.

12. Juli 200619 j

ich würde dir empfehlen auf Standard-HTML zu gehen (mit Doctype)
dann ist, wie oben erwähnt, 100% höhe nicht möglich.
ein Workaround wäre, das du ein Div-Layer nimmst und mit einem kleinen Javascript die Fensterhöhe ermittelst und dann dem Div-Layer zuweist.

Für leute ohne javascript ist auch kein Problem, dann ist das Layer eben so hoch wie der Inhalt.

Falls dich das interessiert gib bscheid, dann suche ich das script dazu mal raus.

Ich hatte schon noch vor einen Doctype reinzusetzen, ich wusste aber nicht dass das dann so mit CSS nicht mehr funktioniert. Naja egal ich habe sowie gerade festgestellt, dass die Container für die Navigation und den Inhalt unterschiedliche Höhen haben, wenn in einem Div mehr Inhalt steht als 100%. Die sollen aber immer gleich hoch sein.

Das Javascript würde mich daher schon interessieren. Schon wäre auch wenn man damit irgendwie realisieren könnte, dass beide Divs immer gleich hoch sind.

12. Juli 200619 j


<script type="text/javascript">

  window.onresize = setSize;

  function setSize()

  {

    cnt = document.getElementById('div_content');


      var x,y;

      if (self.innerHeight) // all except Explorer

      {

      	x = self.innerWidth;

      	y = self.innerHeight;

      }

      else if (document.documentElement && document.documentElement.clientHeight)

      	// Explorer 6 Strict Mode

      {

      	x = document.documentElement.clientWidth;

      	y = document.documentElement.clientHeight;

      }

      else if (document.body) // other Explorers

      {

      	x = document.body.clientWidth;

      	y = document.body.clientHeight;

      }

        cnt.style.width  = x+"px";

	cnt.style.height = y+"px";

    }

</script>

und ein

<body id="bdy" onload="setSize()">

Das Script wird bei jeder größenänderung der Seite aufgerufen.

Wenn du im Javascript den overflow: auto setzt, dann scrollt eben nur das Div-Layer, aber kommt auch nur zum tragen wenn JS aktiviert ist

13. Juli 200619 j

Ich habe gerade dieses Beispiel gefunden:

http://standards.webmasterpro.de/index.html?article=zentriertes+Layout%2C+100%25+H%F6he

Aber wenn es wirklich nicht möglich ist einen Div über die gesamte Bildschirmhöhe zu ziehen (zumindest bei Standard-HTML), dann dürfte das Beispiel auch nicht HTML-konform sein?

13. Juli 200619 j

das dokument sieht eigentlich nach Standard aus.

Allerdings sehe ich hier zum ersten mal height: auto .... werde da mal googln ob das Standardcomform ist.

13. Juli 200619 j

Aber wenn es wirklich nicht möglich ist einen Div über die gesamte Bildschirmhöhe zu ziehen (zumindest bei Standard-HTML), dann dürfte das Beispiel auch nicht HTML-konform sein?

html, body { height: 100%; /* wichtig */}

#box{ min-height: 100%;
height:auto !important; /* moderne Browser */
height:100%; /* IE */ }

Also: Das funktioniert hier nur, wegen html, body { height: 100% } (steht ja auch da, wichtig!). Das funktioniert soweit auch, dass das DIV dann 100% Höhe des Anzeigefensters hat.

Aber:
Sobald du einen farbigen Hintergrund hast und dein Inhalt höher ist als die Anzeige im Browser (du also scrollen musst), wirst du sehen, dass diese "Lösung" gar keine Lösung ist Alles außerhalb des Fensters wird dann nämlich einfach abgeschnitten und du hast dann beim scrollen auf einemal keinen Hintergrund mehr.

Standardkonform kann es so sein, aber haben wollen tut das so niemand (außer mit weißem HG vielleicht).

height: auto ist übrigens immer der Defaultwert und hat mit der 100% Höhe nichts zu tun. Ein Element ist eben immer so hoch, wie sein Inhalt (eben automatisch hoch genug ).
http://www.css4you.de/height.html

EDIT:
Glaub mir einfach: 100% Höher gibt es nicht auf das Browserfenster bezogen (aktueller Stand, wenn standardkonform).

13. Juli 200619 j

das height: auto mit body height:100% IST so hoch wie das Browserfenster.

Allerdings bringt es nicht viel, da es, sobald der inhalt größer wird als das Fenster ganz normal wächst. Ein overflow-Auto, so das nur ein bestimmtes Div scrollt, geht scheinbar auch nicht.

ich denke ich werde damit später nochmal experimentieren, vielleicht lässt es sich irgendwie doch nutzen.

14. Juli 200619 j

das height: auto mit body height:100% IST so hoch wie das Browserfenster.

DAS liegt aber nicht an auto, sondern am height:100%; /* IE */ was danach kommt und auto überschreibt

Und das mit body und html height: 100% hab ich oben ja erklärt. Läßt sich allenfalls nutzen ohne Grafiken o.ä.

14. Juli 200619 j

ich spreche vom Firefox, und da wirkt das height: 100% nicht ^^

aber was das mit der höhe angeht, verwirrt mich der standard sowieso, aber das habe wir ja schon oft genug diskutiert.

14. Juli 200619 j

ich spreche vom Firefox, und da wirkt das height: 100% nicht ^^

Ich spreche von CSS und da besagt height: 100%, dass das Element so hoch ist, wie das Elternelement. Da mit body, html height: 100% das Elternelement des Divs eine Höhe bekommen hat, geht auch beim Firefox in dem Fall height: 100% ^^

EDIT:

Height: 100% geht generell beim Firefox, nur eben nicht einfach so auf das Browserfenster bezogen.


...

#container { height: 500px; }

#box { height: 100%: background-color: #ff0000; }

...

<div id="container">

  <div id="box">

  </div>

</div>

...

geht ohne Probleme...

Anmelden

Themen

IT System Specialist (m/w/d) Microsoft Services bei Albtal-Verkehrs-Gesellschaft mbH (76131 Karlsruhe, Deutschland)

Digital Solution Manager (w/m/d) System Interoperabilität und Datenmanagement bei B. Braun Melsungen AG (34212 Melsungen, Deutschland)

IT Servicedesk Agent (m/w/d) bei HPM Service und Verwaltung GmbH (20457 Hamburg, Deutschland)

Mindesthöhe bei CSS

Empfohlene Antworten

Erstelle ein Konto oder melde dich an, um einen Kommentar zu schreiben.

Konto

Navigation

Suchen

Configure browser push notifications

Chrome (Android)

Chrome (Desktop)

Safari (iOS 16.4+)

Safari (macOS)

Edge (Android)

Edge (Desktop)

Firefox (Android)

Firefox (Desktop)