• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

nochmal height:100%

bine

bine

Lounge-Member
Jedesmal hab ich wieder aufs Neue Probleme damit, einen Inhalt auf 100% eines Containers zu skalieren.
Ob der container nun der body oder ein div container ist. *nerv*

Bescheibung des Problems:
Da ist links eine blaue Fläche width 180px height:100% mit float:left rechts daneben eine rote Fläche width:580px height:100%

die beiden divs blau und rot sitzen in einem container, der auf eine Höhe von 400px erstmal gesetzt ist.

Nun denk ich müsste doch rot und blau erstmal eine Höhe von diesen 400px des Containers einnehmen.
Und wenn ich in rot mehr als eine Höhe von diesen 400px schreibe, dann vergrößert sich blau automatisch mit, so das es immer eine einheitliche Höhe von den beiden nebeneinanderstehenden rot und blau gibt.

Aber nein, es geht nicht mal das rot und blau 400px hoch sind, geschweige denn die Höhenanpassung.

Hier mal mein Beispielcode:
Code: 
          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="author" content="sabine">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
<style type="text/css">
html, body	{
width:100%;
height:100%;
}

body	{
margin:0px;
padding:0px;
}

#container	{
margin:0 12% 0 12%;
padding:0px;
width:760px;
heigth:400px;
background-color:#C0C0C0;
}

#left	{
width:180px;
height:100%;
background-color:blue;
float:left;
}

#right	{
width:580px;
height:100%;
background-color:red;
float:left;
}
</style>

</head>
<body>
 <div id="container">
  	<div id="left"></div>
    <div id="right"></div>
 </div>
 <div style="clear:left;"></div>
</body>
</html>
 
Zuletzt bearbeitet:
1. nach meiner Logik sollte es, weil der container um links und rechts liegt und die inneren divs sich mit der height: Angabe von 100% an die Höhe des containers halten sollten. Aber wie gesagt das tut es nicht.

Dein Beispiel mit der Höhe ist ja schön und gut aber mir geht es nicht darum das der Hintergrund sich aufgrund des Inhalts automatisch für links und rechts gleichleibend verlängert sondern das der Hintergrund von links und rechts sich gleichbleibend je nach Inhalt verlängert.

Ich zeig nochmal mein überarbeitetes Beispiel, wo links blau eben nicht immer die gleiche Länge wie rechts rot hat. Auch nicht wenn ich height:100% dort angebe. oder ich hab probiert position:relative; bottom:0px; ging aber auch nicht.

siehe Beispiel:
Code: 
          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="author" content="sabine">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
<style type="text/css">
html, body	{
width:100%;
}

body	{
margin:0 12% 0 12%;
padding:0px;
}

#content	{
width:760px;
background-color:#C0C0C0;
}

#height	{
line-height:0px;
font-size:1px;
width:1px;
height:400px;
width:0px;
float:left;
}

#left	{
margin:0px;
padding:10px;
width:160px;
line-height:20px;
background-color:blue;
float:left;
}

#right	{
margin:0px;
padding:10px;
width:560px;
line-height:20px;
background-color:red;
float:left;
}

.clear {
line-height:0px;
font-size:1px;
clear:left;
}
</style>

</head>
<body>
 <div id="content">
 	<div id="height"></div>
    	<div id="left">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud
exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
		</div>
	    <div id="right">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud
exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

		</div>
    <br class="clear" />
 </div>

</body>
</html>

Hier ist blau lang und rot kurz, die sollten aber beide immer gleich lang bleiben. Und wenn der content von rot länger wird soll der Hintergrund von blau sich auch genauso lang ziehen.
Aber vielleicht kann auch noch nicht so ganz denken heut morgen. Jedenfalls krieg ich es nicht hin.

2. In deinem 2. Link-Beispiel da muß man wohl bei .clear immer width:0px schreiben!?, sonst steht nämlich rechts unter links weil clear 1px breit ist, jedenfalls bei mir ist das so.
Beispiel content width:760px left:180px right:580px

3. Du hast mich mit dem ersten Link nochmal auf das zentrieren aufmerksam gemacht. Ich bin ganz zufrieden mit meiner Version margin:0 12% 0 12%;
oder ist das irgendwie problematisch in einem Zusammenhang?
 
sodele, nun hab ich das halt wie besprochen mit einer durchgehenden Hintergrundgrafik im content div gemacht. und in left und right keinen Hintergrund angegeben.
Nun klappt das auch mit der einheitlichen Höhe :)

XHMTL ist halt anders logisch als ich manchmal denke wer von uns beiden - XHTML oder ich - :whacky: ist hab ich aber noch nicht entschieden.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben