CSS: come ottenere barre di scorrimento per div all'interno di contenitori di altezza fissa

92

Ho il seguente markup:

<div class="FixedHeightContainer">
  <h2>Title</h2>
  <div class="Content">
    ..blah blah blah...
  </div>
</div>

Il CSS ha questo aspetto:

.FixedHeightContainer
{
  float:right;
  height: 250px;
  width:250px;  
}
.Content
{
  ???
}

A causa del suo contenuto, l'altezza di div.Contentè in genere maggiore dello spazio fornito da div.FixedHeightContainer. Al momento, si div.Contentestende allegramente dal fondo di div.FixedHeightContainer- per niente quello che voglio.

Come faccio a specificare che div.Contentottiene le barre di scorrimento (preferibilmente solo verticali, ma non sono esigente) quando la sua altezza è troppo grande per adattarsi?

overflow:autoe non overflow:scrollstanno facendo nulla, per qualche strano motivo.

css scrollbar overflow

— David
fonte

154

l'impostazione overflowdovrebbe occuparsene, ma è necessario impostare anche l'altezza di Content. Se l'attributo height non è impostato, il div crescerà verticalmente quanto è necessario e le barre di scorrimento non saranno necessarie.

Vedi esempio: http://jsfiddle.net/ftkbL/1/

— Dutchie432
fonte

Va bene, grazie. Quindi devo specificare un'altezza per div.Content? Ho pensato che dal contenitore avrebbe funzionato che non si sarebbe adattato e applicato le barre di scorrimento su quella base.

— David

6

Se dai Contentun'altezza fissa, non dovresti dare FixedHeightContainerun'altezza fissa, perché non puoi sapere quanto sarà alto il tuo titolo, quindi Contentpotrebbe essere spinto fuori. Vedi: jsfiddle.net/ftkbL/2 Dovresti impostare l'altezza fissa solo sull'elemento con overflow: scroll. Vedi jsfiddle.net/ftkbL/3 o jsfiddle.net/ftkbL/4

— RoToRa

Capisco il tuo punto (dal primo collegamento) ma il testo del titolo è noto ed è troppo breve per interrompersi su una riga a meno che l'utente non abbia gonfiato il testo a una dimensione poco pratica.

— David

C'è un modo per avere un'altezza ridotta e allo stesso tempo nascondere la barra di scorrimento? in questo modo quando gli utenti trascinano verso il basso sui dispositivi mobili, vedranno che stanno scorrendo verso il basso, ma senza l'ingombro di vedere 2 barre di scorrimento sul proprio browser?

— klewis

@blackhawk - Non che io sappia. Potrebbe essere necessario utilizzare Javascript per questo. In particolare sto pensando alla libreria jQuery Draggable: jqueryui.com/draggable -una cosa da considerare è ... come sapranno gli utenti desktop di scorrere?

— Dutchie432

2

FWIW, ecco il mio approccio = semplice che funziona per me:

<div id="outerDivWrapper">
   <div id="outerDiv">
      <div id="scrollableContent">
blah blah blah
      </div>
   </div>
</div>

html, body {
   height: 100%;
   margin: 0em;
}

#outerDivWrapper, #outerDiv {
   height: 100%;
   margin: 0em;
}

#scrollableContent {
   height: 100%;
   margin: 0em;
   overflow-y: auto;
}

— John Love
fonte

1

Codice dalla risposta sopra di Dutchie432

.FixedHeightContainer {
    float:right;
    height: 250px;
    width:250px; 
    padding:3px; 
    background:#f00;
}

.Content {
    height:224px;
    overflow:auto;
    background:#fff;
}

— Charitha Goonewardena
fonte

-2

usa la overflowproprietà

overflow: hidden; 

overflow: auto;

overflow: scroll;

— bisma
fonte