Memiliki div posisi tetap yang perlu digulir jika konten meluap

Saya sebenarnya memiliki dua masalah, tetapi mari kita selesaikan masalah utama terlebih dahulu karena saya percaya yang lain lebih mudah diatasi.

Saya memiliki posisi div tetap di sebelah kiri gulir untuk menu. Sisi kanan adalah div standar yang menggulir dengan benar. Masalahnya adalah ketika browser view-port terlalu kecil untuk melihat seluruh menu .. tidak ada cara untuk mendapatkannya untuk menggulir yang dapat saya temukan (setidaknya tidak dengan css). Saya sudah mencoba menggunakan berbagai kelebihan dalam css, tetapi tidak ada yang membuat gulir div. Div yang berisi menu diatur ke min-height: 100% dan posisi: diperbaiki .. kedua atribut yang perlu saya pertahankan.

Div yang berisi menu ada di dalam wrapper div lain yang diposisikan benar-benar dan ketinggian diatur hingga 100%.

Bagaimana saya bisa membuatnya bergulir secara vertikal jika kontennya terlalu tinggi untuk div?

Itu menuntun saya ke masalah lain, bahwa saya tidak ingin menampilkan bilah gulir .. tapi saya pikir saya mungkin sudah memiliki jawaban untuk itu (hanya saja belum berfungsi karena saya tidak bisa mendapatkan div untuk menggulir memulai dengan).

Ada solusi? Mungkin javascript diperlukan? (yang saya tahu sedikit tentang)

Contoh JS Fiddle

dan kode yang relevan yang menyebabkan masalah (karena memposting semuanya di sini terlalu panjang):

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

Juga mencoba menambahkan ketinggian: 100% juga hanya untuk melihat apakah itu masalah tetapi tidak berhasil ... juga tidak tinggi tetap, seperti 600px.

Masalah dengan menggunakan height:100%adalah bahwa itu akan menjadi 100% dari halaman, bukan 100% dari jendela (seperti yang Anda harapkan). Ini akan menyebabkan masalah yang Anda lihat, karena konten tidak tetap cukup panjang untuk memasukkan konten tetap dengan tinggi 100% tanpa memerlukan bilah gulir. Browser tidak tahu / peduli bahwa Anda tidak dapat benar-benar menggulir bilah itu ke bawah untuk melihatnya

Anda dapat menggunakan fixeduntuk mencapai apa yang Anda coba lakukan.

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

Garpu biola Anda ini menunjukkan perbaikan saya: http://jsfiddle.net/strider820/84AsW/1/

Ini adalah kedua perbaikan.

Pertama, mengenai sidebar tetap, Anda harus memberikan ketinggian agar melimpah:

Kode HTML:

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

Kode CSS:

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

Contoh langsung: http://jsfiddle.net/RWxGX/3/

Tidak mungkin TIDAK untuk mendapatkan bilah gulir jika konten Anda melebihi ketinggian div. Itu sebabnya saya telah menambahkan kueri media untuk ketinggian layar. Mungkin Anda dapat menyesuaikan gaya Anda untuk ukuran layar pendek sehingga gulir tidak perlu muncul.

Ceria, Ignacio

Secara umum, bagian tetap harus diatur dengan width, heightdan top, bottomproperti, jika tidak, ia tidak akan mengenali ukuran dan posisinya.

Jika kotak yang digunakan adalah anak langsung untuk tubuh dan memiliki tetangga, maka masuk akal untuk memeriksa z-indexdan top, leftproperti, karena mereka bisa tumpang tindih satu sama lain, yang mungkin mempengaruhi mouse Anda melayang saat menggulir konten.

Berikut adalah solusi untuk kotak konten (anak bodytag langsung ) yang umum digunakan bersama dengan navigasi seluler.

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

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

Semoga ini bisa membantu siapa saja. Terima kasih!

Solusi di sini tidak bekerja untuk saya karena saya menata komponen reaksi.

Apa yang berhasil meskipun untuk bilah sisi itu

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

Semoga ini bisa membantu seseorang.

Meninggalkan jawaban untuk siapa pun yang ingin melakukan sesuatu yang serupa tetapi dalam arah horizontal , seperti yang saya inginkan.

Tweaking @ strider820 jawaban seperti di bawah ini akan melakukan keajaiban:

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

Itu dia. Juga memeriksa ini komentar mana @train menjelaskan menggunakan overflow:autolebih overflow:scroll.