✔ Div min-height:100% will nicht

Status
Nicht offen für weitere Antworten.
freakcx

freakcx

Erfahrenes Mitglied
Hello Folks!

CSS:

PHP: 
#main_align{
  display:block;
  position:relative;
  min-height:100%;
  width:780px;
  margin-bottom:0px;
  vertical-align:bottom;
  margin:auto;
background-color:#00FFCC;
}
#container{
  display:block; 
  position:relative; 
  min-height:100%;
  width:780px;
  top:129px;
  left:0;
  margin:auto;
  background-image:url(assets/apple_05.jpg);
  background-position:bottom;
  background-repeat:no-repeat;
  background-color:#00FF33;
}

HTML:

PHP: 
<div id="main_align">
<div id="container">Inhalt</div>
</div>

Ich möchte das "container" bis ganz unten hin zum Browserrand erstreckt... tut es aber nicht, hab schon rum gefummelt aber werde aus CSS einfach nicht schlau ^^ hat jemand eine Idee?
 
Hi,

so sieht mein Lösungsvorschlag aus:

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_freakcx</title>

<style type="text/css">
<!--
* {
  margin:0;
  padding:0;
}

html,body {
  height:100%;
}

#main_align{
  position:relative;
  min-height:100%;
  height:auto !important;
  height:100%;
  width:780px;
  vertical-align:bottom;
  margin:0 auto;
  background:#00ff33 url(assets/apple_05.jpg) bottom no-repeat;
}

div#header {
  height:129px;
  background:#00ffcc;
}
-->
</style>

</head>
<body>

<div id="main_align">
     <div id="header">&nbsp;</div>
     <div id="container">
          <p>Inhalt</p>
          <!-- Ab hier wird der Inhalt zunächst auskommentiert -->
          <!--<p>Inhalt</p>
          <p>Inhalt</p>
          <p>Inhalt</p>
          <p>Inhalt</p>
          <p>Inhalt</p>
          <p>Inhalt</p>
          <p>Inhalt</p>
          <p>Inhalt</p>
          <p>Inhalt</p>
          <p>Inhalt</p>
          <p>Inhalt</p>
          <p>Inhalt</p>
          <p>Inhalt</p>
          <p>Inhalt</p>
          <p>Inhalt</p>
          <p>Inhalt</p>
          <p>Inhalt</p>
          <p>Inhalt</p>
          <p>Inhalt</p>
          <p>Inhalt</p>
          <p>Inhalt</p>
          <p>Inhalt</p>
          <p>Inhalt</p>
          <p>Inhalt</p>
          <p>Inhalt</p>
          <p>Inhalt</p>
          <p>Inhalt</p>
          <p>Inhalt</p>
          <p>Inhalt</p>
          <p>Inhalt</p>
          <p>Inhalt</p>
          <p>Inhalt</p>
          <p>Inhalt</p>
          <p>Inhalt</p>
          <p>Inhalt</p>
          <p>Inhalt</p>
          <p>Inhalt</p>
          <p>Inhalt</p>
          <p>Inhalt</p>
          <p>Inhalt</p>
          <p>Inhalt</p>
          <p>Inhalt</p>
          <p>Inhalt</p>
          <p>Inhalt</p>-->
     </div>
</div>

</body>
</html>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück