Ergebnis 1 bis 11 von 11
  1. #1
    befubo ist offline Jungspund
    registriert
    21-09-2013
    Beiträge
    13

    <div> bis ans Seitenende mit JS dynamisch ziehen

    Halli Hallo liebe jswelt-Community

    Ich sage zum ersten Mal hallo hier, also. HALLO!
    Ein kleines Problem auf meiner neuen Seite:

    Bitte schaut euch mal folgende Seite an:
    Diamond Dog

    Wie ihr seht, habe ich ein div namens ".page_main", welches als Streifen von oben bis ans untere Seitenende gehen soll.
    Darin befindet sich der container ".page_content", welcher der Inhalt, in diesem Falle die verschiedenen Angebote, enthält.
    Wenn kein Link aufgeklappt ist, sieht es wunderbar aus. Jetzt kann man aber die verschiedenen Angebote ausklappen.
    Dafür habe ich folgenden Code verwendet:

    Code:
    <a href="javascript:toggle('id1')">Waschen</a>
    <br /><div id="id1" style="display: none">Die individuell für die verschiedenen Haut- und Felltypten ausgewählten Shampoos garantieren ein optimales Schlussergebnis.<br><br></div>
    
    <a href="javascript:toggle('id2')">Kämmen / Bürsten</a>
    <br /><div id="id2" style="display: none">Durch kämmen und bürsten des Tieres wird die Unterwolle entfernt. Dies ermöglicht es der Haut, besser durch das Fell zu atmen.<br><br></div>
    
    etc...
    Jetzt ist das Problem, dass sich zwar der ".page_content" schön an den Inhalt anpasst, der ".page_main" aber an der Stelle bleibt, an der das vorherige Seitenende war.
    Ist es jetzt möglich, mit JS dieses immer auf 100% höhe zu strecken? Denn CSS merkt natürlich nicht, dass ich mit JS den Content verlängert habe und passt sich dementsprechend auch nicht ans neue Seitenende an...

    Hier noch der CSS Code von den Containern:

    Code:
    .page_main{
    position: absolute;
    width: 1000px;
    height: 100%;
    bottom: 0px;
    background-color: #9c9cde;
    left: 50%;
    top: 360px;
    margin-left: -500px;
    }
    Code:
    .page_content{
    position: absolute;
    width: 750px;
    height: auto;
    background-color: #7b7bd2;
    left: 50%;
    top: 100px;
    margin-left: -395px;
    padding: 20px;
    color: #27276d;
    border-right: solid 2px #6869cd;
    border-bottom: solid 2px #6869cd;
    }

    Könnt ihr mir da mal auf die Sprünge helfen?
    Vielen Dank und freundliche Grüsse aus der Schweiz

    befubo
    Geändert von befubo (23-09-2013 um 15:30 Uhr)

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.732

    AW: <div> bis ans Seitenende mit JS dynamisch ziehen

    Dafür braucht man kein JS, sondern exakt für sowas ist CSS gedacht.

    Du darfst einfach nicht alle deine Elemente über position: absolute; positionieren. Dann kann sich das äußere <div> auch an die Höhe des inneren anpassen.

    Dein Problem existiert übrigens nicht nur, wenn du was ausklappst, sondern auch schon, wenn ein Besucher einfach ein etwas kleineres Browserfenster hast...

  3. #3
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.752

    AW: <div> bis ans Seitenende mit JS dynamisch ziehen

    Verschoben.

  4. #4
    befubo ist offline Jungspund
    registriert
    21-09-2013
    Beiträge
    13

    AW: <div> bis ans Seitenende mit JS dynamisch ziehen

    Hi kkapsner

    Hm, das Problem ist, dass ich bald alle Variantionen von height, position, display und overflow durchhabe und ich einfach ein Blackout habe.
    Ich krieg's einfach nicht hin, dass sich das *** .page_main immer bis nach unten zieht, wenn sich der Inhalt verlängert... Vor allem finde ich es merkwürdig, dass es beim .page_content mit dem Text geht, aber beim .page_main es einfach nicht funktioniert...

  5. #5
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.732

    AW: <div> bis ans Seitenende mit JS dynamisch ziehen

    Bei den beiden <div>s, um die es geht, musst du weder height noch position noch display noch overflow angeben. Per margin: 0 auto; bekommst du sie mittig und mit geeigneten padding-Werten bekommst du die Abstände richtig hin.

    Damit die <div>s dann auch vertikal an der richtigen Stelle sind, dürfen die <div>s drüber natürlich auch kein position: absolute; haben - was sie aber genausowenig brauchen...

  6. #6
    befubo ist offline Jungspund
    registriert
    21-09-2013
    Beiträge
    13

    AW: <div> bis ans Seitenende mit JS dynamisch ziehen

    Also, ich hab jetzt mal bei allen containern (ausser bei .l und .r) die position: absolute; rausgenommen.
    Es funktioniert jetzt super, dass sich auch der .page_main beim ändern des .page_content verlängert.
    Dafür danke ich schonmal recht herzlich.

    Jetzt ist aber das Problem, dass der .page_main wieder nicht bis ans untere Seitenende gezogen wird...
    Hier nochmals der Zwischenstand:
    Diamond Dog

    Jetzt kann ich ja nicht mehr mit height: 100% arbeiten...
    Wie kann ich jetzt den Container trotzdem bis ans untere Seitenende ziehen?

    Vielen Dank und liebe Grüsse
    befubo
    Geändert von befubo (23-09-2013 um 15:30 Uhr)

  7. #7
    j-l-n Guest

    Lightbulb AW: <div> bis ans Seitenende mit JS dynamisch ziehen

    Zitat Zitat von befubo Beitrag anzeigen
    Also, ich hab jetzt mal bei allen containern (ausser bei .l und .r) die position: absolute; rausgenommen.
    Es funktioniert jetzt super, dass sich auch der .page_main beim ändern des .page_content verlängert.
    Dafür danke ich schonmal recht herzlich.

    Jetzt ist aber das Problem, dass der .page_main wieder nicht bis ans untere Seitenende gezogen wird...
    Hier nochmals der Zwischenstand:
    Diamond Dog

    Jetzt kann ich ja nicht mehr mit height: 100% arbeiten...
    Wie kann ich jetzt den Container trotzdem bis ans untere Seitenende ziehen?

    Vielen Dank und liebe Grüsse
    befubo
    Irgendwie erwarte ich bei der Seite andauernd, noch weiter runterscrollen zu können... Weiß auch nicht, woran das liegt

  8. #8
    befubo ist offline Jungspund
    registriert
    21-09-2013
    Beiträge
    13

    AW: <div> bis ans Seitenende mit JS dynamisch ziehen

    Zitat Zitat von EG-net Beitrag anzeigen
    Irgendwie erwarte ich bei der Seite andauernd, noch weiter runterscrollen zu können... Weiß auch nicht, woran das liegt
    Wie kann ich das verstehen? xD War das jetzt Doppeldeutig oder ist das tatsächlich so? ^^

  9. #9
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.732

    AW: <div> bis ans Seitenende mit JS dynamisch ziehen

    Dir geht es um den lila Streifen, oder?

    Da gibt es mehrere Methoden. Eine wäre z.B. alle lila Teile durch ein einzelnes <div> zu realisieren, dass du dann wieder mit height: 100% versehen kannst.
    Eine andere wäre es, kein <div> lila zu machen, sondern dem <body> ein Hintergrundbild zu geben, das zentriert ist und einfach einen lila Streifen darstellt.

  10. #10
    befubo ist offline Jungspund
    registriert
    21-09-2013
    Beiträge
    13

    AW: <div> bis ans Seitenende mit JS dynamisch ziehen

    Doh!
    warum bin ich nicht auf die Idee mit dem BG gekommen -.-
    Danke! So klappts tip top

  11. #11
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.732

    AW: <div> bis ans Seitenende mit JS dynamisch ziehen

    Bitte - gern geschehen.

Ähnliche Themen

  1. CSS-Menü bis zum Seitenende
    Von CyberBoy96 im Forum CSS und (X)HTML
    Antworten: 1
    Letzter Beitrag: 01-09-2009, 01:13
  2. XMLHttpRequest wartet nicht auf Seitenende
    Von Cowboy74 im Forum JavaScript
    Antworten: 11
    Letzter Beitrag: 16-07-2008, 16:56
  3. Automatisches nachladen am Seitenende
    Von regen im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 21-08-2007, 08:29
  4. daten ziehen
    Von frogge im Forum Serverseitige Programmierung
    Antworten: 8
    Letzter Beitrag: 23-04-2002, 07:18
  5. seitenende springen
    Von hupfer im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 23-01-2002, 13:20

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •