[H] HTML Seite an Browserhöhe anpassen

AprovelPD · 15.11.2010

Hallo liebe PSD-Tut Mitglieder,

ich habe folgendes Problem bzw. vorhaben:
Eine Website ist nach folgendem Muster aufgebaut:

+--------------------------------------------------------------------+
| header-wrapper (Höhe 150px) |
+--------------------------------------------------------------------+
+-------------------------------------------------------------------+
| menu-wrapper (Höhe 50px) |
+-------------------------------------------------------------------+
| |
| Content (in der css "page"|
| |
| |
| |
| |
+-------------------------------------------------------------------+
| Footer (Höhe 100px) |
+-------------------------------------------------------------------+

Nun möchte ich das der Footer immer ganz unten ist und der Header ganz oben. Die sollen fest sein - also der Header soll oben in der Browseranzeige sien und der Footer unten in der Anzeige. Der Content Soll sich variabel anpassen an der nun noch Verfügabren Höhe im Browser. 300pixel der Auflösung sind nun schon verbaucht der rest soll dem Content vergeben werden. (Ich will keine Scrollbar auf der gesamten Seite haben sondern dem Conten eine eigene geben mit jScrollPane)

Hoffe das ich das verständlich erklärt habe...:/

Nun meine CSS und die HTML Seite:
HTML:

PHP:

<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Titel</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper">
  <!-- start header -->
  <div id="header-wrapper">
    <div id="header">
      <div id="logo">
        <h1><a href="#"><span>NAME</span></a></h1>
        <p>Slogan</p>
      </div>
    </div>
  </div>
  <div id="menu-wrapper">
    <div id="menu">
      <ul id="main">
        <li class="current_page_item"><a href="index.html">Homepage</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Contact Us</a></li>
      </ul>
    </div>
  </div>
  <!-- end header -->
  <!-- start page -->
  <div id="page">
  <div id="page-bgtop">
   <div id="page-bgbtm">
   <div id="sidebar1" class="sidebar">

    </div>
    <!-- start content -->
    <div id="content">
      <div class="post">
        <h1 class="title">Titel</h1>
        <p class="byline"><em>Unterzeile</em></p>
        <div class="entry">
           INHALT
        </div>
      </div>
    </div>
    <!-- end content -->
    <!-- start sidebars -->
    <div id="sidebar2" class="sidebar">

    </div>
    <!-- end sidebars -->
    <div style="clear: both;">&nbsp;</div>
  </div>
  <!-- end page -->
</div>
</div>
</div>
<div id="footer-wrapper">
  <div id="footer">
    <p class="copyright">&copy;&nbsp;&nbsp;2010 All Rights Reserved &nbsp;&bull;&nbsp; Design by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
  </div>
</div>
</body>
</html>

Nun die CSS dazu:

PHP:

body {
    margin: 0px;
    padding: 0;
    background: #2E0815;
    text-align: justify;
    font-family:  Tahoma, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #000000;
}

h1, h2, h3 {
    margin-top: 0;
}

h1 {
    font-size: 1.6em;
    font-weight: normal;
}

h2 {
    font-size: 1.6em;
}

h3 {
    font-size: 1em;
}

ul {
}

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

a:hover {
    border-bottom: none;
}

a img {
    border: none;
}

img.left {
    float: left;
    margin: 0 20px 0 0;
}

img.right {
    float: right;
    margin: 0 0 0 20px;
}

#header-wrapper {
    width: 100%;
    height: 150px;
    background: url(images/img01.gif) repeat-x left top;
}

#header {
    width: 960px;
    margin: 0 auto;
    height: 150px;
}

/* Header */

#logo {
    width: 960px;
    height: 150px;
    margin: 0 auto;
}

#logo h1, #logo p {
    margin: 0;
    padding-left: 100px;
    color: #FFFFFF;
}

#logo span {
    color: #FFFFFF;
}

#logo h1 {
    padding: 25px 0 0 0;
    letter-spacing: -1px;
    text-transform: lowercase;
    font-weight: normal;
    font-size: 4.8em;
}

#logo p {
    text-transform: lowercase;
    padding: 4px 0 0 3px;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 22px;
    color: #FFFFFF;
}

#logo a {
    border: none;
    text-decoration: none;
    color: #FFFFFF;
}

/* Menu */

