要使div与页面/文档大小相同,可以使用CSS和JavaScript来实现。
CSS方法:
- 使用绝对定位和top、bottom、left、right属性将div定位到页面的四个角落。div {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
div {
flex: 1;
}
- 使用flex布局将div充满整个页面。
JavaScript方法:
- 使用window对象的resize事件监听页面大小变化,并将div的宽高设置为与页面相同。window.addEventListener('resize', function() {
var div = document.getElementById('myDiv');
div.style.width = window.innerWidth + 'px';
div.style.height = window.innerHeight + 'px';
});var div = document.getElementById('myDiv');
div.style.width = 'calc(100vw - ' + (window.innerWidth - document.documentElement.clientWidth) + 'px)';
div.style.height = 'calc(100vh - ' + (window.innerHeight - document.documentElement.clientHeight) + 'px)';
- 使用CSS的calc函数结合JavaScript动态计算div的宽高。
以上方法可以使div与页面/文档大小相同,适用于需要全屏展示内容的场景,如全屏背景图、全屏轮播等。
腾讯云相关产品推荐: