Tôi đang cố tạo một div nửa trong suốt che toàn bộ màn hình. Tôi đã thử điều này:
#dimScreen
{
width: 100%;
height: 100%;
background:rgba(255,255,255,0.5);
}
Nhưng điều đó không bao phủ toàn bộ màn hình, nó chỉ bao gồm khu vực bên trong div.
Câu trả lời:
Thêm position:fixed. Sau đó, nắp được cố định trên toàn bộ màn hình, cũng như khi bạn cuộn.
Và có lẽ cũng có thể thêm margin: 0; padding:0;vì vậy nó sẽ không có một số khoảng trống xung quanh bìa.
#dimScreen
{
position:fixed;
padding:0;
margin:0;
top:0;
left:0;
width: 100%;
height: 100%;
background:rgba(255,255,255,0.5);
}
Và nếu nó không dính cố định trên màn hình, hãy sử dụng position:absolute;
CSS Tricks cũng có một bài viết thú vị về thuộc tính toàn màn hình.
Chỉnh sửa:
Chỉ mới xem câu trả lời này, vì vậy tôi muốn thêm một số điều bổ sung.
Giống như Daniel Allen Langdon đã đề cập trong nhận xét, top:0; left:0;hãy chắc chắn thêm rằng, tấm bìa dính ở phía trên và bên trái của màn hình.
Nếu bạn có một số yếu tố ở trên cùng của trang bìa (vì vậy nó không bao gồm tất cả mọi thứ), thì hãy thêm z-index. Con số càng cao, càng có nhiều cấp độ hơn.
top: 0; left: 0;
Bạn cần phải thiết lập các yếu tố phụ huynh đến 100%cũng
html, body {
height: 100%;
}
Demo (Đã thay đổibackgroundcho mục đích demo)
Ngoài ra, khi bạn muốn bao phủ toàn bộ màn hình, có vẻ như bạn muốn dim, vì vậy trong trường hợp này, bạn cần sử dụngposition: fixed;
#dimScreen {
width: 100%;
height: 100%;
background:rgba(255,255,255,0.5);
position: fixed;
top: 0;
left: 0;
z-index: 100; /* Just to keep it at the very top */
}
Nếu đúng như vậy, bạn không cần html, body {height: 100%;}
position:relative. Nó sẽ không làm việc. Đề xuất position:fixedthay thế.
Điều này sẽ thực hiện thủ thuật!
div {
height: 100vh;
width: 100vw;
}
Sử dụng position:fixedcách này div của bạn sẽ liên tục duy trì trên toàn bộ khu vực có thể xem ..
cung cấp cho div của bạn một lớp overlayvà tạo quy tắc sau trong CSS của bạn
.overlay{
opacity:0.8;
background-color:#ccc;
position:fixed;
width:100%;
height:100%;
top:0px;
left:0px;
z-index:1000;
}
#dimScreen{
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
}
Thử đi
#dimScreen {
width: 100%;
height: 100%;
background:rgba(255,255,255,0.5);
position: fixed;
top: 0;
left: 0;
}
Áp dụng css-reset để đặt lại tất cả các lề và phần đệm như thế này
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | Giấy phép 20110126: không có (miền công cộng) * /
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
Bạn có thể sử dụng các cài đặt lại css khác nhau khi bạn cần, bình thường và sử dụng trong css
html
{
margin: 0px;
padding: 0px;
}
body
{
margin: 0px;
padding: 0px;
}
Đặt html và thân thẻ heightđể 100%và loại bỏ bên lề xung quanh cơ thể:
html, body {
height: 100%;
margin: 0px; /* Remove the margin around the body */
}
Bây giờ, hãy đặt positiondiv của bạn thành fixed:
#dimScreen
{
width: 100%;
height: 100%;
background:rgba(255,255,255,0.5);
position: fixed;
top: 0px;
left: 0px;
z-index: 1000; /* Now the div will be on top */
}
hãy thử đặt lề và đệm thành 0 trên nội dung.
<body style="margin: 0 0 0 0; padding: 0 0 0 0;">
position: absolute; top: 0; left: 0;