Hallo Zusammen,
ich habe folgendes Problem und komme einfach nicht weiter, ich möchte die Höhe des Contents meiner Webseite an den jeweiligen Monitor anpassen.
Jetzt ist es so das der Contetnt immer zu klein ist, also der auf der Mitte der Seite aufhört, stelle ich in der css datei "height:100%" ein, ist der content zu lang, so das man nach unten scrollen muss.
Ich würde gerne immer die richtige Größe einstellen können, egal für welchen Monitor.
Ich fachkundige Hilfe wäre ich begeistert
html:
HTML
<!doctype html>
<html lang="de">
<head>
<title>Website in HTML 5 als direktes Beispiel</title>
<link rel=stylesheet type="text/css" href="cssfrage.css"> </link>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<p> </p>
</header>
<nav>
<ul>
<li><a href="1.html">Startseite</a></li>
<li><a href="2.html">Landwirtschaft</a></li>
<li><a href="3.html">Hofladen</a></li>
<li><a href="4.html">Sozialarbeit</a></li>
<li><a href="5.html">Ausbildung</a></li>
<li><a href="6.html">Energie</a></li>
<li><a href="7.html">Aktuelles</a></li>
<li><a href="7.html">So finden Sie uns</a></li>
<li><a href="8.html">Kontakt</a></li>
<li><a href="9.html">Impressum</a></li>
</ul>
</nav>
<div id="container">
<p> Inhalt </p>
</div>
<footer>
<p> webdesign: Bastian Lehmann
</p>
</footer>
</body>
<html>
Alles anzeigen
CSS
body, html { height:100%; margin: auto; width: 1000px; max-width: 1500px; text-align:center; background-color:#8fa670; #fff2cc}
header { margin:0; background-image: url("Kühe.jpg"); background-repeat: no-repeat; background-size:1000px; height:332px; border-top: 1px solid #fff;}
ul{ list-style-type: none; margin: 0 auto; padding: 0; overflow: hidden;}li{ float: left;}a:link, a:visited { display: block; width: 11.10em; font-weight: bold; color: #FFFFFF; background-color: #487360; text-align: center; padding: 10px; text-decoration: none; text-transform: uppercase;}a:hover, a:active{ background-color: #de8d56;}#container { width: 100%; height:50%; background-color: white; position: relativ; margin-top:0; }
footer { width:100%; margin-top: -15px; position:realive; color:white; background-color:#487360;}