Automatische Höhenanpassung

Pete

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;}

MrMurphy

Hallo

Zitat

Ich fachkundige Hilfe wäre ich begeistert

Glaube ich eher nicht.

Problem: Im Gegensatz zu Papierseiten (Bücher, Zeitungen, Plakate u.s.w.) haben Webseiten keine (sinnvoll) definierbaren Größen. Siehe

http://little-boxes.de/lb1/1-das-web-…aus-papier.html

http://little-boxes.de/lb1/1.1-papierdenken.html

und die folgenden Seiten.

Im Endeffekt wird eine Webseite so groß wie ihr Inhalt. Wenn der nicht ausreicht um das Fenster zu füllen hört die Seite eher auf. Ist der Inhalt größer muss gescrollt werden, möglichst nur nach unten bzw. zurück.

Wenn du trotzdem den Eindruck erwecken möchtest, dass nicht ausreichender Inhalt das gesamte Fenster füllt, kannst du nach "sticky footer" suchen.

Gruss

MrMurphy

Pete

Über*

Danke für die schnelle Antwort !

Der sticky footer ist kein Pronblem, allerdings hat der Inhalt einen anderen Hintergrund als der Body, deswegen ist zwar dann der footer sticky aber die Lücke zwischen Inhalt und footer immer noch ersichtlich (wenn nicht genug Inhalt vorhanden)

Habe ich dann nur die möglichkeit, die height entsprechend groß genug zu wählen, oder gibt es eine art height:auto - befehl ?

wolf

Du kannst eine min-height für html und body definieren

MrMurphy

Hallo,

du solltest für den header gar keine Höhe angeben sondern sie durch den Browser berechnen lassen.

Als Beispiel habe ich mal eine Seite mit aktuellem HTML / CSS erstellt und etwas Responsive Design eingebaut:

HTML

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Sticky Footer 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!--[if lt IE 9]>
      <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
   <![endif]-->
   <style>




   /*Meine persönlichen Grundeinstellungen für alle Seiten*/
   @import url(http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css);
   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-family: Sans-Serif;
         font-size: 120%; /*für die Einheit rem, mit der ich gerne arbeite*/
      }
      body {
         margin: 0;
      }
   }




   /*Meine persönlichen Grundeinstellungen für diese Seite*/
   @media all {
      header h2 {
         background-image: url(https://upload.wikimedia.org/wikipedia/commons/5/52/Panorama_Abu_Simbel.jpg);
         background-repeat: no-repeat;
         background-position: center center;
         /* Von den folgenden drei Möglichkeiten jeweils die gewünschte als letzte eintragen */
         background-size: 100% 100%; /* Vollbild, aber verzerrt */
         background-size: contain; /* komplettes Bild ohne Verzerrung, aber mit Rand */
         background-size: cover; /* beschnittenes Bild ohne Verzerrung */
         padding: 2rem 2rem 4rem 2rem;
         margin: 0;
      }
      a {
         text-decoration: none;
         outline: none;
      }
      body > * {
         width: 90%;
         padding: 0;
         margin: 0 auto;
      }
      main {
         padding: 0.5rem;
      }
      footer p {
         text-align: center;
      }
   }




   /*Farben, sofern sie zur Problemlösung nicht direkt erforderlich sind*/
   @media all {
      body,
      html {
         background-color: #8fa670;
      }
      header h2 {
         color: white;
      }
      main {
         color: black;
         background-color: white;
      }
      nav,
      footer {
         color: white;
         background-color: #487360;
      }
      nav a {
         color: white;
         text-decoration: none;
         text-transform: uppercase;
      }
      a:hover {
         color: white;
         background-color: #de8d56;
      }




   }




   /* ==================================================== */
   /* ***Ab hier beginnen die Angaben zur Problemlösung*** */




   /*Spezielle Einstellungen*/
   @media all {
   }




   /*Flexbox Sticky Footer*/
   /* Hack für IE 10 und IE 11 */
   @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
      html {
         height: 100%;
      }
   }
   @media all {
      body {
         height: 100%;   
         min-height: 100vh;
         display: flex;
         flex-direction: column;
      }
      main {
         flex: 1 1 auto;
      }
   }
   @media only screen and (max-width: 900px) {
      body > * {
         width: 100%;
      }
   }




   /*Flexbox nav*/
   @media all {
      nav {
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
      }
      nav a {
         white-space: nowrap;
         padding: 0.5rem;
      }
   }
   @media only screen and (max-width: 1650px) {
      nav > * {
         text-align: center;
         flex: 1 1 17%;
      }
   }
   @media only screen and (max-width: 900px) {
      nav > * {
         flex: 1 1 27%;
      }
   }
   @media only screen and (max-width: 650px) {
      nav > * {
         flex: 1 1 40%;
      }
   }




   /* ***       Ende der Angaben zur Problemlösung***       */
   /* ===================================================== */




   /* Vorlage zum Kopieren für Media Queries */
   @media only screen and (max-width: 0px) {
   }
   </style>
</head>
<body>
   <header>
      <h2>header</h2>
   </header>
   <nav>
      <a href="1.html">Startseite</a>
      <a href="2.html">Landwirtschaft</a>
      <a href="3.html">Hofladen</a>
      <a href="4.html">Sozialarbeit</a>
      <a href="5.html">Ausbildung</a>
      <a href="6.html">Energie</a>
      <a href="7.html">Aktuelles</a>
      <a href="7.html">So finden Sie uns</a>
      <a href="8.html">Kontakt</a>
      <a href="9.html">Impressum</a>
   </nav>
   <main>
      <h1>main</h1>
   </main>
   <footer>
      <p>webdesign: Bastian Lehmann</p>
   </footer>
</body>
</html>

Alles anzeigen

Gruss

MrMurphy

Jetzt mitmachen!