Div z suwakiem wewnątrz div z pozycją: naprawiono

Mam div z pozycją: fixed, która jest moim div dla kontenera dla niektórych menu. Ustawiłem to na górze: 0px, dół: 0px, aby zawsze wypełniać rzutnię. Wewnątrz tego div chcę mieć 2 inne divy, z których dolna zawiera wiele linii i ma przepełnienie: auto. Spodziewam się, że będzie on zawarty w div kontenera, ale jeśli istnieje zbyt wiele linii, po prostu rozwija się poza ustalonym div. Poniżej jest mój kod i zrzut ekranu w celu wyjaśnienia:Div z suwakiem wewnątrz div z pozycją: naprawiono

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

Czy jest jakiś sposób dla mnie to zrobić? Jeszcze raz chcę, aby # innerstatic2 było poprawnie zawarte w #outerfixed i uzyskać paski przewijania, jeśli będzie on większy niż przestrzeń wewnątrz #outerfixed.

Wiem, że istnieje kilka możliwości, aby zhakować dookoła tego, również poprzez naprawianie # innerstatic2, ale naprawdę chciałbym, aby znajdował się w obrębie wewnątrz #outerfixed, jeśli to możliwe, więc jeśli przeniesię gdzieś #outerfixed, wewnętrzny element chodź z tym.

EDYCJA: Wiem, że mogę ustawić przepełnienie: auto na #outerfixed i dostaję pasek przewijania na całej rzeczy, ale ja w szczególności chcę pasek przewijania tylko na # innerstatic2, to jest siatka i chcę przewijać tylko siatkę .

Ktoś? Możliwy?

Źródło

2010-10-01 Einar Egilsson

Jest to div kontenera, który musi być z przepełnieniem: atrybut auto. W tym przypadku, w #outerfixed div

Źródło

2010-10-01 07:00:08

Niestety, powinny być bardziej wyraźne. Wyraźnie chcę, aby pasek przewijania był tylko w # element innerstatic2. Jest to siatka i chcę przewijać tylko siatkę, a nie cały kontener. –

Jest to rozwiązanie dwuetapowy za to, ale chodzi o coś w rodzaju kosztów:

Dodaj overflow-y: scroll; do css dla #innerstatic2.
zdefiniować height (lub max-height) dla #innerstatic2, w przeciwnym razie nie będzieprzepełnienie, to będzie po prostu zachować zwiększając jego wysokość (domyślne dla div jest height: auto).

Zmieniano, bo po prostu nie mogę się powstrzymać, czasami.

Opublikowałem demo na jsbin, aby pokazać implementację jQuery tego, która obliczy dla ciebie height (nie jest uogólniona, więc będzie działać tylko z twoim aktualnym html).

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

Źródło

2010-10-01 07:01:14

Dziękuję za odpowiedź. Właściwie jest to prawie tyle, ile mamy dzisiaj, obliczyć odpowiednią wysokość dla # innerstatic2 i ustawić przy pomocy jquery. Ale powoduje to problemy z komponentem strony trzeciej, który niepoprawnie oblicza niektóre rozmiary, gdy robimy z tym bałagan w przygotowanym dokumencie, dlatego tak naprawdę chciałem mieć czyste rozwiązanie CSS. –

Więc czy nie ma sposobu na wymuszenie przewijania w # innerstatic2 przez ustawienie wysokości na #outerfixed? Z tego, co próbowałem, wydaje się nie, # innerstatic2 po prostu wypływa na zewnątrz, jeśli ustawię jawną wysokość na #outerfixed, ale czy to dlatego, że jest to pozycja: naprawiona? –

Może być. Możesz również dodać 'overflow: hidden' do css dla' # outerfixed', ale to nie * wygląda * szczególnie ładnie, niestety. –

Jedynym sposobem I rysunek, jest ustawienie innerstatic2 do pozycji absolutnej (dzięki czemu można używać górny i dolny do wielkości niej w związku outerfixed), a następnie wewnątrz innerstatic2 utworzyć inny div gdzie wstawiasz swój tekst. Następnie dajesz innerstatic2 "przepełnienie: auto;" wskazanie. Wadą tej metody jest to, że innerstatic2 nie przesuwa się w dół, gdy innerstatic1 rośnie, ponieważ musi to być absolutna pozycja. Jeśli musi się przesunąć, musi to być "position: relative", ale musisz ustawić dla niego stałą wysokość. Tak więc, tak czy inaczej, musisz zadowolić się kompromisem.

Gdy wszystkie przeglądarki obsługują nowsze funkcje CSS3, takie jak obsługa obliczeń, pojawią się lepsze opcje, bez tych wad.

Źródło

2010-10-01 15:41:14

Nie idealne, ale to powinno Ci 90% od ich sposób

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

Źródło

2011-01-20 19:39:35 SooDesuNe

należy ustawić wysokość dla outerfixed i max-height dla innerstatic2

zobaczyć, że to może być pomocne DEMO

Źródło

2012-09-24 06:29:06 Afshin

overflow-y:scroll;

I dodać to na urządzenia z systemem iOS. Zapewnia lepsze przewijanie za pomocą dotyku. Przepełnienie-y musi być przewijane! z bezpiecznych powodów. auto nie działa dla niektórych osób. lub przynajmniej to, co słyszałem.

-webkit-overflow-scrolling: touch;

Źródło

2014-05-14 17:46:47 Dyrehauge

że rozwiązany dając bezwzględnego położenia na ul i wysokości 100%

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

check out this FIDDLE

Źródło

2014-08-06 07:50:26

To rozwiązanie ukrywa dolny koniec 'ul' (nie pokazuje ostatniej instancji' li') – sjbuysse

dzięki, uratował mi życie :) –

Div z suwakiem wewnątrz div z pozycją: naprawiono

Odpowiedz

Powiązane problemy