✔ Header 100px + Content 100% = immer 100px scrollen

A

alphaChill

Mitglied
Hallo,

habe folgendes Problem:

meine HMTL-Seite beinhaltet 2 div-Container... einen für den Header und einen für den Content... wenn ich dem Header eine Höhe von 100px gebe und dem Content eine Höhe von 100%, muss man immer 100px scrollen :(

Weiß jemand, wie ich dem Content sagen kann: "hey, du sollst nur 100% abzüglich der Headerhöhe hoch sein!"?

Im Anhang gebefindet sich noch mal ein Bild zur Veranschaulichung...

Hier mein HTML-Code (index.html):
HTML: 
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
	<head>
		<title>Testing CSS</title>
		<link rel="stylesheet" type="text/css" media="screen" href="style.css"/>
	</head>

	<body>
		<div id = "header">

		</div>
		<div id = "content">

		</div>
	</body>
</html>

Hier mein CSS-Code (style.css):
Code: 
#header {
    height: 100px;
    width: 500px;
    background-color:red;
}

#content{
    min-height: 100%;
    width: 500px;
    background-color: blue;
    position: absolute;
}

Gruß alphaChill
 

Anhänge

  • scroll.JPG
    scroll.JPG
    11,3 KB · Aufrufe: 13
Und ein weiteres Beispiel:

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">
<!--
* {
margin:0;
padding:0;
}
html, body {
height:100%;
}
div#wrap {
position:relative;
width:760px;
margin:0 auto;
background:blue;
min-height:100%;
height:auto !important;
height:100%;
}
div#header {
height:100px;
background:red;
}
-->
</style>

</head>
<body>

<div id="wrap">
     <div id="header">
          <h1>header</h1>
     </div>
     <div id="content">
          <h1>content</h1>
     </div>
</div>

</body>
</html>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück