Tôi có HTML sau: http://jsfiddle.net/fMs67/. Tôi muốn làm cho div2 tôn trọng kích thước của div1 và cuộn nội dung của div3.div có thể cuộn bên trong vùng chứa
Điều này có khả thi không?
Cảm ơn!
CẬP NHẬT-1:
Đây là trường hợp tiên tiến hơn mà tôi quá đơn giản hóa khi tôi hỏi những câu hỏi: http://jsfiddle.net/Wcgvt/. Tôi cần bằng cách nào đó mà tiêu đề + đó là anh chị em div để không tràn kích thước của div cha mẹ.
Thêm position: relative để phụ huynh, và một max-height:100%; trên div2 hoạt động.
<div id="div1" style="height: 500px;position:relative;">
<div id="div2" style="max-height:100%;overflow:auto;border:1px solid red;">
<div id="div3" style="height:1500px;border:5px solid yellow;">hello</div>
</div>
</div>
</body>
Cập nhật: Sau đây cho thấy "cập nhật" ví dụ và câu trả lời. http://jsfiddle.net/Wcgvt/181/
Bí mật có sử dụng box-sizing: border-box và một số đệm để làm cho chiều cao div thứ hai 100%, nhưng di chuyển nội dung xuống 50px. Sau đó, bọc nội dung trong div với overflow: auto để chứa thanh cuộn. Hãy chú ý đến z-indexes để giữ cho tất cả các văn bản có thể lựa chọn - hy vọng điều này sẽ giúp, vài năm sau đó.
Nếu bạn đặt overflow: scroll trên chiều cao cố định div, div sẽ cuộn nếu nội dung chiếm quá nhiều không gian.
Đây có phải là những gì bạn đang mong muốn?
<body>
<div id="div1" style="height: 500px;">
<div id="div2" style="height: inherit; overflow: auto; border:1px solid red;">
<div id="div3" style="height:1500px;border:5px solid yellow;">hello</div>
</div>
</div>
Thay vì overflow:auto, hãy thử overflow-y:auto. Nên làm việc như một say mê!
tôi đã chỉ gia tăng (overflow: scroll;) trong (div3) với chiều cao cố định.
thấy fiddle: - http://jsfiddle.net/fMs67/10/
function start() {
\t document.getElementById("textBox1").scrollTop +=5;
scrolldelay = setTimeout(function() {start();}, 40);
}
function stop(){
\t clearTimeout(scrolldelay);
}
function reset(){
\t var loc = document.getElementById("textBox1").scrollTop;
\t document.getElementById("textBox1").scrollTop -= loc;
\t clearTimeout(scrolldelay);
}
//adjust height of paragraph in css
//element textbox in div
//adjust speed at scrolltop and startTôi tạo ra một phiên bản nâng cao, dựa trên fiddle Trey Copland của, mà tôi nghĩ là giống như những gì bạn muốn. Đã thêm vào đây để tham khảo trong tương lai cho những người đến đây sau này. Fiddle example
<body>
<style>
.modal {
height: 390px;
border: 5px solid green;
}
.heading {
padding: 10px;
}
.content {
height: 300px;
overflow:auto;
border: 5px solid red;
}
.scrollable {
height: 1200px;
border: 5px solid yellow;
}
.footer {
height: 2em;
padding: .5em;
}
</style>
<div class="modal">
<div class="heading">
<h4>Heading</h4>
</div>
<div class="content">
<div class="scrollable" >hello</div>
</div>
<div class="footer">
Footer
</div>
</div>
</body>
Bạn đã khắc phục sự cố này chưa? –
Xin chào TCC - cảm ơn bạn đã yêu cầu! Trên thực tế, trường hợp của tôi phức tạp hơn một chút - tôi đã thêm UPDATE-1 với một người chơi mới. –
Những gì bạn đang cố gắng làm là rất khó mà không xác định chiều cao cứng, tức là, đặt d3-2 đến chiều cao tối đa chiều cao của d3 trừ đi chiều cao của d3-1. –