#menu-wrapper {
    width: 100%;
    height: 50px;
    background: url(images/img02.gif) repeat-x left top;
}

#menu {
    width: 960px;
    margin: 0 auto;
    height: 50px;
    padding: 0px;
    background: url(images/img03.gif) no-repeat left top;
}

#menu ul {
    margin: 0px 0px 0px 0px;
    padding: 18px 0px 0px 0px;
    list-style: none;
}

#menu li {
    float: left;
    display: inline;
}

#menu a {
    height: 30px;
    margin: 0;
    padding: 10px 30px;
    text-decoration: none;
    text-transform: capitalize;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #FFFFFF;
}

#menu a:hover {
    color: #FFFFFF;
}

#menu .current_page_item a {
    background: #F21C72;
    color: #2E0815;
}

/* Wrapper */

#wrapper {
    width: 100%;
    margin: 0px;
    padding: 0px;
}

/* Page */

#page {
    width: 960px;
    margin: 30px auto 30px auto;
    padding: 0px;
    background: url(images/img06.gif) repeat-y left top;
    color: #E75982;
}

#page-bgtop {
    background: url(images/img05.gif) no-repeat left top;
}

#page-bgbtm {
    background: url(images/img07.gif) no-repeat left bottom;
    padding: 0px 20px;
}

/* Latest Post */

#latest-post {
    padding: 20px;
    border: 1px solid #E7E7E7;
}

/* Content */

#content {
    float: left;
    width: 580px;
    margin: 20px 30px 20px 30px;
}

.post {
    padding-bottom: 15px;
    line-height: 200%;
    background: url(images/img10.gif) no-repeat right 18px;
}

.post h1 {
    font-weight: normal;
}

.title {
    margin: 0;
    padding: 30px 0 4px 0px;
    text-transform: lowercase;
    font-family: "Trebuchet MS", Georgia, "Times New Roman", Times, serif;
    font-size: 30px;
    font-weight: normal;
}

.title a {
    border-bottom: none;
    color: #FFFFFF;
}

.byline {
    margin: -4px 0px 20px 0px;
    padding: 4px 2px;
    background: url(images/img08.gif) repeat-x left bottom;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #cccccc;
}

.byline a {
    color: #FFA1BD;
}

