✔ content mit fester Breite & variabler Höhe

Status
Nicht offen für weitere Antworten.
0

08154711

Erfahrenes Mitglied
Hi,
Wie bekomme ich ohne ein ein Hintergrundbild zu nutzen es hin, das der weisse Bereich stets bündig oben und unten mit dem Browserfenster ist, auch ohne Inhalt . Ich habe dem Bereich margin:0 auto; zugewiesen, habe trotzdem einen Abstand von der Content-border zum unteren Teil des Browserfensters.
Danke
 

Anhänge

  • bsp.jpg
    bsp.jpg
    11,6 KB · Aufrufe: 21
Hi,

in diesem Modell erstreckt sich die Box #wrapper ohne Inhalt vom oberen bis zum unteren Fensterrand und benötigt hierfür kein Hintergrundbild:

Code: 
<!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">
<meta name="author" content="Maik">
<title>tutorials.de | demo_08154711</title>

<style type="text/css">
<!--
html,body {
margin:0;
padding:0;
height:100%;
background:#d5d5d5;
}

div#wrapper {
position:relative;
margin:0 auto;
width:780px;
min-height:100%; /* Mindesthöhe in modernen Browsern */
height:auto !important; /* !important-Regel für moderne Browser */
height:100%; /* Mindesthöhe in IE <7 */
background:#fff;
}

div#wrapper p {
margin:0;
padding:10px;
}
-->
</style>

</head>
<body>

<div id="wrapper">
     <!-- Inhalt ist auskommentiert -->
     <!--<p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>
     <p>some dummy text</p>-->
</div>

</body>
</html>
 
Hi,
Danke hat Super geklappt, allerdings -->Nicht unterstützte Eigenschaft: min-height<-- :confused: Sollte aber trotzdem funktionieren, oder...
Gruß
 
08154711 hat gesagt.:
-->Nicht unterstützte Eigenschaft: min-height<-- :confused: Sollte aber trotzdem funktionieren, oder...
Zum Vergrößern anklicken....
Diese Meldung bezieht sich auf die Vorgängerversionen des IE7, aber dafür haben wir ja mit

Code: 
min-height:100%; /* Mindesthöhe in modernen Browsern */
height:auto !important; /* !important-Regel für moderne Browser */
height:100%; /* Mindesthöhe in IE <7 */
Vorsorge geleistet :)

Zum Testen kannst du ja einfach mal den "auskommentierten" Inhalt im DIV #wrapper einblenden.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück