Div với thanh cuộn bên trong div có vị trí: cố định

Tôi có một div có vị trí: cố định đó là div vùng chứa của tôi cho một số menu. Tôi đã đặt nó lên trên cùng: 0px, dưới cùng: 0px để luôn điền vào chế độ xem. Bên trong đó div tôi muốn có 2 divs khác, một trong số thấp hơn trong đó có rất nhiều dòng và có tràn: tự động. Tôi hy vọng rằng nó sẽ được chứa trong div container, nhưng nếu có quá nhiều dòng nó chỉ đơn giản là mở rộng bên ngoài div cố định. Dưới đây là mã của tôi và một ảnh chụp màn hình để làm rõ:Div với thanh cuộn bên trong div có vị trí: cố định

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>MyPlan</title> 
    <meta name="X-UA-COMPATIBLE" value="IE=8" /> 
    <style type="text/css"> 
     #outerfixed { position:fixed; width:200px; background-color:blue; padding:5px; top:0px; bottom:30px;} 
     #innerstatic1 { width:100%; background-color:yellow; height:100px;} 
     #innerstatic2 { overflow:auto; background-color:red; width:100%;} 
    </style> 
</head> 
<body> 
    <div id="outerfixed"> 
     <h3>OUTERFIXED</h3> 
     <div id="innerstatic1"> 
      <h3>INNERSTATIC1</h3> 
     </div> 
     <div id="innerstatic2"> 
      <h3>INNERSTATIC2</h3> 
      line<br /> 
         ...lots of lines 
      line<br /> 
     </div> 
    </div> 
</body> 
</html>

alt text

Có cách nào để tôi làm điều này? Một lần nữa, tôi muốn # innerstatic2 được chứa đúng trong #outerfixed và nhận thanh cuộn nếu nó lớn hơn không gian bên trong #outerfixed.

Tôi biết có một số khả năng để hack xung quanh điều này bằng cách sửa # innerstatic2, nhưng tôi thực sự muốn nó nằm trong luồng bên trong #outerfixed nếu có thể, để nếu tôi di chuyển #outerfixed ở đâu đó, phần tử bên trong sẽ đi kèm với nó.

EDIT: Tôi biết tôi có thể thiết lập tràn: tự động trên #outerfixed và có được một thanh cuộn trên toàn bộ điều, nhưng tôi đặc biệt muốn một thanh cuộn chỉ trên # innerstatic2, nó là một lưới và tôi muốn di chuyển chỉ lưới .

Bất kỳ ai? Khả thi?

Nguồn

2010-10-01 Einar Egilsson

Đây là div vùng chứa phải thuộc tính tràn: thuộc tính tự động. Trong trường hợp này, các div #outerfixed

Nguồn

2010-10-01 07:00:08

Xin lỗi, tôi cần phải có được rõ ràng hơn. Tôi rõ ràng muốn thanh cuộn chỉ ở trên phần tử # innerstatic2. Đó là một lưới và tôi muốn cuộn chỉ lưới, chứ không phải toàn bộ vùng chứa. –

Có một giải pháp hai bước cho điều này, nhưng nó đi kèm với một cái gì đó của một chi phí:

Thêm overflow-y: scroll; đến css cho #innerstatic2.
định nghĩa một height (hoặc max-height) cho #innerstatic2, nếu không nó sẽ không tràn, nó sẽ chỉ tiếp tục tăng chiều cao của nó (mặc định cho một div là height: auto).

Sửa vì tôi chỉ không thể ngăn bản thân mình, đôi khi.

Tôi đã đăng bản trình diễn trên jsbin để hiển thị triển khai jQuery này, sẽ tính height cho bạn (nó không được khái quát hóa, vì vậy nó sẽ chỉ hoạt động với html hiện tại của bạn).

(function($) { 
    $.fn.innerstaticHeight = function() { 
     var heightOfOuterfixed = $('#outerfixed').height(), 
     offset = $('#innerstatic2').offset(), 
     topOfInnerstatic2 = offset.top, 
     potentialHeight = heightOfOuterfixed - topOfInnerstatic2; 

     $('#innerstatic2').css('height',potentialHeight); 
    } 
})(jQuery); 