.tag {`
    padding: 0 15px;
}

.entry {
    padding: 0px 0px;
}

.links {
    width: 80px;
    height: 33px;
    text-align: right;
    font-weight: bold;
}

.links a {
    display: block;
    height: 25px;
    padding-top: 8px;
    text-align: left;
    color: #FFFFFF;
}

.links a:hover {
}

/* Sidebars */

#sidebar1 {
    float: left;
    width: 135px;
}

#sidebar2 {
    float: right;
    width: 135px;
}

.sidebar {
    float: left;
    padding-top: 40px;
    color: #FFA1BD;
}

.sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar li {
    padding: 0 0 20px 0;
}

.sidebar li ul {
    background: none;
    padding-bottom: 20px;
}

.sidebar li li {
    margin: 0px 15px;
    padding: 8px 0px;
}


.sidebar li h2 {
    height: 26px;
    margin: 0 0 0 0;
    padding: 14px 15px 14px 15px;
     background: url(images/img08.gif) repeat-x left bottom;
    text-transform: capitalize;
    font-size: 22px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    color: #FFFFFF;
}

.sidebar a {
    padding-left: 15px;
    background: url(images/img09.gif) no-repeat left 5px;
    color: #FFFFFF;
}


/* Footer */

#footer-wrapper {
    width: 100%;
    height: 100px;
    background: url(images/img04.gif) repeat-x left top;
}

#footer {
    width: 1000px;
    height: 100px;
    margin: 0 auto;
    padding: 0 20px;
}

#footer p {
    margin: 0;
    padding: 30px 0 0 0;
    text-align: center;
    text-transform: uppercase;
    font-size: 10px;
    font-family: Arial, Helvetica, sans-serif;
    color: #FFA1BD;
}

#footer a {
    color: #D1567B;
}

#footer .link {
}

#footer .copyright {
}

Freu emich über Hilfe sehr.

Euer AprovelPD

Silvio · 15.11.2010

AW: [H] HTML Seite an Browserhöhe anpassen

dem content "height:100%;" geben reicht nicht aus? Oder habe ich das falsch verstanden?

AprovelPD · 15.11.2010

AW: [H] HTML Seite an Browserhöhe anpassen

Hi,

nein passiert entweder gar nichts oder der Content wird größer und Footer/Header sind ausserhalb der Anzeige (sprich ich muss scrollen)

anoX · 15.11.2010

AW: [H] HTML Seite an Browserhöhe anpassen

Was Du meinst und brauchst, ist ein "Stickyfooter".

Doitsu · 15.11.2010

AW: [H] HTML Seite an Browserhöhe anpassen

Silvio schrieb:
dem content "height:100%;" geben reicht nicht aus? Oder habe ich das falsch verstanden?

height in % angaben geht nur, wenn das uebergeordnete Element eine feste hoehe hat - was hier nicht der Fall ist.

zum Problem:
Setze den footer per position: absolute; & bottom: 0px; nach ganz unten - den content gibst du dann ein margin-bottom: -footerhoehe-px mit, damit er sich nicht drunter schiebt. Ansonsten einfach nach 'sicky footer' suchen, gibt es auch in diesem Forum einige Threads zu.

AprovelPD · 15.11.2010

AW: [H] HTML Seite an Browserhöhe anpassen

Sorry wenn ich nun dreist oder nervig rüber komme:
Wie bau ich das nun ein? oO

ALso ich meine den Sticky Footer

Doitsu · 15.11.2010

AW: [H] HTML Seite an Browserhöhe anpassen

Ein wenig eigen Initiative waere wuenschenswert - versuch es doch einfach, sonderlich schwer ist das ja nicht.. Wenn du dann nicht weiter weisst, kannst du immer noch fragen.

fexx · 15.11.2010

AW: [H] HTML Seite an Browserhöhe anpassen

AprovelPD schrieb:
Sorry wenn ich nun dreist oder nervig rüber komme:
Wie bau ich das nun ein? oO

ALso ich meine den Sticky Footer

das bisschen html und css code bekommst du schon hin

CSS Sticky Footer hier wäre noch eine alternative, die ich in solchen fällen verwende ;-)

anoX · 15.11.2010

AW: [H] HTML Seite an Browserhöhe anpassen

Vergiss den Link von eben. ^^

Das hier erklärt es besser: LINK

Was Du beachten musst, ist, dass Du einen Container um header und content und sidebar hast. Und einen seperaten um den Footer.

Der Code ist eigentlich selbsterklärend. Hast Du dennoch Fragen, dann frag.

AprovelPD · 15.11.2010

AW: [H] HTML Seite an Browserhöhe anpassen

Ich habs laut der ersten Anleitung gemacht...
nun geht der Content bei Überlänger sozusagen hinter dem Footer zuende..und komtm sogar unter ihm wieder raus.

fexx · 15.11.2010

AW: [H] HTML Seite an Browserhöhe anpassen

schick mal bitte einen link zu deinem projekt (gerne auch per pm) ... ist bestimmt nur ein kleiner fehler

AprovelPD · 15.11.2010

AW: [H] HTML Seite an Browserhöhe anpassen

wollt halt ienfahc mla was basteln...da ich die domain noch über habe:

anoX · 15.11.2010

AW: [H] HTML Seite an Browserhöhe anpassen

Schmeiß das mit der Klasse minheight raus.
Erstelle eine Klasse "clear":

Code:

.clear {
   clear:left;
   float:none;
   height:0;
   line-height:0.0em
}

Pack in die .html zwischen wrapper und footer-wrapper den clear und nimm aus dem footer position absolute raus und änder das in relative.

AprovelPD · 15.11.2010

AW: [H] HTML Seite an Browserhöhe anpassen

Okay hab ich gemacht..nun bleibt de Footer aber nicht mehr unten (solltes du auf der seite nun sehen - hab den Inhalt mal gelöscht..bis auf 2 Zeilen)

anoX · 15.11.2010

AW: [H] HTML Seite an Browserhöhe anpassen

Ich poste das nun einfach mal hier. Würde ja sagen, was ich geändert habe, aber blicke gerade nicht mehr ganz durch.

So funktioniert es jedenfalls nun bei mir im FF 3.6

Code:

@charset "utf-8";
/* CSS Document */

html,
body {
   margin:0;
   padding:0;
   height:100%;
   background: #2E0815;
   text-align: justify;
   font-family:  Tahoma, Arial, Helvetica, sans-serif;
   font-size: 11px;
   color: #000000;
}

.clear {
   clear:left;
   float:none;
   height:0;
   line-height:0.0em
}

h1, h2, h3 {
    margin-top: 0;
}

h1 {
    font-size: 1.6em;
    font-weight: normal;
}

h2 {
    font-size: 1.6em;
}

h3 {
    font-size: 1em;
}

ul {
}

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

a:hover {
    border-bottom: none;
}

a img {
    border: none;
}

img.left {
    float: left;
    margin: 0 20px 0 0;
}

img.right {
    float: right;
    margin: 0 0 0 20px;
}

#header-wrapper {
    width: 100%;
    height: 150px;
    background: url(images/img01.gif) repeat-x left top;
}

#header {
    width: 960px;
    margin: 0 auto;
    height: 150px;
}

/* Header */

#logo {
    width: 960px;
    height: 150px;
    margin: 0 auto;
}

#logo h1, #logo p {
    margin: 0;
    padding-left: 100px;
    color: #FFFFFF;
}

#logo span {
    color: #FFFFFF;
}

#logo h1 {
    padding: 25px 0 0 0;
    letter-spacing: -1px;
    text-transform: lowercase;
    font-weight: normal;
    font-size: 4.8em;
}

#logo p {
    text-transform: lowercase;
    padding: 4px 0 0 3px;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 22px;
    color: #FFFFFF;
}

#logo a {
    border: none;
    text-decoration: none;
    color: #FFFFFF;
}

/* Menu */

#menu-wrapper {
    width: 100%;
    height: 50px;
    background: url(images/img02.gif) repeat-x left top;
}

#menu {
    width: 960px;
    margin: 0 auto;
    height: 50px;
    padding: 0px;
    background: url(images/img03.gif) no-repeat left top;
}

#menu ul {
    margin: 0px 0px 0px 0px;
    padding: 18px 0px 0px 0px;
    list-style: none;
}

#menu li {
    float: left;
    display: inline;
}

#menu a {
    height: 30px;
    margin: 0;
    padding: 10px 30px;
    text-decoration: none;
    text-transform: capitalize;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #FFFFFF;
}

#menu a:hover {
    color: #FFFFFF;
}

#menu .current_page_item a {
    background: #F21C72;
    color: #2E0815;
}

/* Page */

#page {
    width: 960px;
    margin: 30px auto 30px auto;
    padding: 0px;
    background: url(images/img06.gif) repeat-y left top;
    color: #E75982;
}

#page-bgtop {
    background: url(images/img05.gif) no-repeat left top;
}

#page-bgbtm {
    background: url(images/img07.gif) no-repeat left bottom;
    padding: 0px 20px;
}

/* Latest Post */

#latest-post {
    padding: 20px;
    border: 1px solid #E7E7E7;
}

/* Content */

#content {
    float: left;
    width: 580px;
    margin: 20px 30px 20px 30px;
    overflow:auto;
    padding-bottom: 100px;
}

.post {
    padding-bottom: 15px;
    line-height: 200%;
    background: url(images/img10.gif) no-repeat right 18px;
}

.post h1 {
    font-weight: normal;
}

.title {
    margin: 0;
    padding: 30px 0 4px 0px;
    text-transform: lowercase;
    font-family: "Trebuchet MS", Georgia, "Times New Roman", Times, serif;
    font-size: 30px;
    font-weight: normal;
}

.title a {
    border-bottom: none;
    color: #FFFFFF;
}

.byline {
    margin: -4px 0px 20px 0px;
    padding: 4px 2px;
    background: url(images/img08.gif) repeat-x left bottom;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #cccccc;
}

.byline a {
    color: #FFA1BD;
}

.tag {`
    padding: 0 15px;
}

