✔ Probleme mit dynamischen Layout (Div/CSS)

Status
Nicht offen für weitere Antworten.
M

Mastercraft

Grünschnabel
Guten Tag

bis vor kurzer Zeit habe ich für das Design immer Tabellen verwendet. Da es beim Verzicht auf Tabellen doch einige Vorteile gibt, wollte ich nun umsteigen. Nun stehe ich aber leider bereits nach wenigen Zeilen vor einem Problem.

Ich hätte gerne folgendes Layout umgesetzt:
--------------------------------------------
header, feste Position/Grösse (#bg_design_top_left)
--------------------------------------------
Inhalt, mind. Grösse so das der Bildschirm ausgefüllt ist (Inhalt = Browsergesamtplatz - Header - Footer).
Falls mehr Platz benötigt wird, darf er diesen aber dynamisch über den Bildschirm
hinaus verwenden. Der Footer wird somit auch nach unten geschoben.(#bg_design_center_left)
--------------------------------------------
Footer, feste Grösse/Position (Ausnahme, Inhalt benötigt mehr Platz auf
dem Bildschim als verhanden. In diesem Fall wird er zusammen mit dem Inhalt aus dem Bildschirm geschoben (#bg_design_bottom_left)
--------------------------------------------

Mit der Tabelle hätte ich das beim Inhalt so gemacht: height="*"

hier nun mal der css-code:
Code: 
html, body {
       	height:					100%;
        width:					100%;
        margin:					0px;
        padding:				0px;
}

#bg_design_top_left {
       width:					65px;
	height:                                 57px;
	border:					1px solid #000000;
        background-image:		url(pics/bg_corner_top_left.jpg); background-repeat:no-repeat;
}

#bg_design_center_left {
	width:					65px;
	height:					100%;
	border:					1px solid #000000;
        background-image:		url(pics/bg_corner_center_left.jpg); background-repeat: repeat-y;
}

#bg_design_bottom_left {
        width:					65px;
	height:                                 57px;
	border:					1px solid #000000;
        background-image:		url(pics/bg_corner_bottom_left.jpg); background-repeat: no-repeat;
}
HTML:
Code: 
<?xml version="1.0"?>
<!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>
<title>Lords</title>
<link rel="stylesheet" type="text/css" href="style.css"></link>
</head>
<body>
<div id="bg_design_top_left"></div>
<div id="bg_design_center_left"></div>
<div id="bg_design_bottom_left"></div>
</body>
</html>
Das Problem ist jetzt aber, dass er beim inhalt (#bg_design_center_left) die Grösse des gesamten Bildschirms (also ohne abzug von header/footer) als Grösse nimmt, da ja der Body das Mutterelement ist (->height:100%), dass heisst ein Teil des Footers ist so immer ausserhalb(unten) des Bildschirms.

Könnte mir jemand zeigen wie man mit CSS umsetzt?

Ich hoffe ich hab mich verständlich Ausgedrückt und bei der SuFu nichts übersehen.

Danke euch schon jetzt!

Liebe Grüsse

Marco
 
mit reinem css geht es crossbrowser nur so.
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head><title></title>
<style type="text/css">
html {
  height: 100%; 
  max-height: 100%; 
  overflow: hidden; 
  padding: 0px; 
  margin: 0px; 
  border: 0px; 
  background-color: #fff; 
}
body {
  height: 100%; 
  max-height: 100%; 
  overflow: hidden; 
  padding: 0px; 
  margin: 0px; 
}
#content {
  height: 100%; 
  max-height: 100%; 
  overflow: auto; 
  padding-left: 200px; 
  position: relative; 
  z-index: 3; 
}
#head {
  position: absolute; 
  margin: 0px; 
  top: 0px; 
  right: 18px;  
  width: 100%; 
  height: 100px; 
  z-index: 5; 
  background-color: red;
}
#foot {
  position: absolute; 
  margin: 0px; 
  bottom: 0px; 
  right: 18px;  
  width: 100%; 
  height: 50px;    
  z-index: 4; 
  background-color: red;
}
div.abstand {
  height: 100px;
}
div.pad1 { 
  width: 18px; 
  height: 50px; 
  float: left;
}
</style>
</style>
</head>
<body>
<div id="head"><div class="pad1"></div>Header</div>
<!-- content -->
<div id="content">

<div class="abstand"></div>

asdsadasdsasa<br />
asdsadasdsasa<br />

<div class="abstand"></div>

</div>
<!-- ende content -->
<div id="foot"><div class="pad1"></div>Footer</div>

</body>
</html>

ansonsten musst du JavaScript verwenden.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück