height:100% immernoch nicht umgesetzt??

HelenLuvzYa

Folgendes Beispiel:

html, body {
height:100%;
margin:0;
padding:0;
}
#wrapper {
/* folgendes wird umgesetzt aber von den Kindelementen ignoriert */
/* min-height selbst greift _hier_ */
min-height:100%;
/* ist wichtig um den Kontainer auf die benötigte Höhe zu ziehn */
/* wenn der Inhalt höher wird als die Anzeige-Fläche */
/* _sollte_ min-height nicht "überschreiben" */
height:auto;
/* ab hier klappt wieder alles */
width:800px;
text-align:left;
margin:0 auto;
/* um zu sehen wie hoch der Kontainer 'wirklich' ist */
border:1px solid red;
}
#content {
/* geht nicht solange #wrapper eine Höhe != auto hat */
height:100%;
/* ab hier klappt wieder alles */
margin-left:10px;
padding-right:10px;
/* um zu sehen wie hoch der Kontainer 'wirklich' ist */
border:1px solid blue;
}
<body>
<div id="wrapper">
<div id="content">
</div>
</div>
</body>

Es ist also nicht möglich einem Kindelement eine Höhe von 100% zu verpassen wenn dessen Elternelement eine Höhe von min-height:100% und/oder height:auto hat.

Insofern ist es also auch nicht möglich eigene Rahmen für Elemente zu "basteln" die sich über die gesamte Höhe der Anzeigefläche erstrecken und dabei die Höhe des Inhalts berücksichtigen.

Falls es doch irgendwie möglich ist, würde ich gern wissen wie und warum und warum mein Beispiel nicht funktioniert.

Grüße, Sebastian

Global Associate

Moin und willkommen im Forum.

Bist Du Dir sicher, daß das das richtge Forum ist? Ich verstehe nur Bahnof, sorry...

Brummelchen

min-height: 100% ist Blödsinn - mehr als 100 Prozent Höhe geht nicht. Streich das min- und lösch das height: auto

Und wenn du schon Beispiele hinschreibst, dann bitte auch so, dass man nicht erst minutenlang fummeln muss,
um da was vernünftiges zur Anzeige zu bringen :roll:

Zitat

Insofern ist es also auch nicht möglich eigene Rahmen für Elemente zu "basteln" die sich über die gesamte Höhe
der Anzeigefläche erstrecken und dabei die Höhe des Inhalts berücksichtigen.

Les nochmal das Handbuch zu CSS, dann weisst du, warum doppelte Höhenangaben Quatsch sind!

Wenn du was vererben willst, dann mit "inherit;" (im erbenden Element)
http://www.css4you.de/wscss/css08.html#inherit

HTML

<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<meta http-equiv="content-language" content="en">
<meta name="author" content="">
<meta name="publisher" content="">
<meta name="copyright" content="">
<style type="text/css">
html, body {
  height:100%;
  margin:0;
  padding:0;
}
#wrapper {
  height:100%;
  width:800px;
  text-align:left;
  margin:0 auto;
  border:1px solid red;
}
#content {
  height:100%;
  margin-left:10px;
  padding-right:10px;
  border:1px solid blue;
}
</style>
</head>
<body>
<div id="wrapper">
  <div id="content">
  </div>
</div>
</body>
</html>

Alles anzeigen

bugcatcher

Das ist kein Fehler vom Firefox (sofern ich dein Problem überhaupt verstanden hab). Das wird sich auch nicht ändern. Kannst gerne auch andere Browser wie Chrome oder Opera befragen. Das was du geschrieben hast, ist das was du bekommen hast.

Grund ist das W3C Boxmodell. Egal wie du mit Vererbung arbeitest, Height und Width beziehen sich immer auf den inneren Bereich eines Elements, exklusive Padding und Border, nicht inklusive. Wenn du also einem Element eine 100% Höhe UND padding/border verpasst, dann addieren sich Höhe und Padding/Border zu einer Gesamthöhe, die natürlich höher ist als 100% der Anzeige.

Um das Verhalten zu verhindern, musst Du das Boxmodell umstellen. Dazu wird mit CSS3 das Attribut box-sizing eingeführt.

Hier kannst du von der Content-Box als Basis auf die Border-Box wechseln. Die ist dann inklusive Padding und Border.

Hat natürlich ein paar Haken. Zum einen ist es noch CSS3 und damit nicht abgesegnet. Daher brauchst du bei den Browsern teils noch die Prefixes (also -moz bzw. -webkit, siehe Beispiel unten). Und IE kanns erst seit Version 8.

Hier müsstest Du für ältere Versionen ein wenig tricksen. Helfen könnten dir dabei die CSS-Expressions vom IE

Im Übrigen immer auf den DocType achten. Der kann das Ergebnis stark beeinflussen.

Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
html, body {
  height:100%;
  margin:0;
  padding:0;
}
#wrapper {
  box-sizing:border-box;
 -moz-box-sizing:border-box;
 -ms-box-sizing:border-box;
 -webkit-box-sizing:border-box;


  height:100%;
  width:800px;
  margin:0 auto;
  padding:30px;
  border:5px solid red;
}
#content {
  height:100%;
  background:blue;
}
</style>
</head>
<body>
<div id="wrapper">
  <div id="content">
  </div>
</div>
</body>
</html>

Alles anzeigen

HelenLuvzYa

Ich war mir nicht sicher ob ich mit meinem Problem hier richtig bin.
Nach ewiger Suche im Internet hab ich aber keine Lösung für mein Problem gefunden. Daher dachte ich, es ist Firefox-Spezifisch und ich frag mal hier nach.

Ok, und eine vernünftige Problembeschreibung fehlt wohl auch.

Es geht darum, dass ich ein Element über die gesamte Fensterhöhe erstellen will und es sich dem Inhalt anpassen soll wenn der Inhalt "höher" als die Fensterhöhe ist. Also mindestens eine Höhe von 100% (min-height:100%) es sei denn der Inhalt benötigt mehr (height:auto). Dass das so nicht geht, hab ich jetzt gelernt. Aber wie geht es?

In meinem speziellen Fall soll #wrapper also, abhängig vom Inhalt, Fensterhöhe haben oder sich darüber hinaus am Inhalt orientieren.
Der #wrapper soll ein Kindelement, #content, haben in dem der Inhalt platziert wird.
#content soll aber auch mindestens so hoch wie #wrapper sein, also mindestens Fensterhöhe, oder sich bei Bedarf dem Inhalt anpassen. So soll die Höhe von #wrapper beeinflusst werden.
Die border-Eigenschaften im Beispiel sind nur um zu sehen wie hoch die Kontainer sind.

pittifox

Zitat von Global Associate

Ich verstehe nur Bahnof, sorry...

// Wir sind zu alt dafür,Seemann!

bugcatcher

Also... wenn ich das richtig verstehe möchtest du das in diesem Beispiel der Grüne Balken bis zum Ende des Dokuments reicht?

Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
html, body {
  height:100%;
  margin:0;
  padding:0;
}
#frame {
 margin:0 auto 0 auto;
 width:700px;
 min-height:100%;
 background-color:red;
}
#content {
 margin:0 auto 0 auto;
 width:500px;
 min-height:100%;
 background-color:green;
}
</style>
</head>
<body>
 <div id="frame">
  <div id="content">
   <br>
  </div>
 </div>
</body>
</html>

Alles anzeigen

Der einzige Browser der das macht ist Opera (Chrome/Safari, Firefox und selbst IE8 sind sich einig, ist also kaum ein Firefox-Problem). Frage ist ob das so überhaupt vom Standard gewollt ist...