.entry {
    padding: 0px 0px;
}

.links {
    width: 80px;
    height: 33px;
    text-align: right;
    font-weight: bold;
}

.links a {
    display: block;
    height: 25px;
    padding-top: 8px;
    text-align: left;
    color: #FFFFFF;
}

.links a:hover {
}

/* Sidebars */

#sidebar1 {
    float: left;
    width: 135px;
}

#sidebar2 {
    float: right;
    width: 135px;
}

.sidebar {
    float: left;
    padding-top: 40px;
    color: #FFA1BD;
}

.sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar li {
    padding: 0 0 20px 0;
}

.sidebar li ul {
    background: none;
    padding-bottom: 20px;
}

.sidebar li li {
    margin: 0px 15px;
    padding: 8px 0px;
}


.sidebar li h2 {
    height: 26px;
    margin: 0 0 0 0;
    padding: 14px 15px 14px 15px;
     background: url(images/img08.gif) repeat-x left bottom;
    text-transform: capitalize;
    font-size: 22px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    color: #FFFFFF;
}

.sidebar a {
    padding-left: 15px;
    background: url(images/img09.gif) no-repeat left 5px;
    color: #FFFFFF;
}

#wrapper {
   min-height:100%;
   position:relative;
}

#body {
   padding:10px;
   padding-bottom:100px;   /* Höhe des Footers */
}

