Div con barra di scorrimento all'interno div con posizione: fisso

Ho un div con posizione: risolto che è il mio contenitore div per alcuni menu. L'ho impostato all'inizio: 0px, in basso: 0px per riempire sempre il viewport. Dentro quel div voglio avere altri 2 div, il più basso dei quali contiene molte linee e ha overflow: auto. Mi aspetterei che sarebbe contenuto all'interno del contenitore div, ma se ci sono troppe righe si espande semplicemente al di fuori del div fisso. Di seguito è riportato il mio codice e uno screenshot per chiarire:Div con barra di scorrimento all'interno div con posizione: fisso

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

C'è un modo per me di fare questo? Ancora una volta, voglio che # innerstatic2 sia correttamente contenuto in #outerfixed e ottieni barre di scorrimento se diventa più grande dello spazio che ha dentro #outerfixed.

So che ci sono alcune possibilità di hackerare questo problema risolvendo anche # innerstatic2, ma mi piacerebbe molto che fosse all'interno del flusso all'interno di #outerfixed se possibile, in modo che se spostassi #outerfixed da qualche parte, l'elemento interno sarebbe vieni con esso.

EDIT: So che posso impostare overflow: auto sulla #outerfixed e ottenere una barra di scorrimento su tutta la cosa, ma in particolare voglio una barra di scorrimento proprio sulla # innerstatic2, è una griglia e voglio scorrere solo la griglia .

Chiunque? Possibile?

fonte

2010-10-01 Einar Egilsson

È il contenitore div che deve essere con l'overflow: attributo auto. In questo caso, il div #outerfixed

fonte

2010-10-01 07:00:08

Purtroppo ho dovuto essere più chiaro. Desidero esplicitamente che la barra di scorrimento si trovi solo sull'elemento # innerstatic2. È una griglia e voglio solo scorrere la griglia, non l'intero contenitore. –

C'è una soluzione a due fasi per questo, ma si tratta di qualcosa di un costo:

Aggiungere overflow-y: scroll; al CSS per #innerstatic2.
definiscono un height (o max-height) per #innerstatic2, altrimenti non sarà troppo pieno, sarà solo continuare ad aumentare la sua altezza (il valore predefinito per un div è height: auto).

Redatta perché non riesco proprio a trattenermi, a volte.

Ho pubblicato una demo su jsbin per mostrare un'implementazione jQuery di questo, che calcolerà uno height per te (non è generalizzato, quindi funzionerà solo con il tuo html corrente).

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

fonte

2010-10-01 07:01:14

Grazie per la risposta. In realtà questo è praticamente quello che abbiamo oggi, calcolare la giusta altezza per # innerstatic2 e impostare con jquery. Ma questo sta causando problemi con un componente di terze parti che calcola alcune dimensioni in modo non corretto quando facciamo confusione con questo in documento pronto, ecco perché volevo davvero una soluzione CSS pura. –

Quindi, non c'è un modo per forzare di scorrimento sul # innerstatic2 impostando l'altezza sul #outerfixed? Da quello che ho provato, non sembra, # innerstatic2 appena scorre fuori se ho impostato un'altezza esplicito su #outerfixed, ma è che perché è la posizione: fisso? –

Potrebbe essere. Puoi anche aggiungere 'overflow: hidden' al css per' # outerfixed', ma questo non * guarda * particolarmente carino, sfortunatamente. –

L'unico modo immagino, è impostare innerstatic2 alla posizione assoluta (in modo da poter utilizzare superiore ed inferiore alla dimensione in relazione alla outerfixed), poi dentro innerstatic2 crea un altro div dove inserisci il tuo testo. Poi dai a innerstatic2 "overflow: auto;" indicazione. Lo svantaggio di questo metodo, che l'innerstatale2 non si riduce, quando cresce l'innerstatale1, poiché deve essere assolutamente la posizione. Se ha bisogno di muoversi, deve essere "position: relative", ma poi devi impostare un'altezza fissa per esso. Quindi in entrambi i casi devi accontentarti di un compromesso.

Una volta che tutti i browser supportano le caratteristiche di CSS3 più recenti, come il supporto di calcolo, ci saranno opzioni migliori per fare questo, senza questi inconvenienti.

fonte

2010-10-01 15:41:14

Non è l'ideale, ma questo dovrebbe farti il 90% del loro modo

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

fonte

2011-01-20 19:39:35 SooDesuNe

è necessario impostare l'altezza per outerfixed e max-height per innerstatic2

vedere questo potrebbe essere utile DEMO

fonte

2012-09-24 06:29:06 Afshin

overflow-y:scroll;

E aggiungere questo per i dispositivi iOS. Dà una scroll migliore usando il touch. L'overflow-y deve essere scrollato! per ragioni di sicurezza. l'auto non funzionerà per alcune persone. o almeno questo è quello che ho sentito.

-webkit-overflow-scrolling: touch;

fonte

2014-05-14 17:46:47 Dyrehauge

ho risolto dando posizione assoluta a ul ed altezza 100%

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

check out this FIDDLE

fonte

2014-08-06 07:50:26

Questa soluzione nasconde l'estremità inferiore di 'ul' (non mostra l'ultima istanza' li') – sjbuysse

grazie, mi ha salvato la vita :) –

Div con barra di scorrimento all'interno div con posizione: fisso

risposta

Problemi correlati