div höhe an browserfenster anpassen

Status
Nicht offen für weitere Antworten.
Dann schau dir mal das hier an:

Code:
<!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="en" lang="de">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Home</title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<style type="text/css">
@charset "utf-8";
/* CSS Document */


body {
        background-color:#E9E1D8;
        margin:0px;
        font-family:Verdana,sans-serif;
        font-size:11px;
        color:#615849;
        text-align:center;
        background-image:url(images/background.jpg);
        background-position:bottom;
        background-attachment:fixed;
}

html, body {
        margin:0px;
        height: 100%;
}

h1{
        font-size:13px;
        font-weight:bold;
        font-family:Helvetica;
}

h2 {
        font-weight:bold;
        font-size:12px;
        font-family:Helvetica;
}

img {
        border-width:0px;
}

a {
        color:#000000;
        text-decoration:none;
}

a:hover {
        text-decoration:underline;
}

input {
        border-width:1px;
        border-style:solid;
        border-color:#615849;
        background-color:#E9E1D8;
        height:14px;
        color:#615849;
        font-size:11px;
}

input:focus {
        background-color:#EEEBE6;
}

.submit {
        height:17px;
        padding-bottom:1px;
}

* html .submit {
        height:18px;
        width:44px;
}

* html input {
        width:120px;
}

.submit:hover {
        background-color:#EEEBE6;
}

.contents {
        padding:10px;
        width:891px;
        overflow:visible;
        background-color:#CFC6B7;
        margin:10px auto;
        text-align:left;
}

#wrapper {
        margin:auto;
        position: relative;
        width:911px;
        min-height: 100%;
        height: auto !important;
        height: 100%;
        background-color:#CFC6B7;
}


#inhalt {
        padding-bottom:20px;
        padding-top:0px;
}

#center {
        margin-left:345px;
}

#key {
        margin:70px;
        margin-left:344px;
}

#footer {
        position:absolute;
        left:0;
        bottom:0px;
        font-size:9px;
        line-height:7px;
        text-align:center;
        padding-top:5px;
        padding-bottom:5px;
        background:none;
}

</style>
</head>
<body>
<div id="wrapper">

<div id="header" class="contents">
 <img src="http://www.tutorials.de/forum/images/header.jpg" alt="Header" />
</div>

<div id="navigation" class="contents">
<a href="dersupport.php" title="Der Support"
><img src="http://www.tutorials.de/forum/images/dersupport.jpg" alt="Der Support" onmouseover="rollOver(this)" onmouseout="rollOut(this)" /></a><a
href="reparaturen.php" title="Reparaturen"><img
src="http://www.tutorials.de/forum/images/reparaturen.jpg" alt="Reparaturen" onmouseover="rollOver(this)" onmouseout="rollOut(this)" /></a><a
href="kaufberatung.php" title="Kaufberatung"><img
src="http://www.tutorials.de/forum/images/kaufberatung.jpg" alt="Kaufberatung" onmouseover="rollOver(this)" onmouseout="rollOut(this)" /></a><a
href="markeeigenbau.php" title="Marke Eigenbau"><img
src="http://www.tutorials.de/forum/images/markeeigenbau.jpg" alt="Marke Eigenbau" onmouseover="rollOver(this)" onmouseout="rollOut(this)" /></a><a
href="webdesign.php" title="Webdesign"><img
src="http://www.tutorials.de/forum/images/webdesign.jpg" alt="Webdesign" onmouseover="rollOver(this)" onmouseout="rollOut(this)" /></a>
</div>

<div id="inhalt" class="contents">
<img src="http://www.tutorials.de/forum/images/herzlichwillkommen.jpg" alt="Herzlich Willkommen" />
<p>dummy text to expand the box</p>
<p>dummy text to expand the box</p>
<p>dummy text to expand the box</p>
<p>dummy text to expand the box</p>
<p>dummy text to expand the box</p>
<p>dummy text to expand the box</p>
<p>dummy text to expand the box</p>
<p>dummy text to expand the box</p>
<p>dummy text to expand the box</p>
<p>dummy text to expand the box</p>
<p>dummy text to expand the box</p>
<p>dummy text to expand the box</p>
<p>dummy text to expand the box</p>
<p>dummy text to expand the box</p>
<p>dummy text to expand the box</p>
<p>dummy text to expand the box</p>
<p>dummy text to expand the box</p>
<p>dummy text to expand the box</p>
<p>dummy text to expand the box</p>
<p>dummy text to expand the box</p>
<p>dummy text to expand the box</p>
<p>dummy text to expand the box</p>
<p>dummy text to expand the box</p>
<p>dummy text to expand the box</p>
<p>dummy text to expand the box</p>
<p>dummy text to expand the box</p>
<p>dummy text to expand the box</p>
<p>dummy text to expand the box</p>
<p>dummy text to expand the box</p>
<p>dummy text to expand the box</p>
<p>dummy text to expand the box</p>
<p>dummy text to expand the box</p>
<p>dummy text to expand the box</p>
<p>dummy text to expand the box</p>
<p>dummy text to expand the box</p>
<p>dummy text to expand the box</p>
</div>

<div id="footer" class="contents">
 <span id="info">
  &copy; <a href="webdesign.php" title="Webdesign">Webdesign</a> 2008 - <a
  href="mailto:xyz.xyz@domainname.ch">Angelo Zehr</a><br /><br />
  <img src="http://www.tutorials.de/forum/images/xhtml_icon.gif" alt="Valid xhtml" />
  <img src="http://www.tutorials.de/forum/images/css_icon.gif" alt="Valic css" />
  <img src="http://www.tutorials.de/forum/images/php_icon.gif" alt="PHP powered" />
  <img src="http://www.tutorials.de/forum/images/browser_icon.gif" alt="All browsers supported" />
 </span>
</div>

</div>
</body>
</html>
mfg Maik
 
Aus:

Code:
* html html {
	min-height: 100%;
	height: auto !important;
	height: 100%;
}


* html body {
	margin:0px;
	min-height: 100%;
	height: auto !important;
	height: 100%;
}

#wrapper {
	margin:auto;
	position: relative;
	width:911px;
}

* html #wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
}

#footer {
	position:fixed;
	bottom:0px;
	font-size:9px;
	line-height:7px;
	text-align:center;
	padding-top:5px;
	padding-bottom:5px;
	background:none;
}

* html #footer {
	position:absolute;
	left:0px;
	bottom:0px;
}

wurde:

Code:
html, body {
        margin:0px;
        height: 100%;
}

#wrapper {
        margin:auto;
        position: relative;
        width:911px;
        min-height: 100%;
        height: auto !important;
        height: 100%;
        background-color:#CFC6B7;
}

#footer {
        position:absolute;
        left:0;
        bottom:0px;
        font-size:9px;
        line-height:7px;
        text-align:center;
        padding-top:5px;
        padding-bottom:5px;
        background:none;
}
mfg Maik
 
Status
Nicht offen für weitere Antworten.
Zurück