#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:100px;   /* Höhe des Footers */
    background:#fff;
}

#footer p {
    margin: 0;
    padding: 30px 0 0 0;
    text-align: center;
    text-transform: uppercase;
    font-size: 10px;
    font-family: Arial, Helvetica, sans-serif;
    color: #FFA1BD;
}

#footer a {
    color: #D1567B;
}

#footer .link {
}

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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Titel</title>
<link href="style2.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>

<div id="wrapper">
    <div id="header-wrapper">
  <div id="header">
   <div id="logo">
    <h1><a href="#"><span>NAME</span></a></h1>
    <p>Slogan</p>
   </div>
  </div>
 </div>
 <div id="menu-wrapper">
    <div id="menu">
      <ul id="main">
        <li class="current_page_item"><a href="index.html">Homepage</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Contact Us</a></li>
      </ul>
    </div>
  </div>
 <div id="page">
     <div id="page-bgtop">
      <div id="page-bgbtm">
       <div id="sidebar1" class="sidebar"></div>
    <div id="content">
        <div class="post">
         <h1 class="title">Titel</h1>
          <p class="byline"><em>Unterzeile</em></p>
       <div class="entry">
        INHALT
       </div>
      </div>
    </div>
    <div id="sidebar2" class="sidebar"></div>
   </div>
  </div>
 </div>
 <div class="clear"></div>
 <div id="body"></div>
 <div id="footer">
 <p class="copyright">&copy;&nbsp;&nbsp;2010 All Rights Reserved &nbsp;&bull;&nbsp; Design by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
 </div>
</div>

</body>
</html>

Silvio · 15.11.2010

AW: [H] HTML Seite an Browserhöhe anpassen

Doitsu schrieb:
height in % angaben geht nur, wenn das uebergeordnete Element eine feste hoehe hat - was hier nicht der Fall ist.

Axo, jetzt habe ich das erstmal gerafft, sorry, habs vorhin total falsch verstanden. :lol:

AprovelPD · 15.11.2010

AW: [H] HTML Seite an Browserhöhe anpassen

Gab bei mit im FF nur Fehler

Der Footer war nun weiß und unformatiert jedoch war der Inhalt 100% der Höhe.

anoX · 15.11.2010

AW: [H] HTML Seite an Browserhöhe anpassen

Hm. Hier ohne Probleme.

Was, wenn Du dich mal von einigen Containern verabschiedest? Ich finde die teilweise überflüssig. Der im Footer muss z.B. nicht sein. Würde auch da den Fehler vermuten.

AprovelPD · 15.11.2010

AW: [H] HTML Seite an Browserhöhe anpassen

SO ich habe e snun geschafft das der Footer "sticky" ist

Er bleibt also fein unten

Nun meine nächste Frage bzw wieder mal Problem wo ich keine Lösung weiss weil ich schon in den Tags
Wrapper Page und COnten jeweils height:100%; eingeben habe jedoch wollte sich das Feld nie vergrößern.

