DIV Element in voller Höhe ausdehnen - klappt nicht

Jack0815 · 13. Jan. 2005

Hi,

ich habe ein Problem mit meinen DIV's.
Ich möchte eine Seite basteln, in der zuerst eine Logo-Zeile über die ganze Breite kommt, danach eine Menüzeile über die ganze Breite, und am Ende der Seite eine Fußzeile über die ganze Breite. Das klappt soweit auch.
Der mittlere Content-Teil soll mit zwei verschiedenfarbigen Textblöcken (DIV's) gefüllt werden, die vom unteren Ende der Menüzeile bis zum oberen Ende der Fußzeile reichen. Das klappt leider nicht :-((

Ich habe schon ausprobiert, den beiden DIV-Elementen die Höhe 100% zuzuweisen, dann wird der DIV-Container zwar ausgedehnt, aber über den Bildrand hinaus, so dass die Fußzeile nur durch scrollen zu sehen ist.

Lasse ich die Höhe 100% weg, dann wird der linke Block nicht komplett farbig hinterlegt, sondern hat immer einen kleinen Rand auf allen Seiten. Ich kann mir nicht so recht erklären, wo der her kommt.

(Übrigens soll die Seite dann so aussehen, dass die Seite in der linken oberen Ecke positioniert ist, und sich dann der rechte bzw. untere Rand entsprechend der Bildschirmauflösung ausdehnt)

Hier mal meine Quelldateien:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<HEAD><TITLE>Ueberschrift</TITLE>
<link rel="stylesheet" type="text/css" href="old.css" />
<style type="text/css">
<!--
@import url(main_neu.css);
-->
</style>
</head>

<body>

<div id="top">
<img src="images/header.jpg"> 
</div>

<div id="menu">
<ul>
   <li><a href="#">Menüpunkt 1</a></li>
   <li><a href="#">Menüpunkt 2</a></li>
   <li><a href="#">Menüpunkt 3</a></li>
</ul>
</div>

<div id="textlinks">
<p>Hier kommt der linke Text hin.</p>
</div>


<div id="textrechts">
<p>Und hier der rechte Text.</p>
</div>


<div id="foot">
<span class="footschriftblau">Name</span>
<span class="footschriftrot">Tätigkeit</span>
</div>

</body>
</html>

Und hier die zugehörige CSS-Datei:

Code:

html {height:100%}

BODY {
	font:		12px Arial, sans-serif ;
	background:	                     #AFC9DA;
	margin:		0px;
	border:		0px;
	padding:	                     0px;
	height:		100%;
}

#top {
	position:	relative;
 	background:	#AFC9DA left no-repeat;
	left:	0;
	top:	0;
	padding:	0;
	margin: 	0;
}


#menu{
	margin:         0;
	padding:       0;
	background: #5C90B1;
	position:	relative;
	top:	-2px;
	left:	0px;
	height:	30px;
	clear:	both;
}

#textlinks {
	float:               left;
	width:             384px;
	margin:           0;
	padding:         0;
	background:   #D3E1EE url(images/background.jpg) left repeat-y;
	border:           1px solid black;
}

#textrechts {
	float:               left;
	margin:           0;
	padding:         0;
}

#foot {
	margin:            0;
	padding:          0;
	clear:               left;
	background:	  #AFC9DA url(images/footer.jpg) left no-repeat;
	border-top:	  1px solid black;
	height:	  73px;

}

.footschriftrot {
	color:	#A3003C;
	font-size:	25px;
	padding-top:	20px;
	padding-left:	5px;
	text-align:	left;
	float:	left;
}

.footschriftblau {
	color:	#00435D;
	font-size:	25px;
	padding-left:	100px;
	padding-top:	20px;
	width:	300px;
	text-align:	left;
	float:	left;
	clear:	both;
}

Hat jemand von euch einen Tipp für mich?

Für jede Hilfe dankbar,

Jacky

bine · 13. Jan. 2005

schau dir das mal an:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>header - 2 Spalten content - footer</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
<!--
html, body	{ width:100%; height:100%; margin:0px auto;}

#aussen	{ height:100%; margin:0px auto; background-color:#FFD9EC; }
.header{
height:10%;
background:#cde0eb;
padding:0;
margin:0;
}

#navi	{
height:5%;
background:#CEFFCE;
padding:0;
margin:0;
}

.text1{
padding:0;
margin:0;
width:360px;
float:left;
background:#FFFFC4;
height:75%;
}

.text2{
height:80%;
color:#000;
padding:0;
margin:0;
background:#FFDDEE;
}

.footer{
height:10%;
width:100%;
background:#cde0eb;
clear:left;
padding:0;
position:absolute;
bottom:0;
margin:0;
}

.content_footer	{ margin:0px; padding:10px; }

-->
</style>
</head>
<body>
<div id="aussen">
	         <div class="header"><code style="color:#cc0000;"><strong>header</strong></code><br>
	         Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>

                  <div id="navi"><code style="color:#cc0000;"><strong>navi</strong></code></div>

	         <div class="text1"><code style="color:#cc0000;"><strong>text1</strong></code><br>
	         Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>

	         <div class="text2"><code style="color:#cc0000;"><strong>text2</strong></code><br>
	         Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>

	         <div class="footer">
                  	<div class="content_footer">
                  	       <code style="color:#cc0000;"><strong>footer</strong></code><br>
	                           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
			</div>
</div>
</body>
</html>

Um den Textabstand für den content des text1 und text2 Bereiches zu definieren mußt du wie im footer noch ein inneres content-div mit definieren.

BerndDasBrot · 13. Jan. 2005

fiel mir nur so auf:

height:5%;

Gabs da nicht nen IE-Bug, dass der das net anzeigt?
Kann auch sein, dass ich mich irre

BErnddasBrot

bine · 13. Jan. 2005

k.A. in der offline-Browservorschau klappt das mit dem IE, ich lad es mal hoch dann kannste testen.

http://www.divers.art-stylers.de/css04.html

BerndDasBrot · 13. Jan. 2005

hm, scheint zu gehen. Egal

BernddasBrot

Jack0815 · 14. Jan. 2005

Hallo bine,

SUPIIII das war's !! *luftspring*

Eigentlich ganz einfach, wenn man weiss, wo der Trick dabei ist

DANKE für die schnelle Hilfe - Ihr seid klasse!

Jacky

bine · 14. Jan. 2005

Schön und gut, aber bei näherer Betrachtung noch nicht fertig. Was ist, wenn der Inhalt von text1 und text2 länger ist?

overflow:scroll - aber da gibts dann auch noch so Kleinigkeiten mit der width-Umsetzung in Verbindung mit padding. das Ganze wird nämlich im IE und im Mozi unterschiedlich interpretiert und ich krieg das grad nicht hin.

http://www.divers.art-stylers.de/css04a.html

in der css04a Datei interpretiert der IE text1 und text2 so wie ich es darstellen möchte.

Aber der Mozi nicht. text 2 ist nach unten gerutscht

Da nun aber Mozilla die bessere CSS-Interpretation hat und der IE mehr Fehler verzeiht, muß ich wohl etwas falsch gemacht haben, aber wie mache ich es richtig?

DIV Element in voller Höhe ausdehnen - klappt nicht

Jack0815

New member

bine

Lounge-Member

BerndDasBrot

New member

bine

Lounge-Member

BerndDasBrot

New member

Jack0815

New member

bine

Lounge-Member