不管内容如何。
有可能做到吗?
当前回答
将body元素更改为一个flex container，将div更改为一个flex item:
身体{ 显示:flex; 身高:100 vh; 保证金:0; ｝ div { flex: 1; 背景:棕褐色; ｝ < div > < / div >
其他回答
在现代浏览器中做到这一点的最好方法是使用Viewport-percentage length，对于不支持这些单位的浏览器，使用常规的百分比长度。
视口百分比长度基于视口本身的长度。我们在这里使用的两个单位是vh(视口高度)和vw(视口宽度)。100vh等于视口高度的100%，100vw等于视口宽度的100%。
假设有以下HTML:
<body>
<div></div>
</body>
你可以使用以下方法:
html, body, div {
/* Height and width fallback for older browsers. */
height: 100%;
width: 100%;
/* Set the height to match that of the viewport. */
height: 100vh;
/* Set the width to match that of the viewport. */
width: 100vw;
/* Remove any browser-default margins. */
margin: 0;
}
下面是一个JSFiddle演示，演示了div元素填充结果帧的高度和宽度。如果你调整了结果帧的大小，div元素也会相应地调整大小。
使用Fullscreen API和:Fullscreen伪选择器，任何元素都可以切换全屏模式。
注意:
Stackoverflow不允许全屏模式(document.fullscreenEnabled)，因此代码段不能在这里演示requestFullscreen()方法。
我认识到这个问题不需要jQuery。我正在使用一个库来简化事件绑定。当然，香草JS也可以代替。
const ns = { img_click: (e) => { if (document.fullscreenElement) { document.exitFullscreen(); console.log('exited fullscreen'); } else { console.log('entering fullscreen'); e.currentTarget.requestFullscreen(); } } }; $('body').on('click', 'img', ns.img_click); console.log('Fullscreen allowed:', document.fullscreenEnabled); .gallery { display: flex; gap: 1em; } img { width: 100px; aspect-ratio: 1/1; border-radius: .5em; cursor: zoom-in; object-fit: cover; } img:fullscreen { width: 100%; aspect-ratio: auto; object-fit: contain; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="gallery"> <img src="https://picsum.photos/id/123/500/250" alt="Random image" /> <img src="https://picsum.photos/id/234/250/500" alt="Random image" /> <img src="https://picsum.photos/id/345/500/500" alt="Random image" /> </div>
引用:
https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API https://developer.mozilla.org/en-US/docs/Web/CSS/:fullscreen
我发现最优雅的方法是像下面这样，这里最技巧的是使div的位置:固定。
.mask { background-color: rgba(0, 0, 0, 0.5); position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: 0; box-sizing: border-box; width: 100%; height: 100%; object-fit: contain; } <html> <head> <title>Test</title> </head> <body> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <div class="mask"></div> </body> </html>
这是最稳定(和简单)的方法，在所有现代浏览器中都适用:
.fullscreen { position: fixed; top: 0; left: 0; bottom: 0; right: 0; overflow: auto; background: lime; /* Just to visualize the extent */ } <div class="fullscreen"> Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa. Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa. Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa. Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa. </div>
测试工作在Firefox, Chrome, Opera, Vivaldi, IE7+(基于在IE11的仿真)。
不幸的是，CSS中的height属性并不像它应该的那样可靠。因此，必须使用Javascript来将所讨论元素的height样式设置为用户视口的高度。是的，这可以在没有绝对定位的情况下完成……
<!DOCTYPE html>
<html>
<head>
<title>Test by Josh</title>
<style type="text/css">
* { padding:0; margin:0; }
#test { background:#aaa; height:100%; width:100%; }
</style>
<script type="text/javascript">
window.onload = function() {
var height = getViewportHeight();
alert("This is what it looks like before the Javascript. Click OK to set the height.");
if(height > 0)
document.getElementById("test").style.height = height + "px";
}
function getViewportHeight() {
var h = 0;
if(self.innerHeight)
h = window.innerHeight;
else if(document.documentElement && document.documentElement.clientHeight)
h = document.documentElement.clientHeight;
else if(document.body)
h = document.body.clientHeight;
return h;
}
</script>
</head>
<body>
<div id="test">
<h1>Test</h1>
</div>
</body>
</html>
