css - con có thể cuộn của phần tử cố định

Question

Tôi có một div cố định với chiều cao 100%, và trong đó, một div con tương đối được định vị. Child-div giữ văn bản có thể được thay đổi, vì vậy nó không có chiều cao cố định.

Tôi muốn con-div cuộn theo chiều dọc nếu nội dung của nó tràn ra ngoài màn hình. Tôi chơi xung quanh với các thuộc tính chiều cao tối thiểu và tối đa để đạt được điều này, nhưng nó không phải là một giải pháp lý tưởng, và không phải lúc nào cũng hoạt động.

CHỈNH SỬA: tối đa và chiều cao tối đa dường như bị bỏ qua, gần như. Tôi đã tính toán bao nhiêu diện tích dọc mà hộp văn bản sẽ mất cho chiều cao màn hình tối thiểu cho phép và đặt độ cao đó. Thêm tối thiểu và chiều cao tối đa không có sự khác biệt về điều này. Vấn đề duy nhất với giải pháp này là hộp là luôn luôn khoảng ~ 60%, do đó, ngay cả khi nó không cần phải di chuyển, nó không. Điều này hoạt động, nhưng không phải là lý tưởng. Nếu có cách để vượt qua chuyện này thì sẽ rất tuyệt.

Đây là những gì tôi có cho đến nay:

<div class="content"> 
    <div id="textbox"> some text 
    </div> 
</div> 

.content { position: fixed; height: 100%; top: 0px; right: 0px; } 

#textBox { 
    position: relative; 
    top: 165px; 
    height: 61.5%; 
    overflow-y: auto; 
} 

Có, nhiều cách tốt hơn fool-proof để làm điều này?

Answer 1

Về cơ bản Bạn phải thiết lập phần tràn của phần tử cố định như bạn có thể thấy trong this example và có jsfiddle để phát các khả năng.

Answer 2

Sau đây làm việc một cách hoàn hảo đối với tôi: Nội dung

<style type="text/css"> 
    #fixed { 
     position: fixed; 
     top:  0; 
     bottom:  0; 
     left:  0; 
     right:  0; 
     border:  1px solid black; 
     overflow: hidden; 
     background: white; 
    } 

    #scrolling { 
     overflow: auto; 
     max-height: 98%; 
    } 
</style> 

<div id="fixed"> 
    <div contenteditable id="scrolling"> 
     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
     Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam 
     egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien 
     ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean 
     fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non 
     enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas 
     augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, 
     facilisis luctus, metus</p> 
    </div> 
</div> 

của div là có thể chỉnh sửa, vì vậy chỉ cần thêm văn bản cho đến khi nó cuộn. Nó sẽ làm việc trên trình duyệt phong nha.

Live Example