Absolut positionierte Elemente vom Bildschirm, wenn gefüllt

Ich habe einen DIV-container .floatingPage, die absolut positioniert über zwei weitere DIV-Container .top und .bottom. Mein problem ist, dass der Inhalt der .floatingPage element sind dynamische und manchmal enthalten eine Menge von Daten, die sich .floatingPage unter dem sichtbaren Teil des Bildschirms.

CSS:

.top { 
  height:350px; 
  background:'images/background.png'; 
  position:relative; 
}

.bottom { 
  height:350px; 
  background:#F1F1F1; 
}

.floatingPage { 
  position:absolute; 
  top:50px; 
}

HTML:

<div class="top">
    <div class="floatingPage">
        //blah blah blah (lots of data)
    </div>
</div>

Nun, da ich weiß, dass meine app-Nutzer verwenden JS (Firma control panel), ich habe die Berechnung der Höhe der .floatingPage - element und die Verlängerung der Höhe von .bottom passend zu den neuen Inhalten. Dies wurde OK, bis jetzt und hat begonnen, die Probleme verursachen. Plus, ich don ' T wünschen zu tun, dass dieser hack auch für andere Projekte, welche die Benutzer ohne JS.

Ich brauche diese floatingPage element zu schweben über der Oberseite der beiden anderen - das ist der springende Punkt bei der Website-design. Wie kann ich diese beeinflussen aber verhindern, dass es ausgeführt wird aus der Seite ohne JS?

InformationsquelleAutor ShadowStorm | 2012-10-12
  1. 1

    Versuchen Sie dies:

    CSS:

    .top { 
  height:350px; 
  background:'images/background.png'; 
  position:relative; 
}

.bottom { 
  height:350px; 
  background:#F1F1F1; 
}

.floatingPage { 
  position:absolute; 
  top      : 50px; 
  bottom   : 50px;
  overflow : auto;
}

    HTML:

    <div class="top">
    <div class="floatingPage">
        //blah blah blah (lots of data)
    </div>
</div>

    • der trick für mich war, explizit die Angabe eines Werts für bottom - danke
    InformationsquelleAutor AlienWebguy
  2. 0

    Haben Sie versucht, die absolute Positionierung der Angabe der Unterseite, nicht oben für die .floatingPage element?

    zB:

    .floatingPage { position:absolute; bottom:10px; }
    InformationsquelleAutor blearn
  3. 0

    Wenn Sie brauchen, um das element zu schweben über der Oberseite der beiden anderen, versuchen Sie einen z-index und überlauf verwenden.

    hier ein jsfiddle: http://jsfiddle.net/k8w79/

    InformationsquelleAutor Scott Hillson
  4. -1

    Haben Sie versucht, mit dem overflow-Attribut festlegen und die Höhe des DIV?

    InformationsquelleAutor Bitco Software
Schreibe einen Kommentar