CSS: jak uzyskać paski przewijania dla div w kontenerze o stałej wysokości

94

Mam następujące znaczniki:

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

CSS wygląda następująco:

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

Ze względu na swoją zawartość wysokość div.Contentjest zwykle większa niż powierzchnia zapewniana przez div.FixedHeightContainer. W tej chwili div.Contentwesoło wystaje z dna div.FixedHeightContainer- wcale tego nie chcę.

Jak określić, że mają być wyświetlane div.Contentpaski przewijania (najlepiej tylko pionowe, ale nie jestem wybredny), gdy ich wysokość jest zbyt duża, aby je dopasować?

overflow:autoi overflow:scrollnie robią nic z jakiegoś dziwnego powodu.

css scrollbar overflow

— David
źródło

157

ustawienie overflowpowinno o to zadbać, ale trzeba też ustawić wysokość Content. Jeśli atrybut wysokości nie jest ustawiony, element div będzie rosnąć w pionie tak wysoko, jak to konieczne, a paski przewijania nie będą potrzebne.

Zobacz przykład: http://jsfiddle.net/ftkbL/1/

— Dutchie432
źródło

Ok, dzięki. Więc muszę określić wysokość dla treści div. Założyłem, że z kontenera wyjdzie, że nie pasuje i na tej podstawie zastosowałem paski przewijania.

— David,

6

Jeśli podajesz Contentstałą wysokość, nie powinieneś podawać FixedHeightContainerstałej wysokości, ponieważ nie możesz wiedzieć, jak wysoki będzie twój tytuł, więc Contentmoże zostać wypchnięty. Zobacz: jsfiddle.net/ftkbL/2 Stałą wysokość należy ustawić tylko dla elementu z overflow: scroll. Zobacz jsfiddle.net/ftkbL/3 lub jsfiddle.net/ftkbL/4

— RoToRa

Widzę twój punkt widzenia (z pierwszego linku), ale tekst tytułu jest znany i jest zbyt krótki, aby przekroczyć linię, chyba że użytkownik nadmuchał tekst do niepraktycznego rozmiaru.

— David,

Czy jest sposób, aby mieć małą wysokość i jednocześnie ukryć pasek przewijania? w ten sposób, gdy użytkownicy przeciągają w dół na urządzeniach mobilnych, zobaczą, że przewijają w dół, ale bez kłopotliwego oglądania dwóch pasków przewijania w przeglądarce?

— klewis

@blackhawk - nie o tym wiem. Może być do tego konieczne użycie Javascript. W szczególności mam na myśli bibliotekę jQuery Draggable: jqueryui.com/draggable -jedną rzeczą do rozważenia jest ... skąd użytkownicy komputerów stacjonarnych będą wiedzieć, jak przewijać?

— Dutchie432

2

FWIW, oto moje podejście = proste, które działa dla mnie:

<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
źródło

1

Kod z powyższej odpowiedzi autorstwa Dutchie432

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

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

— Charitha Goonewardena
źródło

-2

używać overflowwłaściwości

overflow: hidden; 

overflow: auto;

overflow: scroll;

— bisma
źródło