ฉันจะทำให้เนื้อหาขององค์ประกอบคงที่เลื่อนได้เฉพาะเมื่อเกินความสูงของวิวพอร์ตได้อย่างไร

ฉันมีdivตำแหน่งfixedที่ด้านซ้ายของหน้าเว็บซึ่งมีเมนูและลิงก์การนำทาง ไม่มีความสูงกำหนดจาก css เนื้อหากำหนดความสูงความกว้างคงที่ ปัญหาคือถ้าเนื้อหามากเกินไปdivจะมีขนาดใหญ่กว่าความสูงของหน้าต่างและจะมองไม่เห็นเนื้อหาบางส่วน (การเลื่อนหน้าต่างไม่ช่วยเนื่องจากตำแหน่งอยู่fixedและdivจะไม่เลื่อน)

ฉันพยายามตั้งค่าoverflow-y:auto;แต่ก็ไม่ได้ผลเช่นกัน div ดูเหมือนจะไม่สังเกตเห็นว่าส่วนนั้นอยู่นอกหน้าต่าง

ฉันจะทำให้เนื้อหาเป็นแบบเลื่อนได้ถ้าจำเป็นเท่านั้นหากdivแฮงค์เอาท์นอกหน้าต่าง

เธอคงทำไม่ได้ นี่คือสิ่งที่ใกล้เข้ามา คุณจะไม่ได้รับเนื้อหาไหลเวียนหากมีที่ว่างด้านล่าง

http://jsfiddle.net/ThnLk/1289

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

คุณสามารถทำเปอร์เซ็นต์ความสูงได้เช่นกัน:

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

.stuck {
    max-height: 100%;
}

ลิงค์ด้านล่างจะแสดงให้เห็นว่าฉันทำสิ่งนี้สำเร็จได้อย่างไร ไม่ยากมาก - ต้องใช้ dev front-end ที่ชาญฉลาด !!

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

คุณอาจต้องมี div ภายใน ด้วย css คือ:

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

ลองสิ่งนี้กับตำแหน่งของคุณ: องค์ประกอบคงที่

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

นี่เป็นสิ่งที่ทำได้อย่างแน่นอนกับเวทมนตร์ Flexbox ลองดูปากกานี้สิสิ

คุณต้องการ css ดังนี้:

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

สิ่งนี้จะใช้ได้ในIE10 +

นี่คือโซลูชันHTML และ CSS ที่แท้จริง

1. เราสร้างกล่องคอนเทนเนอร์สำหรับ navbar ด้วยตำแหน่ง: คงที่; ความสูง: 100%;

2. จากนั้นเราสร้างกล่องด้านในที่มีความสูง: 100%; ล้น -y: เลื่อน;

3. ต่อไปเราใส่เนื้อหาไว้ในกล่องนั้น

นี่คือรหัส:

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

เชื่อมโยงไปยัง jsFiddle:

ฉันกำลังนำเสนอสิ่งนี้เป็นวิธีแก้ปัญหาแทนที่จะเป็นวิธีแก้ปัญหา ซึ่งอาจไม่ได้ผลตลอดเวลา ฉันทำแบบนี้ในขณะที่ฉันกำลังทำหน้า HTML พื้นฐานสำหรับการใช้งานภายในในสภาพแวดล้อมที่แปลกประหลาดมาก ฉันรู้ว่ามีไลบรารีเช่น MaterializeCSS ที่สามารถทำแถบนำทางที่ดีได้ (ฉันจะใช้มัน แต่มันไม่ได้ผลกับสภาพแวดล้อมของฉัน)

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

เพิ่มสิ่งนี้ลงในรหัสของคุณสำหรับความสูงคงที่และเพิ่มหนึ่งเลื่อน

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

เพื่อวัตถุประสงค์ของคุณคุณสามารถใช้ไฟล์

position: absolute;
top: 0%;

และยังสามารถปรับขนาดเลื่อนและตอบสนองได้