Automatische Höhenanpassung

  • 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:



    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;}
  • 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-d…ist-nicht-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

  • Ü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 ?

  • 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:



    Gruss


    MrMurphy

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!