Zwei DIVS mit 100% ?

Status
Nicht offen für weitere Antworten.
aTa

aTa

Erfahrenes Mitglied
Guten Tag,
ich hab folgendes Problem ich hab ein Layout mit CSS gemacht und diesem 100% gegeben also dass die Seite eben mitwächst, das hat auch geklappt nun habe ich aber einen Contentbereich mit einer eigenen Farbe und dieser Bereich soll auch mitwachsen je nachdem wieviel Content reinkommt, wenn ich dem Bereich nun aber 100% gebe dann fängt er net oben am Browserrand an sondern eben da wo der Contentbereich anfängt, kann man das verhindern

Ist mein erstes Mal also bitte um etwas Nachsicht :)
Vielen Dank
Markus

Hier mal n bisle Code:

CSS
HTML: 
*{
	padding:0;
	margin:0;
	margin-bottom:10px;
	border:0;
}
html, body {
 	height: 100%; /* wichtig */
	font:12px "Trebuchet MS", Verdana, Arial, sans-serif;
	color:black;
	text-align:center;
}
#header{
	height: 150px;
	background-image: url(images/head.jpg);
	background-repeat: no-repeat;
}
#box{
	width:700px;
	margin:0 auto;
	text-align:left;
  	position: relative;
  	min-height: 100%;
	height:auto !important;/* moderne Browser */
	height:100%; /* IE */
}
#navigation{
	width: 185px;
	height: 200px;
	background-image: url(images/bg_navi.jpg);
	background-repeat: no-repeat;
	top: 150px;
  	position: absolute;
}
#teaser{
	height: 198px;
	width: 375px;
	background-image: url(images/bg_teaser.gif);
	background-repeat: no-repeat;
	left: 185px;
	top: 150px;
	position:absolute;
}
#inhalt{
	background: #F7EACA;
	width:100%;
	top: 348px;
  	position: absolute;

	height:100%;
}
#news{
	background-image: url(images/bg_news.gif);
	background-repeat:no-repeat;
	width: 209px;
	position:absolute;
	left: 500px;

}
#footer {
  	width: 100%;
  	background: #C6AB7A;
  	position: absolute;
  	bottom: 0;
  	height: 50px;
 	line-height: 50px;
	text-align:center;
}


HTML
HTML: 
<html>
<head>
        <title></title>
<link href="style.css" rel="stylesheet" type="text/css">        
</head>
<body>
<div id="box">
  <div id="header"></div>
  <div id="navigation">tzghfghfgh</div>
  <div id="teaser"></div>
  <div id="inhalt">
fg
  </div>
  <div id="news">Hier die News</div>
<div id="footer">© Gestüt Römerhof – Alle Rechte vorbehalten.</div>

</div>
</body>
</html>
 
Ehrlich gesagt kann ich deiner Problemschilderung nicht so ganz folgen, denn das DIV #inhalt hast du 348 Pixel vom oberen Browserfensterrand positioniert, somit kann der Content-Bereich auch nicht ganz oben beginnen :confused:
 
Ah stimmt :) Ok, aber was muss ich dann machen damit der Contentbereich bei mehr Inhalt mitwächst?
Weil der Footer wandert ja auch nach unten wenn es mehr Inhalt gibt.
 
Der Cotentbereich wächst doch bei zunehmenden Inhalt mit, blos bleibt bei mir der Footer am unteren Fenterrand "kleben".
 
Ja genau und der Foot wird nach unten gedrückt, genau das will ich aber auch mit dem Inhalt erzielen...
Aber das macht er ja nicht, sondern er geht quasi hinter dem footer weiter...
 
Probier es doch mal mit diesem Modell:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
html, body {
height: 100%;
margin: 0;
padding: 0;
}

#content {
width: 700px;
margin: 0 auto;
position: relative;
min-height: 100%;
background: #F7EACA;
}

* html #content { /* Für IE */
height: 100%;
}

#head {
height: 150px;
background: #e3e3e3;
}

.pad {
height: 50px;
}

#foot {
width: 700px;
margin: 0 auto;
position: relative;
height: 50px;
margin-top: -50px;
background: #C6AB7A;
}
-->
</style>

</head>
<body>

<div id="content">
     <div id="head">head</div>
     <p>content with some dummy text -start-</p>

     <!--<p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text -end-</p>-->

     <div class="pad"></div>
</div>
<div id="foot">foot</div>

</body>
</html>
 
Danke erstmal, aber was hast du denn jetzt genau gemacht?
Hier nochmal n Screen zur Verdeutlichung

klick
 
Zuletzt bearbeitet:
Ich habe das DIV .content mit einer 100%-Höhe ausgestattet und darin den Header eingebettet.

Den Footer habe ich außerhalb des Content-DIVs notiert und entsprechend seiner Höhe mit einem negativen Außenabstand nach oben über das Content-DIV "geschoben". So wird er bei geringfügigen Inhalt am unteren Browerfensterrand angeordnet, und wandert bei zunehmenden Inhalt mit.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück