posizione assoluta + Scorrimento

Con questo HTML e CSSposizione assoluta + Scorrimento

.container { 
 
    position: relative; 
 
    border: solid 1px red; 
 
    height: 256px; 
 
    width: 256px; 
 
    overflow: auto; 
 
} 
 
.full-height { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 128px; 
 
    bottom: 0; 
 
    background: blue; 
 
}

<div class="container"> 
 
    <div class="full-height"> 
 
    </div> 
 
</div>

L'interno div riprende la testa piena di contenitore come desiderato. Se ora aggiungo qualche altro, flusso, contenuto al contenitore come:

.container { 
 
    position: relative; 
 
    border: solid 1px red; 
 
    height: 256px; 
 
    width: 256px; 
 
    overflow: auto; 
 
} 
 
.full-height { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 128px; 
 
    bottom: 0; 
 
    background: blue; 
 
}

<div class="container"> 
 
    <div class="full-height"> 
 
</div> 
 

 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia maxime facere quae cumque perferendis cum atque quia repellendus rerum eaque quod quibusdam incidunt blanditiis possimus temporibus reiciendis deserunt sequi eveniet necessitatibus 
 
    maiores quas assumenda voluptate qui odio laboriosam totam repudiandae? Doloremque dignissimos voluptatibus eveniet rem quasi minus ex cumque esse culpa cupiditate cum architecto! Facilis deleniti unde suscipit minima obcaecati vero ea soluta odio cupiditate 
 
    placeat vitae nesciunt quis alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui nemo corporis ducimus beatae consequatur est iusto dolorum consequuntur vero debitis saepe voluptatem impedit sint ea numquam quia voluptate quidem. 
 
</div>

Poi i rotoli contenitore come desiderato, tuttavia l'elemento di posizionamento assoluto non è più ancorato al fondo della contenitore ma si ferma nella parte inferiore di visualizzazione iniziale del contenitore. La mia domanda è; c'è un modo per avere l'elemento posizionato in modo assoluto come altezza di scorrimento completa del suo contenitore senza usare JS?

fonte

2013-07-15 Chris Meek

Posso chiedere il motivo per cui si dispone di top: 0; anche lì? –

nessuna ragione particolare, ho l'abitudine di specificare oltre le cose –

Se si rimuove 'top: 0;' semplicemente non funziona più. – Brewal

È necessario avvolgere il testo in un elemento div e includere al suo interno l'elemento posizionato in modo assoluto.

<div class="container"> 
    <div class="inner"> 
     <div class="full-height"></div> 
     [Your text here] 
    </div> 
</div>

Css:

.inner: { position: relative; height: auto; } 
.full-height: { height: 100%; }

Impostazione posizione del div interno per relative rende gli elementi posizione di assoluta all'interno di essa basano la loro posizione e l'altezza su esso anziché sul .container div, che ha un'altezza fissa . Senza l'interno, relativamente posizionato, div, il div .full-height calcolerà sempre le sue dimensioni e la posizione in base a .container.

http://jsfiddle.net/M5cTN/

fonte

2013-07-15 14:59:06 giaour

Ovviamente, anche questo ha un certo senso (nel modo in cui qualsiasi CSS ha senso);)) –

L'elemento 'fill-height' sta chiaramente scorrendo con il contenuto, l'OP non lo voleva ancorato? (Cambiando lo sfondo blu a un'immagine di sfondo, puoi vedere cosa intendo quando dico che non è ancorato http://jsfiddle.net/M5cTN/82/) – paulvs

grazie mille. trovato la soluzione, dopo ore di ricerca ... –

position: fixed; risolverà il problema. A titolo di esempio, rivedere il mio implementazione di una sovrapposizione di un'area messaggio fisso (popolato di programmazione):

#mess { 
    position: fixed; 
    background-color: black; 
    top: 20px; 
    right: 50px; 
    height: 10px; 
    width: 600px; 
    z-index: 1000; 
}

E nel codice HTML

<body> 
    <div id="mess"></div> 
    <div id="data"> 
     Much content goes here. 
    </div> 
</body>

Quando #data diventa più tha lo sceen, #mess mantiene la sua posizione sul schermo, mentre lo #data scorre sotto di esso.

fonte

2014-09-28 21:46:51 flaschbier

+24

Il posizionamento fisso posizionerà l'elemento rispetto al browser, che potrebbe non essere il risultato desiderato. –

se non si specifica in alto, a sinistra, a destra, l'elemento fisso di posizione inferiore non sarà posizionato relativamente alla finestra. Ma questo ha naturalmente un utilizzo limitato, solo alla posizione iniziale sinistra di default, altrimenti sarà posizionato relativamente alla finestra, ha anche un altro svantaggio, larghezza: 100% o altezza: 100% sarà uguale alle dimensioni della finestra –

Quindi il gaiour ha ragione, ma se stai cercando un elemento a tutta altezza che non scorre con il contenuto, ma in realtà è l'altezza del contenitore, ecco la soluzione. Avere un genitore con un'altezza che provoca un overflow, un contenitore di contenuto con un'altezza del 100% e overflow: scroll e un fratello possono quindi essere posizionati in base alla dimensione padre e non alle dimensioni dell'elemento di scorrimento. Ecco il violino: http://jsfiddle.net/M5cTN/196/

e il relativo codice:

html:

<div class="container"> 
    <div class="inner"> 
    Lorem ipsum ... 
    </div> 
    <div class="full-height"></div> 
</div>

css:

.container{ 
    height: 256px; 
    position: relative; 
} 
.inner{ 
    height: 100%; 
    overflow: scroll; 
} 
.full-height{ 
    position: absolute; 
    left: 0; 
    width: 20%; 
    top: 0; 
    height: 100%; 
}

fonte

2015-03-20 20:47:42 TorranceScott

posizione assoluta + Scorrimento

risposta

Problemi correlati