Làm cách nào để làm cho nội dung của một phần tử cố định chỉ có thể cuộn được khi nó vượt quá chiều cao của khung nhìn?

Tôi có một divvị trí fixedở bên trái của một trang web, chứa menu và các liên kết điều hướng. Nó không có chiều cao được thiết lập từ css, nội dung xác định chiều cao, chiều rộng là cố định. Vấn đề là nếu nội dung quá nhiều, thì divsẽ lớn hơn chiều cao của cửa sổ và một phần của nội dung sẽ không hiển thị. (Cuộn cửa sổ không giúp ích gì, vì vị trí có fixedvà divsẽ không cuộn.)

Tôi đã cố gắng thiết lập overflow-y:auto;nhưng điều đó cũng không giúp được gì, div dường như không nhận thấy rằng một phần của nó nằm ngoài cửa sổ.

Làm cách nào tôi có thể làm cho nội dung của nó chỉ có thể cuộn được, nếu cần, nếu nó divbị treo ngoài cửa sổ?

Chắc bạn không thể. Đây là một cái gì đó đến gần. Bạn sẽ không nhận được nội dung xoay quanh nó nếu có khoảng trống bên dưới.

http://jsfiddle.net/ThnLk/1289

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

Bạn cũng có thể thực hiện phần trăm chiều cao:

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

.stuck {
    max-height: 100%;
}

Liên kết dưới đây sẽ chứng minh cách tôi đã hoàn thành điều này. Không khó lắm - chỉ cần sử dụng một số nhà phát triển front-end thông minh !!

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

Bạn có thể cần một div bên trong. Với css là:

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

Hãy thử điều này trên vị trí của bạn: phần tử cố định.

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

Điều này hoàn toàn có thể làm được với một số phép thuật flexbox. Hãy xem chiếc bút này .

Bạn cần css như thế này:

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

Điều này sẽ hoạt động trong IE10 +

Đây là giải pháp HTML và CSS thuần túy .

1. Chúng tôi tạo một hộp chứa cho thanh điều hướng với vị trí: fixed; chiều cao: 100%;

2. Sau đó, chúng tôi tạo một hộp bên trong với chiều cao: 100%; tràn-y: cuộn;

3. Tiếp theo, chúng tôi đưa ra nội dung bên trong hộp đó.

Đây là mã:

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

Liên kết đến jsFiddle:

Tôi đang trình bày điều này như một giải pháp thay vì một giải pháp. Điều này có thể không hoạt động mọi lúc. Tôi đã làm theo cách này vì tôi đang làm một trang HTML rất cơ bản, để sử dụng nội bộ, trong một môi trường rất kỳ lạ. Tôi biết có những thư viện như MaterializeCSS có thể tạo các thanh điều hướng thực sự tốt. (Tôi đã định sử dụng chúng, nhưng nó không hoạt động với môi trường của tôi.)

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

Thêm điều này vào mã của bạn để có chiều cao cố định và thêm một cuộn.

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

Đối với mục đích của bạn, bạn chỉ có thể sử dụng

position: absolute;
top: 0%;

và nó vẫn có thể thay đổi kích thước, có thể cuộn và đáp ứng.