Css cuộn tràn không hoạt động trong div

Question

Tôi đang tìm giải pháp CSS/Javascript cho vấn đề cuộn trang HTML của mình.

tôi có ba divs có chứa một div, một tiêu đề và một div wrapper,

Tôi cần một thanh cuộn dọc trong div wrapper, chiều cao nên được tự động hoặc 100% dựa trên nội dung.

Các tiêu đề phải được cố định, và tôi không muốn thanh cuộn tổng thể vì vậy tôi đã đưa ra overflow:hidden trong thẻ cơ thể,

tôi cần thanh cuộn dọc trong div wrapper của tôi. Làm thế nào tôi có thể sửa lỗi này?

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

Vui lòng tham khảo này JS Fiddle

Answer 1

Hãy thử điều này cho một thanh cuộn dọc:

overflow-y:scroll; 

Answer 2

Nếu bạn thêm chiều cao trong lớp .wrapper thì cuộn của bạn đang hoạt động, mà không cần di chuyển height không hoạt động.

Hãy thử điều này http://jsfiddle.net/ZcrFr/3/

CSS:

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

Answer 3

Bạn đã không cho các div một chiều cao. Vì vậy, nó sẽ tự động kéo dài khi có thêm nội dung. Cung cấp cho nó độ cao cố định và các thanh cuộn sẽ hiển thị.

Answer 4

tôi thay đổi nội dung của bạn: 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%;} 

Giving html-tag một chiều cao 100% là giải pháp. Tôi cũng đã xóa div vùng chứa. Bạn không cần nó khi bố trí của bạn vẫn như thế này.

Answer 5

Bạn đang thiếu thuộc tính CSS height.

Thêm vào đó bạn sẽ thấy thanh cuộn sẽ xuất hiện.

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

JSFIDDLE

Từ documentation:

overflow-y

Thuộc tính CSS overflow-y cho phéo clip nội dung, biểu hiện một thanh cuộn, hoặc nội dung tràn màn hình của một khối yếu tố cấp, khi nó tràn ở các cạnh trên và dưới.

Answer 6

Tôi muốn nhận xét về @Ionica Bizau, nhưng tôi không có đủ danh tiếng.
Để trả lời câu hỏi của bạn về mã javascript:
Điều bạn cần làm là lấy chiều cao phần tử của cha mẹ (trừ bất kỳ yếu tố nào chiếm không gian) và áp dụng điều đó cho các phần tử con.

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

Lưu ý cửa sổ
có thể được thay thế bằng ".container" nếu đó là người ta không có con nổi hoặc có cách khắc phục để có được chiều cao chính xác tính toán. Giải pháp này sử dụng jQuery.

Answer 7

Giải pháp là thêm chiều cao: 100%; cho tất cả các phần tử cha-mẹ của .wrapper-div của bạn. Vì vậy:

html{ 
    heigth: 100%; 
} 

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

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

Answer 8

Đối Angular2 + Material2 + Sidenav, bạn sẽ cần phải làm như sau:

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