Sabit bir öğenin içeriğini yalnızca görüntü alanının yüksekliğini aştığında nasıl kaydırılabilir hale getirebilirim?

Bir web sayfasının sol tarafında, menü ve gezinme bağlantılarını içeren bir divkonum var fixed. Css'den yükseklik ayarı yoktur, içerik yüksekliği belirler, genişlik sabittir. Sorun şu ki, içerik çok divfazlaysa, pencere yüksekliğinden daha büyük olacak ve içeriğin bir kısmı görünmeyecek. (Konum olduğu fixedve divkaydırılmayacağı için pencereyi kaydırmak işe yaramaz.)

Ayarlamaya çalıştım overflow-y:auto;ama bu da yardımcı olmuyor, div bir kısmının pencerenin dışında olduğunu fark etmiyor gibi görünüyor.

İçeriği yalnızca gerekirse div, pencerenin dışında takılıyorsa nasıl kaydırılabilir hale getirebilirim ?

Muhtemelen yapamazsın. İşte yaklaşan bir şey. Aşağıda yer varsa, içeriğin etrafından akmasını sağlayamazsınız.

http://jsfiddle.net/ThnLk/1289

.stuck {
    position: fixed;
    top: 10px;
    left: 10px;
    bottom: 10px;
    width: 180px;
    overflow-y: scroll;
}

Yüzde yüksekliği de yapabilirsiniz:

http://jsfiddle.net/ThnLk/1287/

.stuck {
    max-height: 100%;
}

Aşağıdaki bağlantı bunu nasıl başardığımı gösterecek. Çok zor değil - sadece biraz akıllı bir ön uç geliştirici kullanmanız gerekiyor !!

<div style="position: fixed; bottom: 0%; top: 0%;">

    <div style="overflow-y: scroll; height: 100%;">

       Menu HTML goes in here

    </div>

</div>

http://jsfiddle.net/RyanBrackett/b44Zn/

Muhtemelen bir iç div'e ihtiyacınız var. Css ile:

.fixed {
   position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
   overflow-y: auto;
   width: 200px; // your value
}
.inner {
   min-height: 100%;
}

Bunu konumunuzda deneyin: sabit eleman.

overflow-y: scroll;
max-height: 100%;

Bu kesinlikle bazı flexbox büyüleriyle yapılabilir. Bu kaleme bir bak .

Bunun gibi css'e ihtiyacınız var:

aside {
  background-color: cyan;
  position: fixed;
  max-height: 100vh;
  width: 25%;
  display: flex;
  flex-direction: column;
}

ul {
  overflow-y: scroll;
}

section {
  width: 75%;
  float: right;
  background: orange;
}

Bu, IE10 + ' da çalışacak

İşte saf HTML ve CSS çözümü.

1. Navbar için şu konumu olan bir konteyner kutusu oluşturuyoruz: fixed; yükseklik:% 100;

2. Daha sonra yüksekliği olan bir iç kutu oluşturuyoruz:% 100; overflow-y: kaydırma;

3. Sonra, bu kutunun içine içerik koyuyoruz.

İşte kod:

.nav-box{
        position: fixed;
        border: 1px solid #0a2b1d;
        height:100%;
   }
   .inner-box{
        width: 200px;
        height: 100%;
        overflow-y: scroll;
        border: 1px solid #0A246A;
    }
    .tabs{
        border: 3px solid chartreuse;
        color:darkred;
    }
    .content-box p{
      height:50px;
      text-align:center;
    }

<div class="nav-box">
  <div class="inner-box">
    <div class="tabs"><p>Navbar content Start</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content End</p></div>
    </div>
</div>
<div class="content-box">
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
</div>

JsFiddle'a bağlantı:

Bunu bir çözümden ziyade geçici bir çözüm olarak sunuyorum. Bu her zaman işe yaramayabilir. Bu şekilde yaptım çünkü çok tuhaf bir ortamda dahili kullanım için çok basit bir HTML sayfası yapıyorum. MaterializeCSS gibi gerçekten güzel gezinti çubukları yapabilen kütüphaneler olduğunu biliyorum. (Onları kullanacaktım ama ortamımda işe yaramadı.)

<div id="nav" style="position:fixed;float:left;overflow-y:hidden;width:10%;"></div>
<div style="margin-left:10%;float:left;overflow-y:auto;width:60%;word-break:break-all;word-wrap:break-word;" id="content"></div>

Bunu sabit yükseklik için kodunuza ekleyin ve bir kaydırma ekleyin.

.fixedbox {
    max-height: auto;
    overflow-y: scroll;
}

Amacınız için sadece kullanabilirsiniz

position: absolute;
top: 0%;

ve yine de yeniden boyutlandırılabilir, kaydırılabilir ve duyarlı olabilir.