Tạo nội dung có thể cuộn với chiều cao 100% cố định div

Question

Tôi muốn tạo div có thể cuộn. Tôi biết ở đây là rất nhiều ví dụ, nhưng không ai trong số họ làm việc cho tôi.

Tôi có một lớp .page, lấp đầy màn hình thiết bị di động của tôi. Bên trong nó, tôi có một div .content. Điều này chứa nội dung của các trang. Nó chỉ là sắp xếp nội dung từ phía trên, và nó cần phải di chuyển nội dung nếu nó đi ra ngoài ranh giới của .content.

.page{ 
    margin: 0; 
    padding: 0; 
    min-height: 100%; 
    width: 100%; 
    display: block; 
} 
.content{ 
    padding: 4em 0 0 0; 
    overflow-x: hidden; 
    overlofw-y: auto; 
    /*-webkit-overflow-scrolling: touch;*/  
} 

Tôi nên làm gì để nó hoạt động?

Cập nhật

Tôi đã thử nó trong fiddle, và nó được làm việc. Nhưng không phải trên điện thoại của tôi. Bởi vì nó tôi không biết đâu là vấn đề.

Do đó, tôi đã đính kèm toàn bộ mã của mình vào câu hỏi. Điều này rất quan trọng đối với tôi để làm cho nó hoạt động.

Hãy giúp tôi. Cảm ơn vì bất kì sự giúp đỡ. :)

Answer 1

Đây có phải là những gì bạn cần không ??

html, body{ 
    height:100%; 
    margin:0; 
    padding:0; 
} 
.page{ 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    width: 50%; 
    display: block; border:solid #000 1px 
} 
.content{ 
    padding:0; 
    overflow: scroll; overflow-x:hidden; 
    height:100% 
    /*-webkit-overflow-scrolling: touch;*/  
} 
span{ 
    padding:4em 0 0 0; 
    display:inline-block 
} 

DEMO

Sử dụng span thẻ để xác định đệm cho nội dung div coz nếu bạn cho đệm vào div nội dung nó tính toán như thêm chiều cao 100% + 4em vì vậy ..

Và đảm bảo rằng bạn đang chỉ định chiều cao html và body là 100% bất cứ khi nào bạn muốn sử dụng height:100% trong trang của mình.

Answer 2

Bạn cần có chiều cao cửa sổ cho điều đó và cần đặt nó cho .page. Dù sao, bạn có thể cần phải thêm một số javascript cho điều đó. Tôi đã sử dụng jQuery cho giải pháp. [bạn có thể sử dụng thư viện khác, tùy thuộc vào bạn. Tôi gợi ý bạn giải pháp này]

Dưới đây là đánh dấu:

<div class="page"> 
    <div class="content"> 

    </div> 
</div> 

CSS:

* { margin:0; padding:0 } /* using * for demo _ you should use proper reset */ 
html, body { height:100%; height:100% } 
body { height:5000px; background-color:#F7F7F7; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:1.6em } 
.page { background:#A2A2A2; width:200px; height:600px; overflow-y:scroll; position:fixed } 
.content { background-color:#4D4D4D; padding:10px; color:#B7B7B7; } 

JS:

$('document').ready(function(){ 
    var wHeight = $(window).height(); 
    $('.page').css({ 
     'height' : wHeight + 'px' 
    }); 
}); 

Chỉ cần nhìn thấy link fiddle này - (live demo) - http://jsfiddle.net/LZT7B/