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


94

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?


Solusi dengan CSS calc () dapat ditemukan di sini: stackoverflow.com/q/29754195/3168107 .
Shikkediel

calc()adalah teknologi eksperimental dan dapat memberikan hasil yang tidak terduga . Jika Anda memilih untuk menggunakannya, pastikan Anda mengetahui audiens target Anda dan mengujinya di browser tersebut.
c1moore

Mengalami masalah yang sama dan menggunakan sesuatu seperti max-height: calc (100vh - 100px); di mana bilah navigasi dan paddings saya membuat hingga 100px
Zia Ul Rehman Mughal

Jawaban:


99

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

41

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/


1
Jawaban yang diremehkan. Untuk kasus penggunaan saya - Gaya div luar position: fixed; bottom: 0%; top: 0%; overflow: scroll; height: 100vh;akan membuat div luar dapat digulir berdasarkan konten.
kilogic

7

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


3

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 +


2

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:


0

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>


0

Untuk tujuan Anda, Anda bisa menggunakan

position: absolute;
top: 0%;

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

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.