在网页设计中,我们经常会遇到需要将某个元素占满整个屏幕的情况,比如全屏背景图或者悬浮框。针对这种情况,我们可以使用 CSS 来实现。
/* 让元素占满整个屏幕 */ element { height: 100vh; /* 100% Viewport Height */ width: 100vw; /* 100% Viewport Width */ } /* 全屏背景图 */ body { background-image: url(bg.jpg); background-size: cover; background-position: center; } /* 悬浮框 */ .popup { position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 50%; height: 50%; background-color: #fff; }
以上是几个常见的场景,通过设置元素的高度和宽度为视口高度和宽度即可让元素占满整个屏幕。如果需要全屏背景图,我们可以设置 body 的背景图片、尺寸和位置;如果需要悬浮框,我们可以将元素定位为 fixed,并将上下左右的边距设置为 0,再将宽度和高度设置为所需大小即可。