Làm cách nào để thực hiện div 100% chiều cao của trang (không phải màn hình)?

Tôi đang cố gắng sử dụng CSS để tạo hiệu ứng 'chuyển sang màu xám' trên trang của tôi trong khi hộp tải được hiển thị ở nền trước trong khi ứng dụng đang hoạt động. Tôi đã làm điều này bằng cách tạo ra một chiều cao 100%/chiều rộng, mờ màu đen div trong đó có khả năng hiển thị của nó bật/tắt thông qua javascript. Tôi nghĩ điều này sẽ đủ đơn giản; Tuy nhiên, khi nội dung trang mở rộng đến điểm mà màn hình cuộn, di chuyển đến chân trang sẽ hiển thị một phần không bị chuyển sang màu xám. Nói cách khác, 100% chiều cao của div dường như đang áp dụng cho kích thước khung nhìn của trình duyệt, không phải kích thước trang thực tế. Làm thế nào tôi có thể làm cho div mở rộng để trang trải toàn bộ nội dung của trang? Tôi đã thử sử dụng JQuery .css ('height', '100%') trước khi bật tính năng hiển thị nhưng điều này không thay đổi gì cả.Làm cách nào để thực hiện div 100% chiều cao của trang (không phải màn hình)?

Đây là CSS của div trong câu hỏi:

div.screenMask 
{ 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    width: 100%; 
    height: 100%; 
    z-index: 1000; 
    background-color: #000000; 
    opacity: 0.7; 
    filter: alpha(opacity=70); 
    visibility: hidden; 
}

Cảm ơn.

Nguồn

2009-06-16 Lee D

Nó sẽ làm việc để vô hiệu hóa để di chuyển thanh trong khi bạn mờ div màu xám sẽ được hiển thị? Bạn có thực sự muốn người dùng có thể cuộn xuống để xem thứ gì đó mà họ không thể làm gì không? – Adam

Nếu bạn thay đổi position: absolute thành position: fixed, nó sẽ hoạt động trong tất cả các trình duyệt ngoại trừ IE6. Việc này sẽ sửa div thành khung nhìn, vì vậy nó không di chuyển ra khỏi chế độ xem khi cuộn.

Bạn có thể sử dụng $(document).height() trong jQuery để làm cho nó hoạt động trong IE6. Ví dụ.

$('.screenMask').height($(document).height());

Điều đó rõ ràng sẽ sửa nó cho tất cả các trình duyệt khác, nhưng tôi không thích sử dụng JavaScript nếu tôi có thể tránh nó. Bạn sẽ cần phải làm điều tương tự cho chiều rộng quá, thực sự, trong trường hợp có bất kỳ cuộn ngang.

Có plenty of hacks around to make fixed positioning work in IE6 quá, nhưng chúng có xu hướng áp đặt một số hạn chế khác trên CSS của bạn hoặc sử dụng JavaScript, vì vậy, chúng có thể không đáng để gây rắc rối.

Ngoài ra, tôi cho rằng bạn chỉ có một trong các mặt nạ này, vì vậy tôi khuyên bạn nên sử dụng ID cho nó thay vì một lớp.

Nguồn

2009-06-16 20:02:59 mercator

Nếu mặt nạ đang được hiển thị bằng Javascript, Javascript là gì hơn để khắc phục vấn đề về độ cao? –

Cảm ơn, thay đổi tuyệt đối thành cố định là tất cả những gì cần thiết! Điểm công bằng về ID cũng vậy. –

@Lee: Tuyệt vời ... @Paolo: Đây không phải là vấn đề ở đây, tôi phải đồng ý. Nhưng trong khi hỗ trợ JS không phải là vấn đề ở đây, bạn sẽ kết thúc phong cách pha trộn với hành vi, và bạn có thể (hơi) ảnh hưởng đến hiệu suất quá. Và Lee cũng trả lời câu hỏi của bạn. Giải pháp JavaScript không thực sự cần thiết trong trường hợp này. – mercator

Nếu bạn đang sử dụng jQuery để thiết lập chiều cao trước khi popup Tôi đoán đó là OK để thêm một số javascript hơn :)

Bạn có thể thiết lập chiều cao của div đến scrollHeight của document.body - theo cách này, nó sẽ bao phủ toàn bộ cơ thể. Bạn cần phải thêm một số thủ thuật phụ để đảm bảo nó giữ cơ thể che phủ trong trường hợp một cái gì đó bên dưới quyết định phát triển mặc dù.

Nguồn

2009-06-16 20:05:47 ylebre

div.screenMask 
{ 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    right: 0px; 
    bottom: 0px; 
    z-index: 1000; 
    background-color: #000000; 
    opacity: 0.7; 
    filter: alpha(opacity=70); 
    visibility: hidden; 
}

