|
|||
100% Mindesthöhe erreichen
Hallo zusammen,
ich hoffe ihr könnt mir helfen, so das der Viewport die gesamte Höhe einnimmt. Der Footer (sticky-footer) klebt schon unten: Folgender HTML-Code: Code:
<body id="top" class="win firefox gecko fx35"> <div id="wrapper"> <div id="container"> <div id="main"> <div class="inside"> </div> <aside id="left"> <div class="inside"> </aside> </div> <footer id="footer"> <div class="inside"> </footer> </div> <script> </body> </html> Code:
body, html { height:100%; margin:0; padding:0; } #wrapper:after, #container:after, #footer:after, #footer .inside:after { clear:both; display:block; content: ""; } #container { min-height:100%; position:relative; padding-bottom:3em; } #main { width:70%; min-height:100%; left:30%; background-color:#0091ff; } #left { width:30%; min-height:100%; left:-70%; background-color:#f00a0a; } #footer { width:100%; height:3em; bottom:0; position:absolute; } Geändert von seeadler (23.02.2015 um 19:10 Uhr) |
Sponsored Links |
|
|||
Hallo,
dein HTML-Quellcode ist leider Schrott. Da werden Container geöffnet aber nicht wieder geschlossen. Andere sind falsch ineinander verschachtelt. Du solltest erst mal den Quellcode überarbeiten und mit Inhalt füllen, damit wir als Außenstehende überhaupt etwas damit anfangen können. Und was soll passieren, wenn der Inhalt zu groß für das Fenster wird? Am besten wäre es, wenn du die Seite online bereitstellen könntest, zum Beispiel bei einem Freeware-Provider wie bplaced.net. Für uns Hilfwillige ist es nervig aus Quellcodeschnipseln Seiten zusammenzubasteln, die dann nicht mal funktionieren. Zudem müsste die Seite nur einmal erstellt werden und nicht von jedem einzeln, der dir helfen möchte. Gruss MrMurphy |
Sponsored Links |
|
|||
sorry. hier nochmal der ganze code
PHP-Code:
|
|
|||
Hallo,
mit deinem Quelltext ist leider einiges im argen. Da ist es einfacher die Seite komplett neu zu erstellen. Ich habe mal ein Beispiel mit aktuellem HTML5, CSS3 und Flexbox erstellt: HTML-Code:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt --> <title>HTML5 - 100% Mindesthöhe mit Sticky Footer</title> <meta name="description" content="HTML5 - 100% Mindesthöhe mit Sticky Footer"> <!-- Um alte IE HTML5-tauglich zu machen --> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> <![endif]--> <!-- Define a viewport to mobile devices to use - telling the browser to assume that the page is as wide as the device (width=device-width) and setting the initial page zoom level to be 1 (initial-scale=1.0) --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) --> <style> /* Hack für IE 8 */ @media \0screen { } /* Hack für IE 10 und IE 11 */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { html { height: 100%; } } @media all { /* Meine Standardvorgaben */ /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */ header, nav, main, aside, footer, section, article, figure, figcaption, audio, video { display: block; } * { -moz-box-sizing: border-box; box-sizing: border-box; } html { font-family: Verdana, sans-serif; font-size: 120%; /* Die Einheit rem greift auf die Angabe in html zurück, nicht auf body */ line-height: 1.3; /* line-height wird ohne Einheit angegeben */ } body { width: 100%; color: black; background-color: white; padding: 0; margin: 0 auto; } h1 { font-size: 30px; font-size: 1.6rem; margin: 9px 0; margin: 1rem 0; } p { font-size: 20px; font-size: 1.1rem; margin: 9px 0; margin: 1rem 0; } ol, ul { padding-left: 0; } li { font-size: 20px; font-size: 1.1rem; list-style-type: none; } } /* Ende meiner Standardvorgaben */ /* Ab hier folgen die seitenspezifischen Angaben */ @media all { body { height: 100%; min-height: 100vh; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } main { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; -ms-flex: 1 0 auto; /* Für alle IE, muss hinter "flex: 1;" stehen */ } footer { padding: 2%; background-color: #456188; color: white; } main { display: flex; } main nav { background-color: seashell; padding: 0.5rem; width: 30%; } main article { background-color: gainsboro; padding: 0.5rem; width: 70%; } } </style> </head> <body> <main role="main"> <nav> <h1>Navigation</h1> <ul> <li>Banane</li> <li>Mandarine</li> <li>Apfel</li> <li>Birne</li> <li>Himbeere</li> <li>Kirsche</li> </ul> </nav> <article> <h1>article</h1> <p>Lorem ipsum dolor sit amet consectetuer tincidunt hendrerit neque Aenean ac. Lacus pede nonummy a wisi facilisis enim lorem parturient wisi nascetur. Auctor et ultrices ligula sed interdum.</p> <p>Lorem ipsum dolor sit amet consectetuer tincidunt hendrerit neque Aenean ac. Lacus pede nonummy a wisi facilisis enim lorem parturient wisi nascetur. Auctor et ultrices ligula sed interdum.</p> </article> </main> <footer role="contentinfo"> <h1>Footer</h1> <p>Und noch etwas Footertext.</p> </footer> </body> </html> Gruss MrMurphy |
|
|||
Zitat:
Mit der flex-Methode spart man sich die Hintergrundgraphik und es wird die Zukunft sein, oder? |
|
|||
Hallo
Zitat:
Zitat:
Gruss MrMurphy |
|
|||
Zitat:
|
|
|||
hallo mrmurphy,
erstmal nochmals Danke für dein Beispiel. Ich habe das allerdings mal im Safari (Windows) ausprobiert und da ist es so, dass sowohl Flexbox als auch der Sticky-Footer mit dem Code komplett ingnoriert wird. Die einzelnen Bereiche (Navigation, main etc.) werden alle untereinander aufgelistet. Kannst du mir da noch einen Tipp geben, welche Hacks man da noch beachten bzw. einfügen sollte? hier die Seite: http://www.stars-training.de Geändert von seeadler (20.03.2015 um 16:09 Uhr) |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Mindesthöhe eines <div> einstellen | manuu | CSS | 1 | 11.08.2011 15:44 |
Mindesthöhe (min-height) funktioniert nicht, wie es sollte :/ | eas | CSS | 2 | 10.03.2011 20:51 |
Absolutes Div mit Mindesthöhe | the-indie | CSS | 4 | 22.09.2010 12:06 |
dynamische Höhe bei div + Mindesthöhe mit faux columns? | marven | CSS | 4 | 09.04.2008 22:46 |
Mindesthöhe für div im Internet Explorer | Philippp | CSS | 6 | 10.01.2005 16:09 |