Antworten zum Thema „Divs mit 100%höhe zum Elterncontainer“

danielx11 · 26.08.2008

Hi Folks,

habe folgendes vor:

einen Div in dem 2 weitere Divs nebeneinander positioniert sind.
der Elterncontainer sowie body und html haben height:100%

wie schaffe ich es, dass die 2 Divs in dem Elterncontainer eine 100% höhe haben, und somit der hintergrund dieser "Spalten" die gesamte Höhe des Elterncontainers füllt? diese sollen auch nicht darüber hinauslaufen.

<style type="text/css">

</style>

Ich hoffe Ihr wisst was ich meine

Vielen Dank für Eure Hilfe.

Top_Gun · 26.08.2008

AW: Divs mit 100%höhe zum Elterncontainer

Ähm, das hast du doch!?

Ich hab mit deiner Styledefinition (lediglich die Farben geändert) das so mit dem IE 6 getestet:

HTML:

<html>
<head>
<title>Test</title>

<style type="text/css">
<!--
html {
height:100%;
}

body {
height:100%;
}
#main {
margin-left:auto;
margin-right:auto;
width:740px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
line-height:18px;
border:#0000ff 1px solid;
height:100%
}
#main ul {
margin-left:9px;
padding-left:9px;
}
#box1 {
width:200px;
float:left;
background-color:#00ff00;
padding:10px;
height:100%;
position:relative;
}
#box2 {
width:500px;
float:right;
background-color:#ff0000;
padding:10px;
background-image:url(logo.gif);
background-position:top right;
background-repeat:no-repeat;
height:100%;
}

-->
</style>

</head>
<body>
<div id="main">
<div id="box1">Box 1</div>
<div id="box2">Box 2</div>
</div>
</body>
</html>

danielx11 · 26.08.2008

AW: Divs mit 100%höhe zum Elterncontainer

Hi,

soweit schon, aber nicht korrekt.
Der Linke Teil läuft über den Elterncontainer hinaus.

hier noch mal der HTML-Code:

<div id="main">

<div id="box1">
<div style="margin-top:80px;">
CONTENT BOX 1
</div>
</div>

<div id="box2">
<div style="margin-top:80px;">
CONTENT BOX 2
</div>
</div>
 
</div>

Wie kann ich erreichen, dass die Höhe des Eltercontainers sich dem Inhalt anpasst?

Herr_D · 26.08.2008

AW: Divs mit 100%höhe zum Elterncontainer

danielx11 schrieb:
Hi,

soweit schon, aber nicht korrekt.
Der Linke Teil läuft über den Elterncontainer hinaus.

hier noch mal der HTML-Code:

Wie kann ich erreichen, dass die Höhe des Eltercontainers sich dem Inhalt anpasst?

gar nicht

du gibst ja 100% als Höhe für den Elerncontainer... dem Kindercontainer gibst du allerdings 100% + 80px margin...

möglichkeite wäre:
edit: funzt nicht

oder den Boxen nicht margin top zuordenen, sondern padding top oder

gar nüscht und dann einen span mit line-height:80px einzubauen

edit: funzt irgendwie auch nicht sorry...

danielx11 · 26.08.2008

AW: Divs mit 100%höhe zum Elterncontainer

hmm, wollte es gerade testen

Top_Gun · 26.08.2008

AW: Divs mit 100%höhe zum Elterncontainer

IE 6 zeigt das ganze ordnungsgemäß an und ich kann euren Fehler gar nicht nachvollziehen...

Nachdem ich aber so schlau war und das ganze in FF 2 getestet habe weiß ich wovon ihr überhaupt redet...

Opera 9 zeigt es aber auch richtig (sogar noch richtiger als der IE, nämlich das Leerzeichen an der richtigen Stelle) an...

danielx11 · 27.08.2008

AW: Divs mit 100%höhe zum Elterncontainer

Weiß denn jeder was gemeint ist oder fehlen Euch noch Infos?
Vielleicht baut man die Sache auch ganz anders auf?

Top_Gun · 27.08.2008

AW: Divs mit 100%höhe zum Elterncontainer

So, nach mehrerem Herumprobieren habe ich eine Lösung für dich:
Es funktioniert nichts anderes (meiner Meinung nach habe ich alles ausprobiert was auch nur denkbar ist)

Entferne die Höhenangabe für das main-div komplett
Füge vor dem </div>-Tag vom main-div ein leeres div mit der clear:both; Angabe ein

HTML:

<html>
<head>
<title>Test</title>

<style type="text/css">
<!--
html {
height:100%;
}

body {
height:100%;
}
#main {
margin-left:auto;
margin-right:auto;
width:740px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
line-height:18px;
border:#0000ff 1px solid;
}
#main ul {
margin-left:9px;
padding-left:9px;
}
#box1 {
width:200px;
float:left;
background-color:#00ff00;
padding:10px;
height:100%;
position:relative;
}
#box2 {
width:500px;
float:right;
background-color:#ff0000;
padding:10px;
background-image:url(logo.gif);
background-position:top right;
background-repeat:no-repeat;
height:100%;
}

-->
</style>

</head>
<body>
<div id="main">
<!-- SPALTE 1 -->
<div id="box1">
<div style="margin-top:80px;">
CONTENT BOX 1
</div>
</div>
<!-- SPALTE 2 -->
<div id="box2">
<div style="margin-top:80px;">
CONTENT BOX 2
</div>
</div>
<div style="clear:both;"></div>
</div>
</body>
</html>

danielx11 · 28.08.2008

AW: Divs mit 100%höhe zum Elterncontainer

Super, ich danke Dir für Deine Mühe und werde es bei Gelegenheit mal ausprobieren.