Problem mit DIV-Layout

G

GottiRhg

Mitglied
Hallo zusammen,
ich habe ein Problem mit einem DIV-Layout.
Folgendes soll realisiert werden:
1 DIV: fixer Header
1 DIV: Content
1 DIV: fixer Footer

Das ganze in einer Gesamtbreite von 1000px. Header soll immer oben im Browser und Footer immer unten im Browser angezeigt werden. Der Content soll scrollbar sein und im Content können weitere DIVs hinzukommen.

Habe schon einiges versucht. Mein bestes Ergebnis war, dass Header und Footer zwar fix waren, aber die Scrollbar nur im DIV des Contents zu sehen war. Das ist nicht Sinn der Sache. Es soll die komplette Scrollbar des Browsers zu sehen sein.

Würde mich über Hilfe sehr freuen!
 
Hallo zusammen,
habe das Problem durch weitere lange Recherchen im Netz selbst lösen können.
Falls jemand das gleiche Problem hat, hier eine Lösung:

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>
  <style type="text/css">
	body {
	  margin: 0;
	  padding: 0;
  }
  
  #header_wrap {
    background-color: #ff0000;
    color: #ffffff;
    height: 93px;
    width: 1000px;
    left: 0;
    position: fixed;
    top: 0;
  }

  #footer_wrap {
    background-color: #000000;
    color: #ffffff;
    width: 1000px;
    bottom: 0;
    left: 0;
    position: fixed;
  }
  
  #content_wrap {
    background-color: #0000ff;
    color: #ffffff;
  }
  
  #content_inner {
    margin: 0;
    padding: 93px 0;
    width: 1000px;
  }
  </style>

  </head>
  
  <body>

  <div id="header_wrap">
    <div id="header_inner">
      <p>Header</p>
    </div>
  </div>
  
  <div id="content_wrap">
    <div id="content_inner">
      <p>Oben</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
      <p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
      <p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
      <p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Unten</p>
    </div>
  </div>
  
  <div id="footer_wrap">
    <div id="footer_inner">
      <p>Footer</p>
    </div>
  </div>

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

Neue Beiträge

Zurück