CSS: cara mendapatkan scrollbar untuk div di dalam container dengan tinggi tetap

93

Saya memiliki markup berikut:

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

CSS terlihat seperti ini:

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

Karena isinya, ketinggian div.Contentbiasanya lebih besar dari ruang yang disediakan div.FixedHeightContainer. Saat ini, div.Contentdengan riang meluas dari dasar div.FixedHeightContainer- tidak sama sekali yang saya inginkan.

Bagaimana cara menentukan yang div.Contentmendapat scrollbar (sebaiknya hanya vertikal, tapi saya tidak cerewet) ketika tingginya terlalu bagus untuk muat?

overflow:autodan overflow:scrolltidak melakukan apa-apa, karena alasan yang aneh.

css scrollbar overflow David
sumber

Jawaban:

157

pengaturan overflowharus mengurusnya, tetapi Anda perlu mengatur ketinggian Contentjuga. Jika atribut height tidak disetel, div akan tumbuh secara vertikal setinggi yang diperlukan, dan scrollbar tidak diperlukan.

Lihat Contoh: http://jsfiddle.net/ftkbL/1/

Dutchie432
sumber
Oke terima kasih. Jadi saya perlu menentukan ketinggian untuk div.Content? Saya berasumsi itu akan berhasil dari wadah yang tidak muat, dan menerapkan scrollbar atas dasar itu.
David
6
Jika Anda memberikan Contenttinggi tetap, Anda tidak boleh memberikan FixedHeightContainertinggi tetap, karena Anda tidak dapat mengetahui seberapa tinggi judul Anda nantinya, sehingga Contentdapat didorong keluar. Lihat: jsfiddle.net/ftkbL/2 Anda harus mengatur ketinggian tetap hanya pada elemen dengan overflow: scroll. Lihat jsfiddle.net/ftkbL/3 atau jsfiddle.net/ftkbL/4
RoToRa
Saya mengerti maksud Anda (dari tautan pertama) tetapi teks judul diketahui dan terlalu pendek untuk disela baris kecuali pengguna memperbesar teks ke ukuran yang tidak praktis.
David
Adakah cara untuk memiliki ketinggian yang pendek dan menyembunyikan bilah gulir pada saat yang bersamaan? Dengan cara ini ketika pengguna menyeret ke bawah pada perangkat seluler, mereka akan melihat bahwa mereka menggulir ke bawah, tetapi tanpa repot melihat 2 bilah gulir di browser mereka?
klewis
@ Blackhawk - Setahu saya tidak. Anda mungkin perlu menggunakan Javascript untuk ini. Secara khusus saya memikirkan pustaka jQuery Draggable: jqueryui.com/draggable -satu hal yang perlu dipertimbangkan adalah ... bagaimana pengguna desktop tahu cara menggulir?
Dutchie432
2

FWIW, inilah pendekatan saya = yang sederhana yang berhasil untuk saya:

<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
sumber
1

Kode dari jawaban di atas oleh Dutchie432 

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

.Content {
    height:224px;
    overflow:auto;
    background:#fff;
}
Charitha Goonewardena
sumber
-2

menggunakan overflowproperti

overflow: hidden; 

overflow: auto;

overflow: scroll;
bisma
sumber