Athris: Höhe des Div Containers auf 100% setzen

Beitrag lesen

SELF-Forum

Höhe des Div Containers auf 100% setzen

Athris
– Informationen zu den Bewertungsregeln

Guten Abend,

ich verzweifel seit einigen Stunden etwas und habe schon Tante Google ordentlich zum glühen gebracht, doch finde ich den Fehler einfach nicht.

Ich habe eine Webseite mit folgender CSS Datei:

  
body {  
margin:0;  
font:12px Tahoma;  
color:black;  
background:url("../images/bg1.jpg") 50% 0 #151921 repeat-x;  
}  
  
#box_background {  
background:url("../images/ev_bg.gif") repeat-y;  
width:1064px;  
margin:0px auto;  
}  
  
#content_box_background {  
width:1000px;  
margin:0 32px;  
background:url("../images/parchment-light2.jpg");  
border:1px solid black;  
border-width:0px 1px;  
}  
  
#header {  
height:162px;  
background:url("../images/wow_header.jpg") right no-repeat;  
padding:0 20px;  
}  
  
#header h1 {  
padding-top:115px;  
margin:0;  
color:white;  
}  
  
#header_line {  
clear:both;  
background:url("../images/border-red.gif") repeat-x;  
padding:20px 10px;  
}	  
		  
.horizontal #column {  
width:auto;  
float:none;  
height:30px;  
}  
  
#navigation a {  
background:url("../images/button-red.gif") no-repeat;  
width:115px;  
height:25px;  
display:block;  
padding-left:25px;  
margin:5px 0;  
font-size:11px;  
font-weight:bold;  
color:white;  
text-decoration:none;  
line-height:25px;  
}  
  
#navigation a:hover {  
background-position:0 bottom;  
}  
  
.horizontal #navigation a { float:left; }  
		  
#subnavigation { margin:10px 0; text-align:center;}	  
#subnavigation a { color:#7A0C0C; }  
#subnavigation a:hover { color:#E51414 }  
  
#content {  
float:left;  
width:50%;  
margin:0px 20px;  
}  
  
.horizontal #content {  
width:auto;  
float:none;  
}  
  
.content_title {  
background:url("../images/parchment-light3.jpg");  
border:1px solid #545454;  
margin-bottom:35px;  
line-height:18px;  
}  
  
.content_title h1 {  
background:url("../images/title-red.gif") repeat-x #0d2368;  
padding:2px 10px;  
margin:0;  
font-size:15px;  
color:white;  
}  
  
.content_body {  
padding:5px 15px;  
}  
  
ul {  
margin:20px; padding:10px;  
}  
  
li {  
list-style:none;  
background:url("../images/bullet.gif") 0 5px no-repeat;  
padding-left:30px; line-height:25px;  
}

Folgende HTML Datei habe ich erstellt:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
  <meta http-equiv="Content-Language" content="de">  
  <title>Meine Webseite</title> 			  
  <link href="css/meinecss.css" rel="stylesheet" type="text/css" />  
</head>  
<body>  
  <div id="box_background">  
    <div id="content_box_background">  
    <div id="header">Startseite</div>  
      <div id="header_line" class="horizontal">  
        <div id="column">  
	  <div id="navigation">  
            <a href="index.html">Startseite</a>  
	    <a href="andereseite.html">AndereSeite</a>  
	    <a href="andereseite2.html">AndereSeite2</a>  
	  </div>  
	</div>  
	<div id="subnavigation">  
	  <a href="subseite.html">Subseite</a>  
	</div>  
	<div id="content">  
	  <div class="content_title">  
	    <h1>Startseite</h1>  
	    <div class="content_body">  
	      Mein Content  
            </div>  
	  </div>  
	</div>			  
      </div>  
    </div>  
  </div>

Das ist die Seite:

Jetzt möchte ich die Pergamentbox und dessen Rand auf 100% Höhe bringen, also wie die Pfeile im Beispielscreen anzeigen. Dazu habe ich folgende Änderungen an der CSS Datei gemacht:

  
html, body { //html hinzugefügt  
margin:0;  
font:12px Tahoma;  
color:black;  
height:100%; //height hinzugefügt  
background:url("../images/bg1.jpg") 50% 0 #151921 repeat-x;  
}  
  
#box_background {  
background:url("../images/ev_bg.gif") repeat-y;  
width:1064px;  
margin:0px auto;  
min-height: 100%; /* Mindesthöhe auf 100 % (bei modernen Browsern) */ Hinzugefügt  
height: auto !important; /* important Befehl (bei modernen Browsern */ Hinzugefügt  
height: 100%; /* IE soll wie gewünscht interpretieren */ Hinzugefügt  
overflow: hidden !important; /* Firefox Scrollleiste */ Hinzugefügt  
}  
  
#content_box_background {  
width:1000px;  
margin:0 32px;  
background:url("../images/parchment-light2.jpg");  
border:1px solid black;  
border-width:0px 1px;  
min-height: 100%; /* Mindesthöhe auf 100 % (bei modernen Browsern) */ Hinzugefügt  
height: auto !important; /* important Befehl (bei modernen Browsern */ Hinzugefügt  
height: 100%; /* IE soll wie gewünscht interpretieren */ Hinzugefügt  
overflow: hidden !important; /* Firefox Scrollleiste */ Hinzugefügt

Doch leider sieht das dann so aus:

Hat irgendjemand eine Idee? Ich komme einfach nicht auf die Lösung.

Beitrag melden
–
Informationen zu den Bewertungsregeln