Div mit Bildlaufleiste innerhalb div mit Position: behoben

Ich habe ein Div mit Position: behoben, das ist mein Container div für einige Menüs. Ich habe es nach oben gesetzt: 0px, unten: 0px, um immer das Ansichtsfenster zu füllen. Innerhalb dieses div möchte ich 2 andere divs haben, von denen die untere viele Zeilen enthält und einen Überlauf hat: auto. Ich würde erwarten, dass es innerhalb des Container-Div enthalten wäre, aber wenn es zu viele Zeilen gibt, expandiert es einfach außerhalb des festen Divs. Unten ist mein Code und ein Screenshot zu klären:Div mit Bildlaufleiste innerhalb div mit Position: behoben

<!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 für mich eine Möglichkeit, dies zu tun? Auch hier möchte ich, dass # innerstatic2 korrekt in #outerfixed enthalten ist und Scrollbalken erhalten, wenn es größer wird als der Platz, den es innerhalb #outerfixed hat.

Ich weiß, es gibt einige Möglichkeiten, um dies zu hacken, indem auch # innerstatic2 behoben wird, aber ich würde es wirklich gerne innerhalb des Flusses innerhalb von #outerfixed, wenn möglich, so dass, wenn ich irgendwohin versetzt, das innere Element würde komm damit.

EDIT: Ich weiß, ich kann Überlauf: auto auf die #outerfixed und erhalten eine Bildlaufleiste auf das Ganze, aber ich möchte speziell eine Bildlaufleiste nur auf # innerstatic2, es ist ein Raster und ich möchte nur das Raster scrollen .

Jeder? Möglich?

Quelle

2010-10-01 Einar Egilsson

Es ist das Container-Div, das mit dem Überlauf: Auto-Attribut sein muss. In diesem Fall wird die #outerfixed div

Quelle

2010-10-01 07:00:08

Sorry, ich mehr klar gewesen sein sollte. Ich möchte ausdrücklich, dass die Bildlaufleiste nur auf dem # innerstatic2-Element ist. Es ist ein Raster und ich möchte nur das Raster, nicht den ganzen Container scrollen. –

Es gibt eine Zwei-Schritt-Lösung für diese, aber es kommt zu so etwas wie ein Kosten:

overflow-y: scroll; an die CSS für #innerstatic2 hinzufügen.
definieren eine height (oder max-height) für #innerstatic2 es sonst nicht Überlauf, wird es nur noch die Höhe halten zu erhöhen (die Standardeinstellung für eine div ist height: auto).

Herausgegeben, weil ich einfach nicht selbst stoppen, manchmal.

Ich habe eine Demo auf jsbin, um eine jQuery-Implementierung von diesem zu zeigen, die eine height für Sie berechnen wird (es ist nicht verallgemeinert, so wird es nur mit Ihrem aktuellen HTML funktionieren).

(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(); 
    } 
);

Quelle

2010-10-01 07:01:14

Danke für die Antwort. Eigentlich ist das genau das, was wir heute haben, berechnen Sie die richtige Höhe für # innerstatic2 und setzen Sie sie mit jquery. Aber das führt zu Problemen mit einer Drittanbieter-Komponente, die einige Größen falsch berechnet, wenn wir dies in Dokument bereit machen, deshalb wollte ich wirklich eine reine CSS-Lösung. –

Also, gibt es keine Möglichkeit, Scroll auf # innerstatic2 zu erzwingen, indem man die Höhe auf #outerfixed setzt? Von dem, was ich versucht habe, scheint es nicht, # innerstatic2 fließt nur nach draußen, wenn ich eine explizite Höhe auf #outerfixed, aber ist das, weil es Position ist: behoben? –

könnte es sein. Sie können auch 'overflow: hidden' zum css für' # outerfixed' hinzufügen, aber das sieht leider nicht besonders hübsch aus. –

Der einzige Weg, ich meine, ist innerstatic2 auf absolute Position zu setzen (so können Sie oben und unten auf Größe in sie verwenden Bezug auf outerfixed), dann innerhalb innerstatic2 ein anderes div schaffen, in dem Sie geben Ihren Text ein. Dann geben Sie innerstatic2 die "Überlauf: Auto;" Indikation. Der Nachteil dieser Methode, dass innerstatic2 sich nicht nach unten bewegt, wenn innerstatic1 wächst, da es absolut Position sein muss. Wenn es sich bewegen muss, muss es "Position: relativ" sein, aber dann müssen Sie eine feste Höhe dafür 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 Möglichkeiten, dies ohne diese Nachteile zu tun.

Quelle

2010-10-01 15:41:14

Nicht ideal, aber das sollte man 90% der sie Art und Weise für outerfixed und max-height

<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>

Quelle

2011-01-20 19:39:35 SooDesuNe

Sie sollten eingestellt Höhe für innerstatic2

sehen dies könnte hilfreich sein DEMO

Quelle

2012-09-24 06:29:06 Afshin

erhalten overflow-y:scroll;

Und fügen Sie dies für iOS-Geräte. Es gibt einen besseren Scroll mit Touch. Der Überlauf-y muss Scroll sein! aus sicheren Gründen. Auto wird nicht für einige Leute arbeiten. oder zumindest das, was ich gehört habe.

-webkit-overflow-scrolling: touch;

Quelle

2014-05-14 17:46:47 Dyrehauge

Ich löste es durch absolute Position in die ul geben und Höhe 100%

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

check out this FIDDLE

Quelle

2014-08-06 07:50:26

Diese Lösung verbirgt das untere Ende der "ul" (es zeigt nicht die letzte li-Instanz) – sjbuysse

danke, rettete mein Leben :) –

Div mit Bildlaufleiste innerhalb div mit Position: behoben

Antwort

Verwandte Themen