mediengestalter.info
Datenschutzerklärung
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter
Aktuelles Datum und Uhrzeit: Sa 20.04.2024 00:37 Benutzername: Passwort: Auto-Login

Thema: div auf 100% der pagegröße vom 07.09.2012


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> div auf 100% der pagegröße
Autor Nachricht
elduderino
Threadersteller

Dabei seit: 09.10.2011
Ort: Augsburg
Alter: 36
Geschlecht: Männlich
Verfasst Fr 07.09.2012 11:56
Titel

div auf 100% der pagegröße

 Antworten mit Zitat Zum Seitenanfang
Morgen,
baue gerade mein Portfolio neu...
ich kriegs einfach grad nich gebacken, folgendes:
Ich hab im Body ein BG image liegen und will über die ganze Seite ein div aufspannen in dem son raster PNG liegt, dass liegt dann quasi über dem body BG und sieht schick aus.
Das Problem: Ich bekomme das #raster div einfach nicht über die komplette Seitenhöhe, scrollt man nach unten sieht man das dass div genau die Page größe hat...

CSS
Code:

html{
     height: 100%;
    min-height: 100%;
}

body{
   background-image:url('../BG/broke2.jpg');
     background-repeat:no-repeat;
     background-position:center top;
     background-attachment:fixed;
    color: white;
       min-height: 100%;
     height: 100%;
}

#raster{
   width:100%;
   background-image:url(../BG/four.png);
   background-repeat:repeat;
   background-attachment: fixed;
height: 100%;
}


HTML
Code:

<body>
   <div id="raster"></div>
</body>


Ich hab schon tausend forenbeiträge gewälzt, es macht nie das was es soll.
  View user's profile Private Nachricht senden
xBe

Dabei seit: 04.06.2006
Ort: Mönchengladbach
Alter: 34
Geschlecht: Männlich
Verfasst Fr 07.09.2012 12:05
Titel

Antworten mit Zitat Zum Seitenanfang
Hatten wir hier schon ein paar mal, Stichwort: Ähnliche Themen *zwinker*

Ansonsten hier: da werden mehrere Lösungen beschrieben.

http://css-tricks.com/perfect-full-page-background-image/
  View user's profile Private Nachricht senden
Anzeige
Anzeige
elduderino
Threadersteller

Dabei seit: 09.10.2011
Ort: Augsburg
Alter: 36
Geschlecht: Männlich
Verfasst Fr 07.09.2012 13:44
Titel

Antworten mit Zitat Zum Seitenanfang
xBe hat geschrieben:

http://css-tricks.com/perfect-full-page-background-image/


Ein 100% background image is kein problem, ich will das sich das div bis an den unteren rand der Seite verlängert, also immer sichtbar ist auch wenn man runterscrollt.

Wenn mich die anderen lösungen hier weitergebracht hätten hätte ich keinen neuen Thread gestartet...
  View user's profile Private Nachricht senden
Karlarsch

Dabei seit: 05.02.2007
Ort: -
Alter: 58
Geschlecht: Männlich
Verfasst Fr 07.09.2012 13:58
Titel

Antworten mit Zitat Zum Seitenanfang
Im Prinzip muss du nur die Höhe der Seite ermitteln z.B. via jQuery
Code:
$(document).height();

Und diese Höhe dann zur rechten Zeit, sprich, wenn alle Inhalte geladen sind, deinem div zuweisen
Code:

$(window).load(function(){
  // do something
});


Gruß
Karl
  View user's profile Private Nachricht senden
elduderino
Threadersteller

Dabei seit: 09.10.2011
Ort: Augsburg
Alter: 36
Geschlecht: Männlich
Verfasst Fr 07.09.2012 14:14
Titel

Antworten mit Zitat Zum Seitenanfang
Danke für den jquery tipp, das war die lösung

Code:

$(function(){
        $('#raster').css({'height':($(document).height())});

        $(window).resize(function(){
        $('#raster').css({'height':($(document).height())});
        });


jetzt läufts, schade das man da so nen Umweg gehen muss
  View user's profile Private Nachricht senden
Karlarsch

Dabei seit: 05.02.2007
Ort: -
Alter: 58
Geschlecht: Männlich
Verfasst Fr 07.09.2012 14:29
Titel

Antworten mit Zitat Zum Seitenanfang
Ich hatte absichtlich auf $(window).load() und nicht auf $(document).ready() hingewiesen.
Wenn du den Unterschied verstehst, weißt du warum.

Gruß
Karl

Zuletzt bearbeitet von Karlarsch am Fr 07.09.2012 14:29, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
 
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.

Mediengestalter.info ist ein Projekt von Webformatik :: Forensoftware: phpBB