Mein HTML Code ist nun:

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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>rbs-dienste - genau richtig!</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>
<div id="root">
 <!-- start wrapper -->
 <div id="wrapper">
  <!-- start header -->
  <!-- start logo -->
  <div id="header-wrapper">
   <div id="header">
    <div id="logo">
     <h1><span>RBS-Dienste</span></h1>
     <p>genau richtig!</p>
    </div>
   </div>
  </div>
  <!-- end logo -->
   
  <!-- start menu -->   
  <div id="menu-wrapper">
   <div id="menu">
    <ul id="main">
     <li class="current_page_item"><a href="index.html">Homepage</a></li>
     <li><a href="#">Services</a></li>
     <li><a href="#">About Us</a></li>
     <li><a href="#">Contact Us</a></li>
    </ul>
   </div>
  </div>
  <!-- end menu -->
  <!-- end header -->
  
  <!-- start page -->
  <div id="page">
   <!-- start page bgtop -->
   <div id="page-bgtop">
    <!-- start pagebgbtm -->
    <div id="page-bgbtm">
    
     <!-- start sidebar1 -->
     <div id="sidebar1" class="sidebar">
      &nbsp;
     </div>
     <!-- end sidebar1 -->
     
     <!-- start content -->
     <div id="content">
      <div class="post">
       <h1 class="title">RBS-Dienste</h1>
       <p class="byline"><em>genau richtig!</em></p>
       <div class="entry">
        <p>
         Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et 
        </p>
       </div>
      </div>
     </div>
     <!-- end content -->
    
     <!-- start sidebars -->
     <div id="sidebar2" class="sidebar">
      &nbsp;
     </div>
     <!-- end sidebars -->
     <div style="clear: both;">
      &nbsp;
     </div>
    </div>
    <!-- end page-bgbtm -->
   </div>
   <!-- end page-bgtop -->
  </div>
  <!-- end page -->
 </div>
 <!-- end wrapper-->
 
 <div id="minheight"></div>
 
 <!-- start footer -->
 <div id="footer-wrapper">
  <div id="footer">
   <p class="copyright">&copy;&nbsp;&nbsp;2010 All Rights Reserved &nbsp;&bull;&nbsp; Design by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
  </div>
 </div>
 <!-- end footer -->
</div>
</body>
</html>

und CSS:

HTML:

root {
    position:relative;
    height:auto !important;
    height:100%;
    min-height:100%;
    margin:0px auto -40px;    
}

body {
    margin: 0px;
    padding: 0;
    background: #2E0815;
    text-align: justify;
    font-family:  Tahoma, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #000000;
}

h1, h2, h3 {
    margin-top: 0;
}

h1 {
    font-size: 1.6em;
    font-weight: normal;
}

h2 {
    font-size: 1.6em;
}

h3 {
    font-size: 1em;
}

ul {
}

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

a:hover {
    border-bottom: none;
}

a img {
    border: none;
}

img.left {
    float: left;
    margin: 0 20px 0 0;
}

img.right {
    float: right;
    margin: 0 0 0 20px;
}

#header-wrapper {
    width: 100%;
    height: 100px;
    background: url(images/img01.gif) repeat-x left top;
}

#header {
    width: 960px;
    margin: 0 auto;
    height: 100px;
}

/* Header */

#logo {
    width: 960px;
    height: 100px;
    margin: 0 auto;
}

#logo h1, #logo p {
    margin: 0;
    padding-left: 100px;
    color: #FFFFFF;
}

#logo span {
    color: #FFFFFF;
}

#logo h1 {
    padding: 12px 0 0 0;
    letter-spacing: -1px;
    text-transform: lowercase;
    font-weight: normal;
    font-size: 3.8em;
}

#logo p {
    text-transform: lowercase;
    padding: 4px 0 0 3px;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 12px;
    color: #FFFFFF;
}

#logo a {
    border: none;
    text-decoration: none;
    color: #FFFFFF;
}

/* Menu */

#menu-wrapper {
    width: 100%;
    height: 40px;
    background: url(images/img02.gif) repeat-x left top;
}

#menu {
    width: 960px;
    margin: 0 auto;
    height: 40px;
    padding: 0px;
    background: url(images/img03.gif) no-repeat left top;
}

#menu ul {
    margin: 0px 0px 0px 0px;
    padding: 14px 0px 0px 0px;
    list-style: none;
}

#menu li {
    float: left;
    display: inline;
}

#menu a {
    height: 20px;
    margin: 0;
    padding: 5px 20px;
    text-decoration: none;
    text-transform: capitalize;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #FFFFFF;
}

#menu a:hover {
    color: #FFFFFF;
}

#menu .current_page_item a {
    background: #F21C72;
    color: #2E0815;
}

/* Wrapper */

#wrapper {
    width: 100%;
    margin: 0px;
    padding: 0px;
}

/* Page */

#page {
    width: 960px;
    margin: 30px auto 30px auto;
    padding: 0px;
    background: url(images/img06.gif) repeat-y left top;
    color: #E75982;
}

