-
22.11.2014, 23:13 #11
- Registriert seit
- 17.12.2011
- Beiträge
- 97
Thanked 37 Times in 27 PostsAW: 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)
-
23.11.2014, 00:34 #12
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.
Ä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.