cuộn lớp phủ div mà không cần cuộn toàn bộ trang

Tôi có một trang chính với một số nội dung trên đó. Sau đó tôi có một phương thức bật lên dài hơn màn hình chính vì vậy tôi phải cuộn để xem nó. Tôi cần phải làm gì với CSS của mình để chỉ thực hiện di chuyển div phương thức thay vì toàn bộ trang?cuộn lớp phủ div mà không cần cuộn toàn bộ trang

Đây là CSS cho các phương thức

#overlay { 
    visibility: hidden; 
    position: absolute; 
    left: 45%; 
    width:auto; 
    border:1px solid #A17E13; 
    height:auto; 
    text-align:left; 
    z-index: 1000; 
} 
#overlay div { 
    background-color:#FCFBEC; 
}

Dưới đây là HTML:

<html><body> 
    <div>main page</div> 
    <div id="overlay"> 
    <div> 
     <div> 
      <asp:Label ID="test">Text for modal here</asp:Label> 
     </div> 
    </div> 
    </div> 
</body></html>

Nguồn

2013-02-26 user541597

đâu là phần còn lại của mã của bạn. Với những gì bạn thấy nó là không thể nhìn thấy cấu trúc của bạn. –

là vậy. Cấu trúc đơn giản là div chính và sau đó là div riêng cho phương thức. – user541597

bạn có thể giới hạn phương thức của mình chỉ bằng kích thước của màn hình và không lớn hơn không? –

có toàn bộ trang không phải là cuộn trừ của div modal? nếu như vậy bạn có thể thử vị trí: cố định; trên trang. phương thức phải ở bên ngoài với vị trí: tuyệt đối;

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
#overlay { 
    /*visibility: hidden;*/ 
    position: fixed; 
    left: 45%; 
    width:auto; 
    border:1px solid #A17E13; 
    height:900px; 
    text-align:left; 
    background-color:orange; 
} 
.scroller { 
    height:3000px; 
    width:400px; 
    background-color:green; 
} 
</style> 
</head> 
<body> 
    <div id="overlay"> 
     this is not moving 
    </div> 

    <div> 
     <div class="scroller"> 
      <asp:Label ID="test">This is moving if big enough</asp:Label> 
     </div> 
    </div> 
</body> 
</html>

Fiddle here

Nguồn

2013-02-26 21:32:55 caramba

cuộn lớp phủ div mà không cần cuộn toàn bộ trang

Trả lời

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