在網頁中，CSS是非常重要的一部分，而其中有一個讓人非常感興趣的應用就是如何讓一個div全屏。在這里，我們將介紹一些實現這個效果的方法。
第一種方法是設置
所在的或元素的高度和寬度為100%。
<html>
<head>
<style>
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
div {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>第二種方法是使用vw和vh單位，vw單位指的是視口寬度的百分之一，vh單位指的是視口高度的百分之一。
<html>
<head>
<style>
div {
height: 100vh;
width: 100vw;
}
</style>
</head>
<body>
<div></div>
</body>
</html>需要注意的是，在使用這個方法時，一定要記得為視口設置標簽。
<meta name="viewport" content="width=device-width, initial-scale=1.0">第三種方法是使用JavaScript腳本來實現。我們可以使用document.documentElement.clientWidth和document.documentElement.clientHeight分別獲取視口的寬度和高度，并設置div的高度和寬度為這兩個值。
<html>
<head>
<style>
div {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body onresize="resize()"><div></div>
<script>
function resize() {
var h = document.documentElement.clientHeight;
var w = document.documentElement.clientWidth;
var div = document.getElementsByTagName('div')[0];
div.style.width = w + 'px';
div.style.height = h + 'px';
}
resize();
</script>
</body>
</html>無論你選擇哪種方法，都可以實現讓div全屏的效果。你可以根據你的情況選擇最適合你的方法。
上一篇mysql收購