Dieter (16.11.2014), xOneDirectionx (16.11.2014)
-
13.11.2014, 00:58 #1
- Registriert seit
- 18.03.2013
- Beiträge
- 481
Thanked 264 Times in 168 PostsWebsite-Content mit Höhe des Browsers
Hallo
Ich habe zur Zeit ein Problem, welches ich nicht wirklich lösen kann. Deshalb suche ich hier nun Hilfe.
Ich habe eine Seite, die einen Body von heigt: 100%; hat. Dort wird am Anfang etwas reingeladen und am Ende. Im Grunde also ein Seitenkopf und ein Seitenfuß. Die Höhe dieser ist dynamisch, die div-Container haben somit keine feste Höhe im CSS gesetzt.
Nun möchte ich alles, was sich dazwischen befindet, für den Hauptinhalt der Seite nutzen. Hier weiß ich jetzt nicht, wie ich das verwirklichen kann. Der Div des Inhalts kann ich keine Höhe von 100 Prozent setzen, da sich diese ja auf das übergeordnete Element bezieht, welches in meinem Fall <body> ist.
Versteht ihr meine Problematik? Ich habe im Internet nur Beispiele gefunden, welche mit fest gesetzter Höhe des Kopfes und des Fußes funktionieren. Darauf möchte ich aber möglichst verzichten.
Wäre geil, wenn ihr eine Antwort hättet.
-
15.11.2014, 04:05 #2
AW: Website-Content mit Höhe des Browsers
Ich würde einfach gucken wie Hoch das Fenster ist und davon die Breite von Header/Footer abziehen:
$("#content").height($(window).height() - $("#header").height() - $("#footer").height());
Wüsste nicht wie man das anders machen kann.
Aber wenn jemand eine bessere Idee hat nur her damit
-
15.11.2014, 18:57 #3
AW: Website-Content mit Höhe des Browsers
Zur Formatierung auf JavaScript zurückzugreifen würde ich nur als letzte Maßnahme empfehlen, das kann zu leicht schief gehen (Javascript deaktiviert, funktioniert beim resize oder einem Orientierungswechsel auf Smartphones nicht richtig...)
Die beste Möglichkeit, die mir bisher über den Weg gelaufen ist, ist, das mit CSS-Tabellenformatierung zu gestalten:
Dazu musst du zunächst einen Alles-Div anlegen, der den gesamten body füllt und als display-property: table besitzt.
Dieses Div muss nun deine 3 Streifen beinhalten: deinen Header, deinen Inhalt und deinen Footer (z.B. auch als divs oder mit den HTML5 Header & Footer tags)
Bei allen 3 setzt du die display-property auf table-row, beim Inhalt fügst du noch ein height: 100% ein (bei Tabellenformatierung werden zuerst die Größen der Elemente, die eine feste Größe haben, berücksichtigt [hier Header und Footer, da sich deren Größe aus dem Inhalt ergibt] und danach der verbleibende Platz auf relative Elemente verlteilt).
Wenn ich dich richtig verstehe, ist damit leider noch nicht alles getan: Wenn dein Inhalt größer ist, als er Platz hat, dann schiebt er mit der aktuellen Lösung den Header nach unten, d.h. der Nutzer müsste erst runterscrollen, um die Fußzeile zu sehen.
Wenn du möchtest, dass nur der Inhalt scrollt und Kopf- und Fußzeile immer zu sehen sind, musst du dem mittleren Streifen (also dem Element, das auch height: 100%; hat) position: relative; einfügen. Das sorgt dafür, dass sich alle Elemente mit position: absolute, die Kinder des "relativen" Elemtents sind, auf dieses beziehen anstatt auf den gesamten body. Das nutzt du, um im Content-Streifen ein Div mit position: absolute; width: 100%; height: 100%; overflow: scroll; einzufügen. Dieses div nimmt nun die Größe des mittleren Streifens an und scrollt (wenn nötig) die Inhalte.
Der CSS-Teil sieht also so aus:
.bigcontainer {
display: table;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.topstripe {
display: table-row;
}
.centerstripe {
display: table-row;
height:100%;
position: relative;
}
.centerstripe>div{
position: absolute;
overflow: scroll;
width: 100%;
height: 100%;
}
.bottomstripe {
display: table-row;
}
Und weil sich das in Prosatext nur schwer nachvollziehen lässt, habe ich dir ein Fiddle gebaut:
Edit fiddle - JSFiddle
Mit freundlichen Grüßen
rhmbrwwuavot
PS:
1. Achte bitte darauf, dass das position: absolute nicht beim Drucken hinzugefügt wird (per CSS-Mediatyp screen), damit das ganze auch ausdruckbar bleibt, indem sich die Fußzeile nach unten schiebt.
2. Ausserdem solltest du die HTML5-Tags nicht blind wie im Fiddle verwenden: header sollte die Hauptnavigation beinhalten; falls das bei dir nicht der Fall ist, nimm ein div. Gleiches gilt für section und footer, im Fiddle ist das so gewachsen - falls die Tags nicht das beinhalten, wofür sie da sind, dann nutze divs.Geändert von Leuchtturmwärter (15.11.2014 um 19:10 Uhr)
-
The Following 2 Users Say Thank You to Leuchtturmwärter For This Useful Post:
-
16.11.2014, 01:36 #4
- Registriert seit
- 26.10.2011
- Beiträge
- 1.196
- Blog Entries
- 2
Thanked 1.596 Times in 725 PostsAW: Website-Content mit Höhe des Browsers
Oder die CSS3-Eigenschaften der Flexbox nutzen. Leider nur in moderneren Browser unterstützt. -> caniuse.com
-
18.11.2014, 20:04 #5
- Registriert seit
- 17.12.2011
- Beiträge
- 97
Thanked 37 Times in 27 PostsAW: Website-Content mit Höhe des Browsers
Die Höhe dieser ist dynamisch, die div-Container haben somit keine feste Höhe im CSS gesetzt.
Mit freundlichen Grüßen IntegerGeändert von Integer (18.11.2014 um 20:46 Uhr)
-
19.11.2014, 09:19 #6
AW: Website-Content mit Höhe des Browsers
Ich hätte das auch mit position absolut gelöst. Es würde glaube ich helfen, wenn du dein bisherigen Versuch mal posten würdest, alternativ ne Skizze wie das aussehen soll.
- But shit, it was 99 cents! -
-
19.11.2014, 11:33 #7
- Registriert seit
- 26.10.2011
- Beiträge
- 1.196
- Blog Entries
- 2
Thanked 1.596 Times in 725 PostsAW: Website-Content mit Höhe des Browsers
Oder mit calc()
Guckst du: CodePenGeändert von patlux (19.11.2014 um 11:33 Uhr)
-
19.11.2014, 20:16 #8
AW: Website-Content mit Höhe des Browsers
@Integer:
Dann verschwindet allerdings ein Teil des Contents hinter dem Header, wenn man ihn nicht in einen eigenen Div mit fester Position einfügt; diese feste Position ist aber zur Entwicklungszeit nicht bekannt und kann auch nicht leicht per CSS ermittelt werden (siehe unten)
@Patlux:
Du vergisst einen wichtigen Punkt:
Die Höhe dieser ist dynamisch, die div-Container haben somit keine feste Höhe im CSS gesetzt.
Man bräuchte dafür also sowas wie
.Mitte {
und das geht so nicht [zumindest nicht mit dem, was ich bisher in CSS gesehen habe]
Top: #UnterkanteHeader;
Bottom: #Oberkante Footer;
}Geändert von Leuchtturmwärter (19.11.2014 um 20:20 Uhr)
-
The Following User Says Thank You to Leuchtturmwärter For This Useful Post:
patlux (19.11.2014)
-
22.11.2014, 22:11 #9
- Registriert seit
- 17.12.2011
- Beiträge
- 97
Thanked 37 Times in 27 PostsAW: Website-Content mit Höhe des Browsers
Dann positionierst du entweder den Content um die Höhe des Headers: margin-top: XXpx; oder nutzt position: relative.
Vernünftig gecodet, dürfte es keine Schwierigkeiten geben. :-)
Edit:
HTML-Code:<script type="text/javascript"> // Testzweck window.onload = function() { height = getRandomInt(40, 100); document.getElementById('header').style.height = height; } function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } </script> <style type="text/css"> html, body { margin: 0; padding: 0; } header { background: #000; width: 100%; position: relative; } </style> <header id="header"> </header> <section> test </section>
Geändert von Integer (22.11.2014 um 22:24 Uhr)
-
22.11.2014, 22:25 #10
AW: Website-Content mit Höhe des Browsers
Dafür müsste man XX zur Entwicklungszeit kennen, was nicht der Fall ist (wie bereits erwähnt).
Aus CSS position:
relative The element is positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position
Und wie soll das helfen? Auch hier müsste man sich auf eine bestimmte Höhe des Headers festlegen.
Ähnliche Themen
-
Browsers...
Von JessePinkman im Forum Der Witz-Komm-Raus BereichAntworten: 2Letzter Beitrag: 26.06.2013, 13:00 -
Linie übertreten: Rekordsprung aus 39 Kilometern Höhe ungültig
Von Comu im Forum Der Witz-Komm-Raus BereichAntworten: 8Letzter Beitrag: 17.10.2012, 07:55 -
Bug - Hidden Content
Von Snees im Forum SupportAntworten: 2Letzter Beitrag: 11.10.2012, 18:58
Diese Seite nutzt Cookies, um das Nutzererlebnis zu verbessern. Klicken Sie hier, um das Cookie-Tracking zu deaktivieren.