Memiliki div posisi tetap yang perlu digulir jika konten meluap


150

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.


Silakan kirim jsfiddle dengan html dan css yang Anda gunakan saat ini sehingga kami dapat melihat masalahnya. Terima kasih!
mchail

3
pernahkah Anda mencoba melimpah: otomatis; ?
Dan

Ya overflow: otomatis atau overflow-y: gulir atau overflow: gulir semua tidak memungkinkan div tetap bergulir.
Pabrik TCD

Alasan pengguliran diperlukan adalah jika div memiliki konten TERLALU JAUH dalam panjangnya yang ditentukan. Jika port tampilan browser menyusut, hal itu tidak akan menyebabkan div memaksa tindakan pengguliran.
Dan

Tidak dapat memposting JSfiddle dan html / css karena itu hanya terlalu lama dan mereka tidak membiarkan Anda memposting tautan JSfiddle tanpa kode. :( Saya memposting hanya sepotong kode yang sepertinya tidak membantu scroll div .. dan tautan ke semuanya.
TCD Factory

Jawaban:


245

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/


Bekerja. Saya membutuhkan ini untuk adaptasi artikel Codrops. Beberapa mungkin perlu menggunakan set kiri dan kanan ke 0 juga. Terima kasih banyak, semoga beruntung
Santiago Baigorria

19
Jika Anda mengatur "overflow-y" ke otomatis, bilah gulir akan menghilang saat konten berada dalam viewport. Dengan kata lain, jika tidak meluap, tidak akan ada bilah gulir dan saat meluap, akan ada bilah gulir.
latihlah

Benar. Saya hanya menggunakan css-nya dan memperbaiki apa yang benar-benar rusak. Tapi sepertinya dia sudah memiliki jawaban atas pertanyaan itu.
strider820

3
bekerja! solusi hebat Saya masih belum mengerti bagian bawah: 0 bagian .. bisakah kamu menjelaskannya ??
Gianluca Ghettini

5
Menambahkan atas: 0 dan bawah: 0 sambil meninggalkan tinggi dalam posisi elemen tetap menyebabkan browser meregangkan elemen untuk membuat bagian atas berada di 0 dan bagian bawah berada di 0.
strider820

6

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


Lihat contoh JSFiddle yang saya posting. Anda akan melihat masalahnya.
Pabrik TCD

Ini tidak berfungsi di browser yang lebih lama, seperti Mobile Safari untuk iOS 4.2
mheavers

4

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!


3

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.


Saya telah mengedit CSS selama bertahun-tahun dan tidak tahu tentang atribut 'sticky position'. Terima kasih untuk ini, bekerja dengan baik untuk implementasi saya juga!
1owk3y

0

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.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.