larghezza impostata di div interno sull'elemento scorrevole al 100% della larghezza scorrevole

Come si ottiene la larghezza di questo div interno contenuto per essere uguale alla larghezza dell'area scorrevole?larghezza impostata di div interno sull'elemento scorrevole al 100% della larghezza scorrevole

<div class="scrollable"> 
    <div class="content">short</div> 
    <div class="content">very looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong text</div> 
</div>

con i CSS:

.scrollable { 
    width: 300px; 
    height: 300px; 
    overflow: auto; 
} 

.content { 
    background-color: lightblue; 
    white-space: nowrap; 
}

jsFiddle: http://jsfiddle.net/XBVsR/12/

PROBLEMA: se si scorre attraverso si può vedere che lo sfondo non va tutto il senso attraverso come dovrebbe.

Ho provato la larghezza di impostazione: 100%, overflow: visibile, ecc., Senza alcun risultato.

MODIFICA: Ho aggiornato per chiarire che non voglio che il testo si avvolga - Voglio lo scorrimento orizzontale sull'intera cosa.

fonte

2013-07-01 magritte

È necessario impostare lo sfondo per ogni testo singolarmente? Non sarebbe più semplice impostare lo sfondo scorrevole? –

@ Mss.Noody, sì, ho bisogno di impostarli individualmente perché sono in realtà parte di un menu scorrevole con sfondo e bordo, questo è solo un semplice esempio per isolare il problema. – magritte

Quindi vuoi avere un menu che deve essere fatto scorrere? Puoi mettere da qualche parte tutto? O solo il menu ma con elementi reali perché non capisco perché vuoi che il menu sia scorrevole verticalmente: D –

È possibile utilizzare display: table-row; per div annidati. Guarda jsfiddle

fonte

2013-07-01 13:53:53 YD1m

Semplice ed elegante, è fantastico! – Jaay

Perfecto! Cheers amico! Qualche idea per cui display: block; non ha funzionato mentre display: table-row fa? – magritte

Non so come funzioni il motore di rendering dei browser. Ma suppongo che quando si verifica uno straripamento, il browser non prenda in considerazione la larghezza del blocco ** annidato ** su cui verrà eseguito il rendering dello sfondo. In caso di utilizzo della larghezza di 'table-row' verrebbe calcolato considerando la larghezza del testo contenuto. – YD1m

Aggiunga al .content classe

overflow: auto;

violino Aggiornato qui: http://jsfiddle.net/XBVsR/11/

ricordo che questo potrebbe influenzare tutti gli elementi con class .content. Potresti anche dargli un altro nome di classe.

fonte

2013-07-01 13:51:02

penso che lui voglia la pergamena –

Questo non risolve il problema tizio – Jaay

@MadanlalArora che è corretto, ne ho bisogno per scorrere. In realtà ho anche lo spazio bianco: nowrap per assicurarmi che scorra. – magritte

Basta dare questo al vostro contenuti

overflow: auto;

fonte

2013-07-01 13:51:56

http://jsfiddle.net/XBVsR/7/ vedi questo –

questo scorre solo il singolo elemento di contenuto, ma ho bisogno di scorrere l'intera cosa. – magritte

Non è possibile se si imposta il div esterno su larghezza 300 px. È il testo ininterrotto che rompe il riquadro di delimitazione. È possibile, tuttavia, avvolgere la parola aggiungendo questo al CSS contenuti:

word-wrap: break-word;

Tuttavia, se questo 300px non importa a voi, è possibile spostare l'overflow: auto dalla classe scorrevole a quella contenuti e anche quello dovrebbe risolvere il problema di fondo.

fonte

2013-07-01 13:54:22 GoGoCarl

larghezza impostata di div interno sull'elemento scorrevole al 100% della larghezza scorrevole

risposta

Problemi correlati