CSS: sabit yükseklikteki konteynerin içindeki div için kaydırma çubukları nasıl elde edilir

95

Aşağıdaki işaretlemem var:

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

CSS şuna benzer:

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

İçeriği nedeniyle yüksekliği div.Contenttipik olarak tarafından sağlanan alandan daha büyüktür div.FixedHeightContainer. Şu anda, div.Contentneşeyle dibinden dışarıya uzanıyor div.FixedHeightContainer- istediğim hiç de değil.

div.ContentYüksekliği sığamayacak kadar büyük olduğunda kaydırma çubuklarının (tercihen yalnızca dikey, ancak telaşlı değilim) alacağını nasıl belirleyebilirim ?

overflow:autove overflow:scrolltuhaf bir nedenden dolayı hiçbir şey yapmıyor.

css scrollbar overflow

— David
kaynak

157

ayarlanması overflowbununla ilgilenmelidir, ancak yüksekliğini Contentde ayarlamanız gerekir . Yükseklik özelliği ayarlanmadıysa, div dikey olarak ihtiyaç duyduğu kadar uzar ve kaydırma çubuklarına gerek kalmaz.

Örneğe Bakın: http://jsfiddle.net/ftkbL/1/

— Hollandaca432
kaynak

Tamam teşekkürler. Bu yüzden div.Content için bir yükseklik belirlemem gerekiyor? Kaptan sığmayacağını ve buna göre kaydırma çubukları uygulayacağını varsaydım.

— David

6

Eğer Contentsabit bir yükseklik verirseniz , sabit bir yükseklik vermemelisiniz FixedHeightContainerçünkü başlığınızın ne kadar yüksek olacağını bilemezsiniz, bu yüzden Contentitilebilir. Bakınız: jsfiddle.net/ftkbL/2 Sabit yüksekliği sadece ile eleman üzerinde ayarlamalısınız overflow: scroll. Bkz. Jsfiddle.net/ftkbL/3 veya jsfiddle.net/ftkbL/4

— RoToRa

Söylemek istediğiniz noktayı görüyorum (ilk bağlantıdan) ancak başlık metni biliniyor ve kullanıcı metni pratik olmayan bir boyuta şişirmedikçe bir satırı kırmak için çok kısa.

— David

Kısa bir yüksekliğe sahip olmanın ve aynı zamanda kaydırma çubuğunu gizlemenin bir yolu var mı? Bu şekilde, kullanıcılar mobil cihazlarda aşağı sürüklediklerinde, aşağı kaydırdıklarını göreceklerdir, ancak tarayıcılarında 2 kaydırma çubuğu görmenin zahmetli olması gerekmez mi?

— klewis

@blackhawk - Bildiğim kadarıyla değil. Bunun için Javascript kullanmanız gerekebilir. Özellikle jQuery Draggable kitaplığını düşünüyorum: jqueryui.com/draggable - dikkate alınması gereken bir şey ... masaüstü kullanıcıları kaydırmayı nasıl bilecek?

— Dutchie432

3

FWIW, işte benim yaklaşımım = benim için çalışan basit bir yaklaşım:

<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 Aşk
kaynak

1

Dutchie432 tarafından yukarıdaki cevaptan kodlayın

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

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

— Charitha Goonewardena
kaynak

-2

Kullanım overflowmülkiyet

overflow: hidden; 

overflow: auto;

overflow: scroll;

— Bisma
kaynak