Zum Inhalt springen

Mindesthöhe bei CSS

cypresshill

Von cypresshill
in Webdesign

 Teilen

Empfohlene Beiträge

cypresshill

cypresshill

Geschrieben
Geschrieben

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

Link zu diesem Kommentar
Auf anderen Seiten teilen
geloescht_JesterDay

geloescht_JesterDay

Geschrieben
Geschrieben

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 ;)

Link zu diesem Kommentar
Auf anderen Seiten teilen
cypresshill

cypresshill

Geschrieben
  • Autor
Geschrieben

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%;

}

Link zu diesem Kommentar
Auf anderen Seiten teilen
Aiun

Aiun

Geschrieben
Geschrieben

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.

Link zu diesem Kommentar
Auf anderen Seiten teilen
cypresshill

cypresshill

Geschrieben
  • Autor
Geschrieben
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.

Link zu diesem Kommentar
Auf anderen Seiten teilen
Aiun

Aiun

Geschrieben
Geschrieben 


<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

Link zu diesem Kommentar
Auf anderen Seiten teilen
cypresshill

cypresshill

Geschrieben
  • Autor
Geschrieben

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?

Link zu diesem Kommentar
Auf anderen Seiten teilen
geloescht_JesterDay

geloescht_JesterDay

Geschrieben
Geschrieben

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).

Link zu diesem Kommentar
Auf anderen Seiten teilen
Aiun

Aiun

Geschrieben
Geschrieben

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.

Link zu diesem Kommentar
Auf anderen Seiten teilen
geloescht_JesterDay

geloescht_JesterDay

Geschrieben
Geschrieben
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...

Link zu diesem Kommentar
Auf anderen Seiten teilen

Dein Kommentar

Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.

Gast
Auf dieses Thema antworten...

×   Du hast formatierten Text eingefügt.   Formatierung wiederherstellen

  Nur 75 Emojis sind erlaubt.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Dein vorheriger Inhalt wurde wiederhergestellt.   Editor leeren

×   Du kannst Bilder nicht direkt einfügen. Lade Bilder hoch oder lade sie von einer URL.

×
 Teilen
Zur Themenübersicht

Fachinformatiker.de, 2024 by SE Internet Services

fidelogo_small.png

Schicke uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Links

Fachinformatiker.de App

Download on the App Store
Get it on Google Play

Kontakt

Hier werben?
Oder sende eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...