Bằng cách đặt tất cả các top, bottom, left, và right, chiều cao và chiều rộng sẽ được tự động tính toán. Nếu screenMask là con trực tiếp của phần tử <body> và mô hình hộp tiêu chuẩn có hiệu lực (tức là chế độ quirks chưa được kích hoạt), điều này sẽ bao gồm toàn bộ trang.

Nguồn

2009-06-16 20:26:26

Bạn không cần phải sử dụng 'vị trí: cố định' để ngăn div.screenMask khỏi cuộn, nếu trang cơ bản cao hơn một chiều cao khung nhìn? –

Tính năng này không hoạt động trong IE6. Trong các trình duyệt khác, nó cần vị trí: tương đối trên cơ thể để làm việc, và thậm chí sau đó nó chỉ hoạt động trên di chuyển dọc, không cuộn ngang. – mercator

Tôi nhận ra mình đang trả lời câu hỏi này rất lâu, sau khi được hỏi, nhưng tôi đã hạ cánh ở đây sau khi bị vấp ngã bởi vấn đề này và không có câu trả lời nào là chính xác.

Dưới đây là câu trả lời đúng:

body { 
    position: relative; 
}

Vậy là xong! Bây giờ phần tử của bạn sẽ được định vị tương ứng với <body> thay vì chế độ xem.

Tôi sẽ không bận tâm với position: fixed, vì hỗ trợ trình duyệt của nó vẫn giữ nguyên.Safari trước iOS 5 không hỗ trợ nó.

Lưu ý rằng phần tử <div> của bạn sẽ bao gồm hộp biên giới của <body> (hộp + đệm + đường viền), nhưng nó sẽ không bao gồm lề của nó. Bồi thường bằng cách đặt các vị trí phủ định trên <div> của bạn (ví dụ: top: -20px) hoặc bằng cách xóa biên độ của <body>.

Tôi cũng khuyên bạn nên đặt <body> thành height: 100% để đảm bảo bạn không bao giờ kết thúc với chế độ xem được che một phần trên trang ngắn hơn.

Hai điểm hợp lệ được lấy từ các câu trả lời trước. Như Ben Blank nói, bạn có thể mất các tuyên bố width và height, định vị tất cả bốn góc thay thế. Và mercator là đúng mà bạn nên sử dụng một ID thay vì một lớp học cho một yếu tố quan trọng như vậy.

này rời khỏi khuyến cáo CSS sau hoàn chỉnh:

body { 
    position: relative; 
    margin: 0; 
} 

#screenMask { 
    position: absolute; 
    left: 0; right: 0; 
    top: 0; bottom: 0; 
    z-index: 1000; 
    background-color: #000; 
    opacity: 0.7; 
    filter: alpha(opacity=70); 
    visibility: hidden; 
}

Và HTML:

<body> 
    <div id="screenMask"></div> 
</body>

Tôi hy vọng điều này sẽ giúp người khác!

Nguồn

2012-08-16 03:32:34

+1, tuy nhiên tôi sẽ chỉ ra rằng ngay cả đây là một cách tiếp cận có vấn đề khi thay đổi vị trí của vùng chứa cuộn đến tương đối có thể có hậu quả không lường trước được. May mắn cho tôi, hôm nay, hộp chứa cuộn của tôi đã được định vị tương đối! Bí quyết sử dụng 'vị trí: tuyệt đối' kết hợp với' left', 'right',' top', và 'bottom' là một cuộc sống thực sự tiết kiệm đôi khi, và luôn luôn dễ quên. –

Định vị tương đối so với 'body' gần như giải quyết nó, nhưng thiết lập chiều cao của cơ thể lên 100% không phải là giải pháp hữu ích: Trong khi nó sửa các trang không lấp đầy khung nhìn, nó phá vỡ các khung lớn hơn, tức là cơ thể sẽ chỉ có chiều cao của khung nhìn . Ngoài ra, thiết lập 'min-height: 100%' thành body dường như không làm gì cả (Firefox). –

Nếu bạn muốn popup với hiệu ứng lớp phủ sau đó bạn có thể sử dụng các bước ..

<style> 
.overlay{ 
background:#000; 
opacity:0.5; 
position:fixed; 
z-index:1; 
width:100%; 
height:100%; 
} 
.popup{ 
width:500px; 
margin:auto; 
position:fixed; 
z-index:2; 
height:300px; 
} 
</style> 
<div class="overlay"></div> 
<div class="popup"> 
     Hello everyone 
</div>

Nguồn

2014-09-18 12:43:27

Làm cách nào để thực hiện div 100% chiều cao của trang (không phải màn hình)?

Trả lời

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