ฉันกำลังมองหาโซลูชัน CSS / Javascript สำหรับปัญหาการเลื่อนหน้า HTML ของฉัน

ฉันมี div สามตัวที่มี div ส่วนหัวและ wrapper div

ฉันต้องการแถบเลื่อนแนวตั้งใน wrapper div ความสูงควรเป็นแบบอัตโนมัติหรือ 100% ตามเนื้อหา

ส่วนหัวควรได้รับการแก้ไขและฉันไม่ต้องการแถบเลื่อนโดยรวมดังนั้นฉันจึงให้ไว้overflow:hiddenในแท็กเนื้อหา

ฉันต้องการแถบเลื่อนแนวตั้งใน wrapper div ฉันจะแก้ไขปัญหานี้ได้อย่างไร?

HTML

<div id="container">

    <div class="header"></div>

    <div class="wrapper">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus porta tortor sed metus. Nam pretium. Sed tempor. Integer ullamcorper, odio quis porttitor sagittis, nisl erat tincidunt massa, eu eleifend eros nibh sollicitudin est. Nulla dignissim. Mauris sollicitudin, arcu id sagittis placerat, tellus mauris egestas felis, eget interdum mi nibh vel lorem. Aliquam egestas hendrerit massa. Suspendisse sed nunc et lacus feugiat hendrerit. Nam cursus euismod augue. Aenean vehicula nisl eu quam luctus adipiscing. Nunc consequat justo pretium orci. Mauris hendrerit fermentum massa. Aenean consectetuer est ut arcu. Aliquam nisl massa, blandit at, accumsan sed, porta vel, metus. Duis fringilla quam ut eros.</p>
        <!-- Lots more paragraphs-->
    </div>

</div>

CSS

body{ margin:0; padding:0; overflow:hidden; height:100%}
#container { width:1000px; margin:0 auto;}
.header { width:1000px; height:30px; background-color:#dadada;}
.wrapper{ width:1000px; overflow:scroll; position:relative;}

โปรดดูที่JS Fiddle นี้

คุณไม่มีheightคุณสมบัติ CSS

เมื่อเพิ่มเข้าไปคุณจะสังเกตเห็นว่าแถบเลื่อนจะปรากฏขึ้น

.wrapper{ 
    // width: 1000px;
    width:600px; 
    overflow-y:scroll; 
    position:relative;
    height: 300px;
}

JSFIDDLE

จากเอกสารประกอบ :

overflow-y

คุณสมบัติ overflow-y CSS ระบุว่าจะคลิปเนื้อหาแสดงแถบเลื่อนหรือแสดงเนื้อหาล้นขององค์ประกอบระดับบล็อกเมื่อมันล้นที่ขอบด้านบนและด้านล่าง

วิธีแก้ปัญหาคือเพิ่มheight:100%;องค์ประกอบหลักทั้งหมดของคุณ.wrapper-divด้วย ดังนั้น:

html{
    height: 100%;
}

body{ 
    margin:0;
    padding:0;
    overflow:hidden;
    height:100%;
}

#container{
    width:1000px;
    margin:0 auto;
    height:100%;
}

หากคุณเพิ่มความสูงใน.wrapperชั้นเรียนแล้วการเลื่อนของคุณจะทำงานโดยไม่มีการheightเลื่อนจะไม่ทำงาน

ลองดู http://jsfiddle.net/ZcrFr/3/

CSS:

.wrapper {
  position: relative;
  overflow: scroll;
  width: 1000px;
  height: 800px;
}

คุณไม่ได้ให้ความสูงแก่ div ดังนั้นมันจะยืดออกโดยอัตโนมัติเมื่อมีการเพิ่มเนื้อหามากขึ้น กำหนดความสูงไว้แล้วแถบเลื่อนจะปรากฏขึ้น

หากคุณตั้งค่าความสูงคงที่สำหรับส่วนหัวของคุณคุณสามารถใช้สิ่งนั้นในการคำนวณขนาดของกระดาษห่อหุ้มของคุณ

http://jsfiddle.net/ske5Lqyv/5/

โดยใช้โค้ดตัวอย่างของคุณคุณสามารถเพิ่ม CSS นี้:

html, body {
  margin: 0px;
  padding: 0px;
  height: 100%;
}

#container {
  height: 100%;
}

.header {
  height: 64px;
  background-color: lightblue;
}

.wrapper {
  height: calc(100% - 64px);
  overflow-y: auto;
}

หรือคุณสามารถใช้ flexbox สำหรับวิธีการแบบไดนามิกมากขึ้น http://jsfiddle.net/19zbs7je/3/

<div id="container">
  <div class="section">
    <div class="header">Heading</div>
    <div class="wrapper">
      <p>Large Text</p>
    </div>
  </div>
</div>

html, body {
  margin: 0px;
  padding: 0px;
  height: 100%;
}

#container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.section {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.header {
  height: 64px;
  background-color: lightblue;
  flex-shrink: 0;
}

.wrapper {
  flex-grow: 1;
  overflow: auto;
  min-height: 100%; 
}

และหากคุณต้องการที่จะเป็นคนที่คลั่งไคล้มากขึ้นลองดูคำตอบของฉันสำหรับคำถามนี้ https://stackoverflow.com/a/52416148/1513083

ฉันแก้ไขของคุณ: Fiddle

html, body{ margin:0; padding:0; overflow:hidden; height:100% }
.header { margin: 0 auto; width:500px; height:30px; background-color:#dadada;}
.wrapper{ margin: 0 auto; width:500px; overflow:scroll; height: 100%;}

การให้ html-tag มีความสูง 100% เป็นวิธีแก้ปัญหา ฉันลบคอนเทนเนอร์ div ด้วย คุณไม่จำเป็นต้องใช้เมื่อเค้าโครงของคุณยังคงเป็นเช่นนี้

ฉันต้องการแสดงความคิดเห็นเกี่ยวกับ @Ionica Bizau แต่ฉันไม่มีชื่อเสียงมากพอ
หากต้องการตอบคำถามของคุณเกี่ยวกับโค้ดจาวาสคริปต์:
สิ่งที่คุณต้องทำคือรับความสูงขององค์ประกอบของผู้ปกครอง (ลบองค์ประกอบใด ๆ ที่ใช้พื้นที่) และใช้กับองค์ประกอบลูกนั้น

function wrapperHeight(){
    var height = $(window).outerHeight() - $('#header').outerHeight(true);
    $('.wrapper').css({"max-height":height+"px"});      
}

หน้าต่างหมายเหตุอาจถูกแทนที่ด้วย ".container" ถ้าหน้าต่างนั้นไม่มีลูกลอยหรือมีการแก้ไขเพื่อให้คำนวณความสูงที่ถูกต้อง โซลูชันนี้ใช้ jQuery

สำหรับ Angular2 + Material2 + Sidenav คุณจะต้องทำสิ่งต่อไปนี้:

 ngAfterViewInit() {
   this.element.nativeElement.getElementsByClassName('md-sidenav-content')[0].style.overflow = 'hidden'; 
  }

ในกรณีของฉันheight: 100vhแก้ไขปัญหาด้วยพฤติกรรมที่คาดไว้เท่านั้น

ลองสิ่งนี้สำหรับแถบเลื่อนแนวตั้ง:

overflow-y:scroll;