Seite 1 von 2 12 Letzte
  1. #1

    Registriert seit
    18.03.2013
    Beiträge
    481
    Thanked 264 Times in 168 Posts

    Standard Website-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.



    [www.piratenpartei.de]
    "Krieg ist Frieden; Freiheit ist Sklaverei; Unwissenheit ist Stärke"

  2. #2
    Avatar von The Dope Show
    Registriert seit
    16.12.2013
    Beiträge
    111
    Thanked 193 Times in 24 Posts

    Standard 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

  3. #3
    Avatar von Leuchtturmwärter
    Registriert seit
    04.02.2013
    Beiträge
    61
    Thanked 46 Times in 29 Posts

    Standard 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)

  4. The Following 2 Users Say Thank You to Leuchtturmwärter For This Useful Post:

    Dieter (16.11.2014), xOneDirectionx (16.11.2014)

  5. #4
    Avatar von patlux
    Registriert seit
    26.10.2011
    Beiträge
    1.195
    Thanked 1.596 Times in 725 Posts
    Blog Entries
    2

    Standard AW: Website-Content mit Höhe des Browsers

    Oder die CSS3-Eigenschaften der Flexbox nutzen. Leider nur in moderneren Browser unterstützt. -> caniuse.com

  6. #5

    Registriert seit
    17.12.2011
    Beiträge
    97
    Thanked 37 Times in 27 Posts

    Standard AW: 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.
    Div oben und unten mit position absolute? Das erledigt doch das Problem. Ansonsten verstehe ich nicht wo es Schwierigkeiten gibt.

    Mit freundlichen Grüßen Integer
    Geändert von Integer (18.11.2014 um 20:46 Uhr)

  7. #6
    Avatar von qmiq
    Registriert seit
    10.01.2013
    Beiträge
    456
    Thanked 149 Times in 117 Posts

    Standard 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! -

  8. #7
    Avatar von patlux
    Registriert seit
    26.10.2011
    Beiträge
    1.195
    Thanked 1.596 Times in 725 Posts
    Blog Entries
    2

    Standard AW: Website-Content mit Höhe des Browsers

    Oder mit calc()

    Guckst du: CodePen
    Geändert von patlux (19.11.2014 um 11:33 Uhr)

  9. #8
    Avatar von Leuchtturmwärter
    Registriert seit
    04.02.2013
    Beiträge
    61
    Thanked 46 Times in 29 Posts

    Standard 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.
    Ohne die Höhe der Kopf-/Fußzeile zu kennen kann man den mittleren Teil nicht absolut positionieren.
    Man bräuchte dafür also sowas wie
    .Mitte {
    Top: #UnterkanteHeader;
    Bottom: #Oberkante Footer;
    }
    und das geht so nicht [zumindest nicht mit dem, was ich bisher in CSS gesehen habe]
    Geändert von Leuchtturmwärter (19.11.2014 um 20:20 Uhr)

  10. The Following User Says Thank You to Leuchtturmwärter For This Useful Post:

    patlux (19.11.2014)

  11. #9

    Registriert seit
    17.12.2011
    Beiträge
    97
    Thanked 37 Times in 27 Posts

    Standard AW: 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>
    Mit freundlichen Grüßen Integer
    Geändert von Integer (22.11.2014 um 22:24 Uhr)

  12. #10
    Avatar von Leuchtturmwärter
    Registriert seit
    04.02.2013
    Beiträge
    61
    Thanked 46 Times in 29 Posts

    Standard AW: Website-Content mit Höhe des Browsers

    Zitat Zitat von rhmbrwwuavot Beitrag anzeigen
    Ohne die Höhe der Kopf-/Fußzeile zu kennen kann man den mittleren Teil nicht absolut positionieren.
    Zitat Zitat von Integer Beitrag anzeigen
    Dann positionierst du entweder den Content um die Höhe des Headers: margin-top: XXpx;
    Dafür müsste man XX zur Entwicklungszeit kennen, was nicht der Fall ist (wie bereits erwähnt).

    Zitat Zitat von Integer Beitrag anzeigen
    oder nutzt position: relative.
    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.

Seite 1 von 2 12 Letzte

Ähnliche Themen

  1. Browsers...
    Von JessePinkman im Forum Der Witz-Komm-Raus Bereich
    Antworten: 2
    Letzter Beitrag: 26.06.2013, 13:00
  2. Linie übertreten: Rekordsprung aus 39 Kilometern Höhe ungültig
    Von Comu im Forum Der Witz-Komm-Raus Bereich
    Antworten: 8
    Letzter Beitrag: 17.10.2012, 07:55
  3. Bug - Hidden Content
    Von Snees im Forum Support
    Antworten: 2
    Letzter Beitrag: 11.10.2012, 18:58
Diese Seite nutzt Cookies, um das Nutzererlebnis zu verbessern. Klicken Sie hier, um das Cookie-Tracking zu deaktivieren.