Seite 2 von 2 Erste 12
  1. #11

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

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

    Ich hab es glaub ich verstanden...

    Habe mal etwas an Edit fiddle - JSFiddle gefummelt. Javascript und offsetHeight müsste hier Abhilfe schaffen.
    HTML-Code:
    <script type="text/javascript"> // ganz primitiv.
        window.onload = function()
        {
            random = getRandomInt(40, 100);
            document.getElementById('header').style.height = random;
            height = document.getElementById('header').offsetHeight;
            document.getElementById('content').style.marginTop = height - 50;
            alert(message);
        }
        function getRandomInt(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
    </script>
    <style type="text/css">
    html, body {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    header {
        width: 100%;
        height: 60px;
        background: red;
        position: fixed;
        top: 0;
    }
    #content {
        width: 80%;
        margin: 0 auto;
        padding: 60px 0;
    }
    footer {
        width: 100%;
        height: 60px;
        background: red;
        position: fixed;
        bottom: 0;
    }
    </style>
    <header id="header"></header>
    <div id="content">
        <p>HELLO</p>
        <p>HELLO</p>
        <p>HELLO</p>
        <p>HELLO</p>
        <p>HELLO</p>
        <p>HELLO</p>
        <p>HELLO</p>
        <p>HELLOKITTY</p>
        <p>HELLO</p>
        <p>HELLO</p>
        <p>HELLO</p>
        <p>HELLO</p>
        <p>HELLO</p>
        <p>HELLO</p>
        <p>HELLO</p>
        <p>HELLO</p>
        <p>HELLODOLLY</p>
        <p>HELLO</p>
        <p>HELLO</p>
        <p>HELLO</p>
        <p>HELLO</p>
        <p>HELLO</p>
        <p>HELLO</p>
        <p>HELLO</p>
        <p>HELLO</p>
        <p>HELLO</p>
        <p>HELLOWEEN</p>
    </div>
    <footer></footer>
    Geändert von Integer (22.11.2014 um 23:14 Uhr)

  2. #12
    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

    Offtopic: Wenn du das JSFiddle erneut speicherst bekommst du eine neue URL, was du verlinkt hast hat nur die 60px gehardcodet.

    @Topic: In meinem ersten Post zeige ich eine JavaScript-freie Lösung, die ich aus genannten Gründen vorziehen würde.
    Die braucht halt leider ein paar HTML-Elemente, die nur zum stylen da sind, was natürlich etwas unschön ist.

Seite 2 von 2 Erste 12

Ä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.