İçerik taşarsa kaydırılması gereken sabit bir pozisyon bölmesine sahip olun

Aslında iki sorunum var, ancak diğerinin daha kolay çözüleceğine inandığım için öncelikle birincil sorunu çözelim.

Bir menü için kaydırmanın sol tarafında sabit bir konum div var. Sağ taraf, doğru kaydırılan standart bir div'dir. Sorun tarayıcı görünüm-portu tüm menüyü görmek için çok küçük olduğunda .. Ben bulabilirim bulmak için bir yolu yoktur (en azından css ile). Css farklı taşmalar kullanarak denedim, ama hiçbir şey div kaydırma yapar. Menüyü içeren div min-height:% 100 ve position: fixed olarak ayarlanmış .. her iki özelliği de saklamam gerekiyor.

Menüyü içeren div, kesinlikle konumlandırılmış ve yüksekliği% 100 olarak ayarlanmış başka bir sarmalayıcı div içinde.

İçerik div için çok uzunsa dikey olarak kaydırmayı nasıl sağlayabilirim?

Bu beni diğer soruna götürüyor, bir kaydırma çubuğunun görüntülenmesini istemiyorum .. ama sanırım buna zaten bir cevabım olabilir (sadece henüz çalışmıyor çünkü div kaydırmak için alamıyorum başlamak için).

Herhangi bir çözüm var mı? Belki javascript gereklidir? (hakkında çok az şey biliyorum)

JS Fiddle Örneği

ve soruna neden olan ilgili kod (burada her şeyi göndermek çok uzun sürdüğü için):

.fixed-content {
    min-height:100%;
    position:fixed;
    overflow-y:scroll;
    overflow-x:hidden;
} 

Ayrıca yükseklik eklemeyi de denedi:% 100 yanı sıra bunun bir sorun olup olmadığını görmek için de işe yaramadı ... ya da 600 piksel gibi sabit bir yükseklik yoktu.

Kullanmayla ilgili sorun height:100%, pencerenin% 100'ü yerine sayfanın% 100'ü olacağıdır (muhtemelen olmasını beklediğiniz gibi). Bu, gördüğünüz soruna neden olacaktır, çünkü sabit olmayan içerik, kaydırma çubuğuna gerek kalmadan% 100 yükseklikte sabit içeriği içerecek kadar uzun. Tarayıcı, görmek için o çubuğu aşağı kaydıramayacağınızı bilmiyor / önemsemiyor

fixedYapmaya çalıştığınız şeyi başarmak için kullanabilirsiniz .

.fixed-content {
    top: 0;
    bottom:0;
    position:fixed;
    overflow-y:scroll;
    overflow-x:hidden;
}

Kemanın bu çatalı düzeltmemi gösteriyor: http://jsfiddle.net/strider820/84AsW/1/

İşte her iki düzeltme.

İlk olarak, sabit kenar çubuğuyla ilgili olarak, taşması için bir yükseklik vermeniz gerekir:

HTML Kodu:

<div id="sidebar">Menu</div>
<div id="content">Text</div>

CSS Kodu:

body {font:76%/150% Arial, Helvetica, sans-serif; color:#666; width:100%; height:100%;}
#sidebar {position:fixed; top:0; left:0; width:20%; height:100%; background:#EEE; overflow:auto;}
#content {width:80%; padding-left:20%;}

@media screen and (max-height:200px){
    #sidebar {color:blue; font-size:50%;}
}

Canlı örnek: http://jsfiddle.net/RWxGX/3/

İçeriğiniz div'in yüksekliğini aşarsa kaydırma çubuğu ALMAMAK imkansızdır. Bu yüzden ekran yüksekliği için bir medya sorgusu ekledim. Belki stilini kısa ekran boyutları için ayarlayabilirsiniz, böylece kaydırma görünmez.

Şerefe, Ignacio

Genel olarak konuşmak gerekirse, sabit bölüm ile ayarlanmalıdır width, heightve top, bottomaksi takdirde onun boyutu ve konumunu tanımayacaktır, özellikleri.

Kullanılan kutu vücut için doğrudan çocuksa ve komşuları varsa, o zaman kontrol etmek z-indexve top, leftözellikleri mantıklıdır , çünkü birbirleriyle çakışabilirler, bu da içeriği kaydırırken fare imlecinizi etkileyebilir.

bodyMobil gezinme ile birlikte yaygın olarak kullanılan bir içerik kutusu ( etiketin doğrudan alt öğesi) için çözüm .

.fixed-content {
    position: fixed;
    top: 0;
    bottom:0;

    width: 100vw; /* viewport width */
    height: 100vh; /* viewport height */
    overflow-y: scroll;
    overflow-x: hidden;
}

Umarım herkese yardımcı olur. Teşekkür ederim!

Buradaki çözümler benim için işe yaramadı çünkü reaksiyon bileşenlerini şekillendiriyorum.

Kenar çubuğu için işe yarayan şey

.sidebar{
position: sticky;
top: 0;
}

Umarım bu birine yardımcı olur.

İstediğim gibi, yatay bir yönde benzer bir şey yapmak isteyen herkes için bir cevap bırakmak .

Tweaking @ strider820'nin cevabı aşağıdaki gibi büyüyü yapacak:

.fixed-content {        //comments showing what I replaced.
    left:0;             //top: 0;
    right:0;            //bottom:0;
    position:fixed;
    overflow-y:hidden;  //overflow-y:scroll;
    overflow-x:auto;    //overflow-x:hidden;
}

Bu kadar. Ayrıca, bu kontrol yorumunu @train kullanılarak açıklanabilir overflow:autoüzerinde overflow:scroll.