#page-bgtop {
    background: url(images/img05.gif) no-repeat left top;
}

#page-bgbtm {
    background: url(images/img07.gif) no-repeat left bottom;
    padding: 0px 20px;
}

/* Content */

#content {
    float: left;
    width: 580px;
    margin: 20px 30px 20px 30px;
}

.post {
    padding-bottom: 15px;
    line-height: 200%;
    background: url(images/img10.gif) no-repeat right 18px;
}

.post h1 {
    font-weight: normal;
}

.title {
    margin: 0;
    padding: 30px 0 4px 0px;
    text-transform: lowercase;
    font-family: "Trebuchet MS", Georgia, "Times New Roman", Times, serif;
    font-size: 30px;
    font-weight: normal;
}

.title a {
    border-bottom: none;
    color: #FFFFFF;
}

.byline {
    margin: -4px 0px 20px 0px;
    padding: 4px 2px;
    background: url(images/img08.gif) repeat-x left bottom;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #cccccc;
}

.byline a {
    color: #FFA1BD;
}

.tag {`
    padding: 0 15px;
}

.entry {
    padding: 0px 0px;
}

.links {
    width: 80px;
    height: 33px;
    text-align: right;
    font-weight: bold;
}

.links a {
    display: block;
    height: 25px;
    padding-top: 8px;
    text-align: left;
    color: #FFFFFF;
}

.links a:hover {
}

/* Sidebars */

#sidebar1 {
    float: left;
    width: 135px;
}

#sidebar2 {
    float: right;
    width: 135px;
}

.sidebar {
    float: left;
    padding-top: 40px;
    color: #FFA1BD;
}

.sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar li {
    padding: 0 0 20px 0;
}

.sidebar li ul {
    background: none;
    padding-bottom: 20px;
}

.sidebar li li {
    margin: 0px 15px;
    padding: 8px 0px;
}


.sidebar li h2 {
    height: 26px;
    margin: 0 0 0 0;
    padding: 14px 15px 14px 15px;
     background: url(images/img08.gif) repeat-x left bottom;
    text-transform: capitalize;
    font-size: 22px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    color: #FFFFFF;
}

.sidebar a {
    padding-left: 15px;
    background: url(images/img09.gif) no-repeat left 5px;
    color: #FFFFFF;
}


/* Footer */

#minheight {
    height:40px;
    clear:both;
}

#footer-wrapper {
    position:absolute;
    bottom: 0px !important;
    width: 100%;
    height: 40px;
    margin:0px auto;
    background: url(images/img04.gif) repeat-x left top;
}

#footer {
    width: 1000px;
    height: 40px;
    margin: 0 auto;
    padding: 0 20px;
}

#footer p {
    margin: 0;
    padding: 20px 0 0 0;
    text-align: center;
    text-transform: uppercase;
    font-size: 10px;
    font-family: Arial, Helvetica, sans-serif;
    color: #FFA1BD;
}

#footer a {
    color: #D1567B;
}

#footer .link {
}

#footer .copyright {
}

Ich möchte nun das sich das Feld in dem sich die Sidebars und der Content befindet nun anhand der verfügbaren resthöhe darau fhin vergrößert und nicht am Text Orientiert (so wie im mom) ansehen ist es auf

krid2873 · 16.11.2010

AW: [H] HTML Seite an Browserhöhe anpassen

Hi,

AprovelPD:
SO ich habe e snun geschafft das der Footer "sticky" ist
Er bleibt also fein unten

Nö. -Verkleinere mal das Browserfenster und scroll dann nach unten.

Könnte es sein das du eigentlich etwas anderes wolltest:

Nun möchte ich das der Footer immer ganz unten ist und der Header ganz oben. Die sollen fest sein - also der Header soll oben in der Browseranzeige sien und der Footer unten in der Anzeige. Der Content Soll sich variabel anpassen an der nun noch Verfügabren Höhe im Browser. 300pixel der Auflösung sind nun schon verbaucht der rest soll dem Content vergeben werden. (Ich will keine Scrollbar auf der gesamten Seite haben sondern dem Conten eine eigene geben mit jScrollPane)

Klingt für mich eher nach diesem Ansatz:

-Eine einfache deutschsprachige Erklärung gibt es hier:
Feststehender Header/Footer mit HTML & CSS ... | Space²