webentwicklung-frage-antwort-db.com.de

Div mit Bildlaufleiste innerhalb von Div mit Position: behoben

Ich habe ein div mit Position: behoben, das ist mein Container div für einige Menüs. Ich habe es auf top: 0px, bottom: 0px gesetzt, um den Viewport immer auszufüllen. In diesem div möchte ich zwei weitere divs haben, von denen das untere viele Zeilen enthält und überlauf hat: auto. Ich würde erwarten, dass es im Container div enthalten wäre, aber wenn es zu viele Zeilen gibt, dehnt es sich einfach außerhalb des festen div aus. Hier ist mein Code und ein Screenshot zur Verdeutlichung:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>MyPlan</title>
    <meta name="X-UA-COMPATIBLE" value="IE=8" />
    <style type="text/css">
        #outerfixed { position:fixed;  width:200px;  background-color:blue; padding:5px; top:0px; bottom:30px;}
        #innerstatic1 { width:100%; background-color:yellow; height:100px;}
        #innerstatic2 { overflow:auto; background-color:red; width:100%;}
    </style>
</head>
<body>
    <div id="outerfixed">
        <h3>OUTERFIXED</h3>
        <div id="innerstatic1">
            <h3>INNERSTATIC1</h3>
        </div>
        <div id="innerstatic2">
            <h3>INNERSTATIC2</h3>
            line<br />
                        ...lots of lines
            line<br />
        </div>
    </div>
</body>
</html>

alt text

Gibt es eine Möglichkeit für mich, dies zu tun? Ich möchte auch, dass # innerstatic2 korrekt in #outerfixed enthalten ist und Scrollbalken erhalten, wenn der Platz größer wird als in #outerfixed.

Ich weiß, dass es einige Möglichkeiten gibt, dies zu umgehen, indem auch # innerstatic2 korrigiert wird, aber ich möchte, dass es innerhalb des Flusses in #outerfixed ist, wenn dies möglich ist. Wenn ich also #outerfixed bewege, würde das innere Element damit einhergehen.

BEARBEITEN: Ich weiß, dass ich Überlauf einstellen kann: auto auf dem #outerfixed und eine Bildlaufleiste für das Ganze, aber ich möchte speziell eine Bildlaufleiste nur auf # innerstatic2, es ist ein Gitter und ich möchte nur das Gitter scrollen.

Jemand? Möglich?

csscss-position
37
Einar Egilsson

Dafür gibt es eine zweistufige Lösung, die jedoch etwas kostet:

  1. Fügen Sie overflow-y: scroll; zur css für #innerstatic2 hinzu.
  2. definieren Sie eine height (oder max-height) für #innerstatic2, andernfalls wird es wird nicht überlaufen. Die Höhe wird immer weiter erhöht (der Standardwert für div ist height: auto).

Bearbeitete, weil ich mich manchmal einfach nicht aufhalten kann.

Ich habe eine Demo auf jsbin gepostet, um eine jQuery-Implementierung davon zu zeigen, die eine height für Sie berechnet (es ist nicht verallgemeinert, daher funktioniert es nur mit Ihrer aktuellen HTML-Datei).

(function($) {
  $.fn.innerstaticHeight = function() {
        var heightOfOuterfixed = $('#outerfixed').height(),
        offset = $('#innerstatic2').offset(),
        topOfInnerstatic2 = offset.top,
        potentialHeight = heightOfOuterfixed - topOfInnerstatic2;

        $('#innerstatic2').css('height',potentialHeight);
  }
})(jQuery);

$(document).ready(
    function() {
        $('#innerstatic2').innerstaticHeight();
    }
);
36
David Thomas

Ich habe es gelöst, indem ich der ul und Höhe 100% absolute Position gegeben

ul {
  overflow-y: scroll;
  position: absolute;
  height: 100%;
}

schau dir diese FIDDLE an

16
Ofir D

overflow-y:scroll;

Und fügen Sie dies für iOS-Geräte hinzu. Mit Touch wird ein besserer Bildlauf erzielt. Der Überlauf-y muss scroll sein! aus sicheren gründen. Auto funktioniert nicht für einige Leute. oder zumindest habe ich gehört.

-webkit-overflow-scrolling: touch;

4
Dyrehauge

sie sollten die Höhe für äußere Fixierung und die maximale Höhe für innerstatic2 einstellen

sehen Sie das könnte hilfreich sein DEMO

2
Afshin

Nicht ideal, aber das sollte Ihnen 90% davon bringen

<div style="position:fixed; bottom:1px; left:5em; height: 20em; width:20em; background-color:blue;">
        <div style ="width:15em; background-color: green;">
                Title
        </div>
        <div style ="background-color:yellow; max-height:80%; width:15em; overflow:auto;">
                <div style="height:100em; background-color:red; width:10em;">
                        scroll<br/>
                        scroll<br/>
                        scroll<br/>
                </div>  
        </div>  
</div>
1
SooDesuNe

Der Container div muss sich mit dem Attribut overflow: auto befinden. In diesem Fall ist das #outerfixed div

1
Alejandro Martin

Die einzige Möglichkeit, die ich darstelle, besteht darin, innerstatic2 auf die absolute Position zu setzen (damit Sie es mithilfe von oben und unten in Bezug auf outerfixed bestimmen können), und dann innen innerstatic2 ein anderes div erstellen Geben Sie Ihren Text ein. Dann geben Sie innerstatic2 den "overflow: auto;" Indikation. Der Nachteil dieser Methode ist, dass innerstatic2 sich nicht nach unten bewegt, wenn innerstatic1 wächst, da es absolut positioniert werden muss. Wenn es sich bewegen muss, muss es "position: relative" sein, aber dann müssen Sie eine feste Höhe festlegen. So oder so müssen Sie sich mit einem Kompromiss zufrieden geben.

Sobald alle Browser die neueren CSS3-Funktionen wie die Berechnungsunterstützung unterstützen, gibt es bessere Optionen, um dies ohne diese Nachteile zu tun.

1
Eric J. Francois