不管内容如何。

有可能做到吗?


当前回答

这是我创建一个全屏div的解决方案,使用纯css。 它在滚动时显示一个持久的全屏div。 如果页面内容适合屏幕,页面就不会显示滚动条。

在IE9+, Firefox 13+, Chrome 21+测试

<!doctype html > < html > < >头 <meta charset="utf-8" /> <title>全屏Div </title> . <时尚> .overlay { 位置:固定; 宽度:100%; 高度:100%; 左:0; 上图:0; 背景:rgba(51岁,51,51岁,0.7); z - index: 10; } > < /风格 > < /头 <身体> <div class='overlay'>可选文本 <p>这个段落位于覆盖层的下面,因此不能被选择:) 身体< / > < / 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的仿真)。

在现代浏览器中做到这一点的最好方法是使用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元素也会相应地调整大小。

嘿,这招对我很管用

# splashScreen { 背景颜色:白色; 位置:绝对的; 上图:0 px; 左:0 px; 宽度:100%; 高度:100%; 溢出:汽车; max-width: 2000 px; }

使用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

这就是我使用的技巧。适合响应式设计。工作完美时,用户试图与浏览器调整大小混乱。

<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
        #container {
            position: absolute;
            width: 100%;
            min-height: 100%;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <div id="container">some content</div>
</body>