$(document).ready(
    function() { 
     $('#innerstatic2').innerstaticHeight(); 
    } 
);

Nguồn

2010-10-01 07:01:14

Cảm ơn bạn đã trả lời. Trên thực tế đây là khá nhiều những gì chúng ta có ngày hôm nay, tính toán chiều cao phù hợp cho # innerstatic2 và thiết lập với jquery. Nhưng điều này gây ra vấn đề với một thành phần bên thứ ba tính toán một số kích thước không chính xác khi chúng ta lộn xộn với điều này trong tài liệu sẵn sàng, vì vậy đó là lý do tại sao tôi thực sự muốn có một giải pháp CSS tinh khiết. –

Vì vậy, không có cách nào để buộc cuộn trên # innerstatic2 bằng cách đặt chiều cao trên #outerfixed? Từ những gì tôi đã thử nó có vẻ không, # innerstatic2 chỉ chảy bên ngoài nếu tôi thiết lập một chiều cao rõ ràng trên #outerfixed, nhưng đó là bởi vì nó là vị trí: cố định? –

Có thể. Bạn cũng có thể thêm 'overflow: hidden' vào css cho' # outerfixed', nhưng điều đó không * trông * đặc biệt đẹp, thật không may. –

Cách duy nhất tôi tìm, là để thiết lập innerstatic2 đến vị trí tuyệt đối (do đó bạn có thể sử dụng trên và dưới để kích thước nó liên quan đến outerfixed), sau đó bên innerstatic2 tạo một div nơi bạn đặt văn bản của mình vào. Sau đó, bạn cung cấp cho innerstatic2 "overflow: auto;" dấu hiệu. Hạn chế của phương pháp này, rằng innerstatic2 không di chuyển xuống, khi innerstatic1 phát triển, vì nó phải là vị trí tuyệt đối. Nếu nó cần phải di chuyển, nó phải là "vị trí: tương đối", nhưng sau đó bạn cần phải thiết lập một chiều cao cố định cho nó. Vì vậy, một trong hai cách bạn phải giải quyết cho một sự thỏa hiệp.

Khi tất cả các trình duyệt hỗ trợ các tính năng CSS3 mới hơn, như hỗ trợ tính toán, sẽ có các tùy chọn tốt hơn để thực hiện việc này mà không có những hạn chế này.

Nguồn

2010-10-01 15:41:14

Không lý tưởng, nhưng điều này sẽ giúp bạn có 90% số họ cách

<div style="position:fixed; bottom:1px; left:5em; height: 20em; width:20em; background-color:blue;"> 
     <div style ="width:15em; background-color: green;"> 
       Title 
     </div> 
     <div style ="background-color:yellow; max-height:80%; width:15em; overflow:auto;"> 
       <div style="height:100em; background-color:red; width:10em;"> 
         scroll<br/> 
         scroll<br/> 
         scroll<br/> 
       </div> 
     </div> 
</div>

Nguồn

2011-01-20 19:39:35 SooDesuNe

bạn nên thiết lập chiều cao cho outerfixed và max-height cho innerstatic2

thấy điều này có thể hữu ích DEMO

Nguồn

2012-09-24 06:29:06 Afshin

overflow-y:scroll;

Và thêm mục này cho thiết bị iOS. Nó cung cấp cho một cuộn tốt hơn bằng cách sử dụng cảm ứng. Overflow-y cần phải cuộn! vì lý do an toàn. tự động sẽ không hoạt động đối với một số người. hoặc ít nhất đó là những gì tôi nghe.

-webkit-overflow-scrolling: touch;

Nguồn

2014-05-14 17:46:47 Dyrehauge

Tôi giải quyết nó bằng cách cho vị trí tuyệt đối đến ul và chiều cao 100%

ul { 
    overflow-y: scroll; 
    position: absolute; 
    height: 100%; 
}

check out this FIDDLE

Nguồn

2014-08-06 07:50:26

Giải pháp này ẩn phần cuối của 'ul' (nó không hiển thị trường hợp' li' cuối cùng) – sjbuysse

cảm ơn, đã cứu mạng tôi :) –

Div với thanh cuộn bên trong div có vị trí: cố định

Trả lời

Các vấn đề liên quan