css设置div高度满屏幕

CSS可以使用多种方法来让<div>元素的高度充满整个屏幕。这里有几个常见的方法：

百分比高度：如果你的父容器有固定的高度，你可以给div设置一个相对的百分比值，如 height: 100%;。这会让div的高度等于其父元素的100%。

div {
height: 100vh; /* 使用 viewport 的高度单位 vh */
}
登录后复制

固定像素高度 + flexbox 或 grid：如果想让div自适应屏幕高度并保持垂直居中，可以配合flexbox或grid布局，将div设为display: flex或display: grid，然后使用 align-items: stretch。

html, body {
height: 100%;
margin: 0;
}

.container {
display: flex;
align-items: stretch;
height: 100%;
}
登录后复制

JavaScript 动态设置：对于某些动态内容，可以结合JavaScript使用，例如获取窗口高度减去浏览器滚动条和其他边距。

function setDivHeightToScreen() {
const div = document.getElementById('myDiv');
div.style.height = window.innerHeight - window.scrollY + 'px';
}

window.addEventListener('resize', setDivHeightToScreen);
window.addEventListener('scroll', setDivHeightToScreen);
登录后复制
记得检查兼容性，上述方法可能在IE等老版本浏览器上有所限制。