✔ DIV Höhe auf 100%, bei position:absolute (IE Problem)

Status
Nicht offen für weitere Antworten.
suntrop

suntrop

Erfahrenes Mitglied
Hallo zusammen.

Folgendes Problem:
Der IE zeigt ein DIV nicht mit seinen definierten 100%, sondern mit 0% an. Der DIV-Container (#head_bg) sitzt in einem anderen, dessen Höhe über height:auto; berechnet wird.

Ich möchte, dass der Hintergrund gleich hoch ist, wie der Vordergrund, bzw. der Container in dem der Hintergrund drin ist.

Habe schon einige Möglichkeiten durchgespielt, aber nichts wollte so richtig funktionieren.

Feste Angaben in Pixel kann ich auch nicht nehmen, da das ganze skalierbar (wegen dem Text) sein muss.

Hat wer Rat? Ich weiß nämlich nicht mehr weiter. Bin über jeden kleinen Hinweis dankbar.

mfg - suntrop

Folgender Code (abgekürtzt):
HTML: 
<body>
<div id="content">

	<div id="head">
		<div id="head_bg"><!-- hintergrund --></div>
		An dem Schnittpunkte von Kurfürstendamm und Kurfürstenstraße
	</div>

</div>
</body>
Code: 
body {
	text-align: center;
}

#content {
	margin: 80px auto;
	width: 600px;
	height:  400px;
	border: 1px solid #444;
	background: #dfd2ba;
	position: relative;
}

#head_bg {
	width: 400px;
	border: 1px solid #222;
	background: #fff;
	-moz-opacity:0.5;
	filter:alpha(opacity=50);
	position: absolute;
	top: 0;
	right: 0;
	z-index: -1;
	height: 100%;
}

#head {
	width: 400px;
	height: auto;
	border: 1px dotted #777;
	font-size: 140%;
	text-align: left;
	position: absolute;
	top: 42px;
	right: 0;
	z-index: 1;
}

Beispiel kann hier angesehen werden:
http://www.timewheel.de/foren/tutorials.de/div_height_100/
 
Weiß jetzt nicht genau, ob ich dich richtig verstanden habe, aber gib dem body eine höhe von 100%

body{
height: 100%;
}

damit lässt sich die Höhe im IE auch Prozentual festlegen.

PS: Warum hat dein Kopfbereich einen seperaten Hintergrundbereich, wenn der text dann nicht in diesen hintergrund aufgenommen wird? Definier doch den head-Bereich als Hintergrund, und schreib den text in den bereich "head_bg".
 
Hi,

ich kann mich da meinem Vorredner anschliessen, den Text einfach direkt im DIV head_bg zu notieren.

Irgendwie "beißen" sich die beiden DIVs, wie beispielsweise in der unterschiedlichen Rahmenformatierung. Oder ist das so beabsichtigt?
 
Hi und danke für die Antworten.


Wenn ich dem body-Element eine Höhe von 100% zuteile, hilft das nicht viel, denn die Angaben für den head-DIV bezieht sich ja nicht auf body.

@Maik
Das Aussehen ist hier egal, die tatsächliche Seite sieht anders aus, und dort gibt es auch keine Rahmen die sich in die Quere kommen könnte oder ähnliches:-)
Sollte lediglich zur Veranschaulichung sein.


Was ich machen möchte ist folgendes:
Ich habe eine Hintergrundgrafik (hier #content), darauf kommt ein DIV (#head) mit einem Titel. Der Hintergrund (#head_bg) des Titels soll weiß, jedoch nur mit halber Transparenz sein, damit die Hintergrundgrafik dahinter noch zu sehen ist (s. Grafik).

Deshalb ist #head_bg #head untergeordnet und soll genauso groß sein, denn sobald der Text skaliert wird, muss sich alles andere auch vergrößern, was nur über eine prozentuale Maßeinheit erledigen lässt.

Vielleicht ist der IE aber auch so bugy, dass sich hier nicht unbedingt eine Lösung finden lässt. Ich such mal nach einer anderen Lösung.

Trotzdem danke Jungs!


mfG
suntrop
 

Anhänge

  • transparent_background.png
    transparent_background.png
    21,3 KB · Aufrufe: 113
Hi,

vielleicht hilft es, im übergeordneten Element (head) das Scrollen mit overflow: hidden zu unterbinden. head_bg
gibst Du dann einfach eine grosse Höhe.
Code: 
#head_bg {
	width: 400px;
	border: 0px solid #222;
	background: #fff;
	-moz-opacity:0.5;
	filter:alpha(opacity=50);
	position: absolute;
	top: 0;
	right: 0;
	z-index: -1;
	height: 9999px;
}
#head {
	width: 400px;
	height: auto;
	border: 1px dotted #777;
	font-size: 140%;
	text-align: left;
	position: absolute;
	top: 42px;
	right: 0;
	z-index: 1;
        overflow: hidden;
}
Vielleicht hilft Dir das weiter.

Ciao
Quaese
 
Das ist es:-)

Danke Quaese! Funktioniert.

Hatte mir gerade eine Möglichkeit mit einer zweiten Hintergrundgrafik gebastelt, aber deine Variante ist mir lieber.


Grüße

suntrop
 
Na gut.

Ich hätte es jetzt so gelöst:

Code: 
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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" xml:lang="en" lang="en">
  <head>
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <div id="hg_img">Hintergrundgrafik
      <div id="titel">
        Titel des Textes, der beliebig groß werden kann
      </div>
    </div>
  </body>
</html>

und die div's über margin und padding gesteuert:

Code: 
html {
	height: 100%;
}
body {
	text-align: center;
}

#hg_img {
	position: absolute;
	border: 1px solid #444;
	background: #dfd2ba;
	margin: 0px 10% 0px 10%;
	height: 100%;
	width: 80%;
	top: 0px;
	left: 0px;
	z-index: 1;
}

#titel {
	border: 1px solid #222;
	background: #fff;
	-moz-opacity:0.5;
	filter:alpha(opacity=50);
	position: absolute;
	top: 20px;
	left: 10px;
	padding: 10px;
	z-index: 2;
}

Wenn sich das Bild nicht ändert kann man es direkt als Hintergrundgrafik des Bild-divs im css einbinden.
Aber wens anders auch geht, ist ja alles in Ordnung
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück