46
Dưới đây là một ví dụ về vấn đề trong câu hỏi:CSS: Làm thế nào để lớp phủ này mở rộng 100% khi cuộn?
http://dev.madebysabotage.com/playground/overlay.html
Bạn thấy có một lớp phủ màu xám trên toàn bộ trang, nhưng nếu bạn di chuyển xuống, nội dung bên dưới trang tải ban đầu không có lớp phủ.
Tôi có #overlay div và có vẻ như nó không giữ được độ cao 100% trong khi cuộn, vì vậy, hãy cố gắng tìm ra cách để kéo nó đi.
Đây là nguồn đầy đủ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Overlay</title>
<style type="text/css">
html {
height: 100%;
min-height: 100%;
}
body {
height: 100%;
min-height: 100%;
font-family: Georgia, sans-serif;
}
#overlay {
background: rgba(0,0,0,0.4);
width: 100%;
height: 100%;
min-height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 10000;
}
header, section, footer {
width: 800px;
margin: 0 auto 20px auto;
padding: 20px;
background: #ff0;
}
section {
min-height: 1500px;
}
</style>
</head>
<body>
<div id="overlay"></div>
<header>
<h1>Header</h1>
</header>
<section>
<p>Here's some sweet content</p>
</section>
<footer>
<p>Here's my footer</p>
</footer>
</body>
</html>
Cảm ơn vì điều này! Đối với bất cứ ai khác đọc, vấn đề được cố định tại liên kết ở trên. Để tạo lại nó sử dụng Firebug hoặc tương tự để loại bỏ 'vị trí: cố định;' từ lớp phủ id :) – RyanM
3yrs sau đó và tôi có cùng một vấn đề :) 1 cho câu hỏi – Ljubisa