2012-06-11 18 views
19

ho questo struttura HTML:Scrollbar senza altezza/altezza dinamica fissa con barra di scorrimento

<div id="body"> 
    <div id="head"> 
     <p>Dynamic height without scrollbar</p> 
    </div> 
    <div id="content"> 
     <p>Dynamic height with scrollbar</p> 
    </div> 
    <div id="foot"> 
     <p>Fixed height without scrollbar</p> 
    </div> 
</div> 

voglio avere le tre parti all'interno della parte principale (#body) senza troppopieno. Quindi ho bisogno di una barra di scorrimento nella parte centrale.

Ho provato questo CSS:

#content{ 
    border: red solid 1px; 
    overflow-y: auto; 
} 

E questo:

#content{ 
    border: red solid 1px; 
    overflow-y: auto; 
    height: 100%; 
} 

Ma nessuno di loro lavoro.

Ho fatto un esempio a JSFiddle.

Posso farlo solo con CSS e HTML? Preferirei evitare Javascript.

risposta

24

Flexbox è una moderna alternativa che ti permette di fare questo senza altezze fisse o JavaScript

Impostazione display: flex; flex-direction: column; sul contenitore e flex-shrink: 0; sulla intestazione e piè di pagina. div fa il trucco:

http://jsfiddle.net/cvmrvfhm/1/

+1

Penso che questa risposta dovrebbe essere accettata come risposta per CSS3. – hjchin

+0

Penso che non sia la risposta corretta. Non funzionerà senza un'altezza fissa per l'elemento del corpo. – Equanox

+0

@Equanox L'altezza limitata del contenitore è il punto, altrimenti le tre parti si espandono semplicemente verticalmente e non ci sarebbe bisogno di barre di scorrimento. Si noti che può essere un 'max-height' invece di un' height' fisso. – mtyaka

1

Non so se ho capito bene, ma lo this risolve il problema?

Ho appena cambiato il overflow-y: scroll;

#content{ 
    border: red solid 1px; 
    overflow-y: scroll; 
    height: 100px; 
} 

Redatta

Poi tenta di utilizzare valori percentuali come questo: http://jsfiddle.net/6WAnd/19/

CSS markup:

#body { 
    position: absolute; 
    top; 150px; 
    left: 150px; 
    height: 98%; 
    width: 500px; 
    border: black dashed 2px; 
}  
#head { 
    border: green solid 1px; 
    height: 15%; 
} 
#content{ 
    border: red solid 1px; 
    overflow-y: scroll; 
    height: 70%; 
} 
#foot { 
    border: blue solid 1px; 
    height: 15%; 
} 
+0

Ma non riesco a impostare la dimensione per #head e #content vorrei #content e #head riempire tutto il div principale. (#body). Ho appena fatto un'immagine per illustrarlo: http://img15.hostingpics.net/pics/986131examplepanel.png – GuillaumeS

+0

Ok, vediamo se questo risolve il tuo problema, controlla la mia modifica – Luis

+0

Questa soluzione non consente di avere 2 blocchi con altezza dinamica. Se metto un sacco di testo nella prima parte, non funziona: http://jsfiddle.net/6WAnd/21/. Penso che @ philip-bevan abbia trovato che non è possibile senza JS. risposta qui sotto. – GuillaumeS

0

Utilizzare questa:

#head { 
    border: green solid 1px; 
    height:auto; 
}  
#content{ 
      border: red solid 1px; 
      overflow-y: scroll; 
      height:150px;  
     } 
+0

è un lavoro a meno che non se cambio la prima parte. Prova con un sacco di "

dimensione dinamica senza barra di scorrimento

" http://jsfiddle.net/EKvCw/ – GuillaumeS

+0

modificato il codice di cui sopra, prova che si – Uttara

5

Si dovrà specificare un'altezza fissa, non è possibile utilizzare il 100% perché non c'è nulla per questo di essere paragonato a, come in height=100% di che cosa?

violino Modificato:

http://jsfiddle.net/6WAnd/4/

+0

ho ragione, non è proprio al 100% ma voglio che il div 3 (testa, contenuto e piede) prenda il 100% dell'altezza della parte del corpo che ha una dimensione fissa. Faccio un'immagine per esempio: http: //img15.hostingpics. net/pics/986131examplepanel.png – GuillaumeS

+0

il tuo corpo o la tua testa hanno un'altezza fissa? –

+0

così mething come: http://jsfiddle.net/6WAnd/10/ –

2

Un rapido approccio pulito con molto poco JS e Riempimento CSS: http://jsfiddle.net/benjamincharity/ZcTsT/14/

var headerHeight = $('#header').height(), 
    footerHeight = $('#footer').height(); 

$('#content').css({ 
    'padding-top': headerHeight, 
    'padding-bottom': footerHeight 
}); 
0
<div id="scroll"> 
    <p>Try to add more text</p> 
</div> 

Ecco il codice css

#scroll { 
    overflow-y:auto; 
    height:auto; 
    max-height:200px; 
    border:1px solid black; 
    width:300px; 
} 

ecco la demo JSFIDDLE

2

Utilizzare questa:

style = "max-height: 300px; overflow: auto;"

Tto evitare un'altezza fissa

+0

Lo scorrimento funziona solo quando l'altezza è impostata correttamente? Non funziona con 'max-height' da solo. – Bazley

Problemi correlati