Guten Tag,
ich bin ein Neuling, habe mich intensiv in CSS eingelesen und versucht meine erste einfache Homepage zu erstellen.
Mein Problem ist, dass mir kein passender CSS-Code gelingt, der den Contenthintergrund meiner Page über die gesamte Seitenhöhe darstellt.
Ich habe einen fixen Footer erstellt, der auch richtig angezeigt wird im Browser aber zwischen Content und Footer klafft bei wenig Inhalt ein unschöner weisser Bereich, die ich gerne mit der Hintergrundfarbe des Inhalts gefüllt hätte.
Wie bekomme ich den Content (#content_wrapper) dazu, dass er mit seiner Hintergrundfarbe die ganze Höhe der Seite ausfüllt, auch wenn der Inhalt nicht bis nach unten zum Footer reicht?
Ich hoffe, es erbarmt sich jemand.
Gruss
Sabine
[TABLE='width: 500']
[tr][td]Der HTML-Code lautet:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Titel</title>
<link href="styles/se_page.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="header_text">Ueberschrift</div>
<div id="slogan_shadow">
<div id="slogan">Unter-Ueberschrift</div>
</div>
</div>
<div id="content_wrapper">
<div id="content_block">
<div id="content">
<h3>Inhalt</h3>
</div>
<div id="side_bar">
<ul class="sidemenu">
<li><a href="#" class="active_sidemenu">Navigation</a></li>
<li><a href="#">Navigation</a></li>
<li><a href="#">Navigation</a></li>
<li><a href="#">Navigation</a></li>
<li><a href="#">NavigatioN</a></li>
</ul>
</div>
</div>
</div>
<div id="footer">
<p>Footertext</p>
</div>
</div>
</body>
</html>
CSS:
html, body {
height: 100%;
}
body {
margin:0;
padding:0;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: medium;
color: #333333;
}
/* Ueberschriften */
h1 {
font-size: 2em;
margin-top: .5em;
margin-bottom: 1em;
margin-left: 15px;
}
h2 {
font-size: 1.7em;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 15px;
}
h3 {
margin-top: 1em;
margin-bottom: 1em;
margin-left: 15px;
font-size: 1.5em;
text-decoration:normal;
}
h4 {
margin-top: 1em;
margin-bottom: 1em;
margin-left: 15px;
font-size: 1.5em;
text-decoration:normal;
}
/* Links */
a {
text-decoration:none;
font-variant:normal;
color: #996699;
margin:0;
padding:0;
}
a:hover {
color: #ffcccc;
text-decoration: underline;
}
/* Paragrapheneinstellung */
p {
margin:0;
padding:0;
}
/* Listeneinstellung */
ul {
list-style-type: disc;
list-style-image: url(../images/bullet.png;
}
ol {
list-style-type:decimal-leading-zero;
}
li {
line-height: 1em;
}
/* Wrapper ganzer Content*/
* html #wrapper {
height: 100%;
}
#wrapper {
margin: 0 auto;
position: relative;
min-hight:100%;
height:auto !important;
}
/* Header */
#header {
background-attachment: scroll;
background-image: url(../images/gesichter.jpg);
background-repeat: no-repeat;
background-position: center right;
min-height: 139px;
height: 139px;
}
#header_text {
display: block;
font-size: 3em;
font-variant: normal;
color: #333333;
padding-top: .6em;
margin-left: 25px;
}
#header #slogan_shadow {
font-size:1.3em;
color: #FFFFFF;
margin-top:0;
clear:both;
margin-left:25px;
line-height:1em;
}
#header #slogan {
color: #666666;
position: relative;
top: -20px;
left: 1px;
}
/* Content Wrapper */
#content_wrapper {
clear:both;
float:left;
background-color: #e9e3de;
min-width: 100%;
border-top-width: 5px;
border-top-style: solid;
border-top-color: #666666;
height: 100%;
}
/* Enstellung Content 800 pixel */
#content_block {
width: 800px;
margin: 0 auto;
position:relative;
}
/* Side bar */
#side_bar {
float: left;
width: 190px;
margin-top: 50px;
}
/* content div stil*/
#content {
margin-left:10px;
float:right;
width:590px;
}
/* Stile Sidemenue navigation */
.sidemenu {
margin:0;
margin-bottom:1em;
margin-top:1.5em;
padding:0;
list-style-type: none;
list-style-image:none;
}
.sidemenu a {
width: 180px;
display: block;
line-height: 1.6em;
font-size: 1.1em;
text-transform:uppercase;
padding-left:10px;
background-color: #e9e3de;
border-bottom-color: #CCCCCC;
border-bottom-style: solid;
border-bottom-width: 1px;
color: #666666;
}
#side_bar .sidemenu a:hover {
text-decoration:none;
background-color: #F0E3DA;
border-right-width: 3px;
border-right-style: solid;
border-right-color: #996699;
border-bottom-color: #CCCCCC;
border-bottom-style: solid;
border-bottom-width: 1px;
color: #996699;
}
#side_bar .active_sidemenu {
border-right-width: 3px;
border-right-style: solid;
border-right-color: #996699;
border-bottom-color: #996699;
border-bottom-style: solid;
border-bottom-width: 1px;
}
/* Stile fuer content paragraphs */
#content p {
text-align:justify;
line-height:1.3em;
margin-bottom: 1em;
padding-left: 10px;
padding-right: 10px;
}
#content li {
font-size:1.1em;
margin-left:25px;
color:#000;
list-style-type: circle;
}
/* Bildelemente rechts */
#rechts {
float:right;
width: 260px;
height: 130px;
margin-left: 10px;
margin-right: 10px;
}
/* Footer */
#footer {
position: fixed;
padding: 10px;
bottom: 0;
left: 0;
right: 0;
background-color: #666666;
color: #e9e3de;
text-align:center;
font-size:.-2em;
font-variant:normal;
}
#footer a:hover {
color: #F0E3DA;
text-decoration:none;
}
[/TABLE]
hatte auch mal das problem mit der richtigen darstellung , ein einfaches neuladen hatte nichts gebracht, ich musste dazu den browser schliessen und die seite ganz neu aufrufen, erst danach wurde mir das ergebniss richtig dargestellt