Bagaimana cara membuat konten elemen tetap dapat di-scroll hanya jika melebihi tinggi viewport?

Saya memiliki divposisi fixeddi sisi kiri halaman web, berisi menu dan link navigasi. Tidak ada pengaturan ketinggian dari css, konten menentukan tinggi, lebar tetap. Masalahnya adalah jika isinya terlalu banyak, maka divakan lebih besar dari tinggi jendela, dan bagian dari isinya tidak akan terlihat. (Menggulir jendela tidak membantu, karena posisinya adalah fixeddan divtidak akan menggulir.)

Saya mencoba mengatur overflow-y:auto;tetapi itu juga tidak membantu, div sepertinya tidak memperhatikan bahwa bagiannya berada di luar jendela.

Bagaimana saya bisa membuat isinya hanya dapat digulir, jika perlu, jika divhang keluar dari jendela?

Anda mungkin tidak bisa. Ini sesuatu yang mendekati. Anda tidak akan mendapatkan konten untuk mengalir di sekitarnya jika ada ruang di bawah.

http://jsfiddle.net/ThnLk/1289

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

Anda juga dapat melakukan persentase tinggi:

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

.stuck {
    max-height: 100%;
}

Tautan di bawah ini akan menunjukkan bagaimana saya mencapai ini. Tidak terlalu sulit - hanya perlu menggunakan pengembang front-end yang cerdas !!

<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/

Anda mungkin membutuhkan div batin. Dengan css adalah:

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

Coba ini pada posisi Anda: elemen tetap.

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

Ini benar-benar bisa dilakukan dengan beberapa keajaiban flexbox. Coba lihat pena ini .

Anda membutuhkan css seperti ini:

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;
}

Ini akan bekerja di IE10 +

Berikut adalah solusi HTML dan CSS murni .

1. Kami membuat kotak kontainer untuk navbar dengan posisi: tetap; tinggi: 100%;

2. Kemudian kami membuat kotak dalam dengan tinggi: 100%; overflow-y: gulir;

3. Selanjutnya, kami mengeluarkan konten di dalam kotak itu.

Ini kodenya:

.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>

Tautan ke jsFiddle:

Saya menyajikan ini sebagai solusi daripada solusi. Ini mungkin tidak selalu berhasil. Saya melakukannya dengan cara ini karena saya membuat halaman HTML yang sangat dasar, untuk penggunaan internal, di lingkungan yang sangat aneh. Saya tahu ada perpustakaan seperti MaterializeCSS yang dapat melakukan bilah navigasi yang sangat bagus. (Saya akan menggunakannya, tetapi tidak berhasil dengan lingkungan saya.)

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

Tambahkan ini ke kode Anda untuk ketinggian tetap dan tambahkan satu gulungan.

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

Untuk tujuan Anda, Anda bisa menggunakan

position: absolute;
top: 0%;

dan masih dapat diubah ukurannya, dapat digulir, dan responsif.