Antworten auf deine Fragen:
Neues Thema erstellen

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

danielx11

Nicht mehr ganz neu hier

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">
<!--
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:#7c7c7c 1px solid;
height:100%
}
#main ul {
margin-left:9px;
padding-left:9px;
}
#box1 {
width:200px;
float:left;
background-color:#7c7c7c;
padding:10px;
height:100%;
position:relative;
}
#box2 {
width:500px;
float:right;
background-color:#ffffff;
padding:10px;
background-image:url(logo.gif);
background-position:top right;
background-repeat:no-repeat;
height:100%;
}

-->
</style>

Ich hoffe Ihr wisst was ich meine :)

Vielen Dank für Eure Hilfe.
 

Top_Gun

Aktives Mitglied

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

Nicht mehr ganz neu hier

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">
<!-- 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>
&nbsp;
</div>

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

Herr_D

offline

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:


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...
 
Zuletzt bearbeitet:

Top_Gun

Aktives Mitglied

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

Nicht mehr ganz neu hier

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

Aktives Mitglied

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)

  1. Entferne die Höhenangabe für das main-div komplett
  2. 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

Nicht mehr ganz neu hier

AW: Divs mit 100%höhe zum Elterncontainer

Super, ich danke Dir für Deine Mühe und werde es bei Gelegenheit mal ausprobieren.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
174.478
Beiträge
2.577.989
Mitglieder
65.964
Neuestes Mitglied
Bina
Oben