如何让<div>始终全屏？

Question

不管它的内容是什么样的。

可以这样做吗？

Answer 1

这对我来说总是有效：

<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
        html, body {
            height: 100%;
            margin: 0;
        }

        #wrapper {
            min-height: 100%; 
        }
    </style>
    <!--[if lte IE 6]>
    <style type="text/css">
        #container {
            height: 100%;
        }
    </style>
    <![endif]-->
</head>

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

这可能是这个问题最简单的解决方案。只需要设置四个 CSS 属性（虽然其中之一只是为了让 IE 开心）。

Answer 2

这是我使用纯 CSS 创建全屏 div 的解决方案。它显示一个持续滚动的全屏 div。如果页面内容适合屏幕，页面将不会显示滚动条。

在 IE9+、Firefox 13+、Chrome 21+ 中测试

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title> Fullscreen Div </title>
  <style>
  .overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(51,51,51,0.7);
    z-index: 10;
  }
  </style>
</head>
<body>
  <div class='overlay'>Selectable text</div>
  <p> This paragraph is located below the overlay, and cannot be selected because of that :)</p>
</body>
</html>

Answer 3

这是最稳定（且简单）的方法，并且它适用于所有现代浏览器：

.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 中的模拟）。}

Answer 4

使用现代浏览器执行此操作的最佳方法是使用 Viewport-percentage Lengths，对于不支持这些单位的浏览器，回退到常规百分比长度。

视口百分比长度基于视口本身的长度。我们在这里使用的两个单位是

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

元素的大小也会相应调整。

Answer 5

这应该可行，尽管我没有 IE 来测试。

<html>
<head>
    <title>Hellomoto</title>
    <style type="text/css">
        .hellomoto
        {
            background-color:#ccc;
            position:absolute;
            top:0px;
            left:0px;
            width:100%;
            height:100%;
            overflow:auto;
        }
        body
        {
            background-color:#ff00ff;
            padding:0px;
            margin:0px;
            width:100%;
            height:100%;
            overflow:hidden;
        }
        .text
        {
            background-color:#cc00cc;
            height:800px;
            width:500px;
        }
    </style>
</head>
<body>
<div class="hellomoto">
    <div class="text">hellomoto</div>
</div>
</body>
</html>

Answer 6

这是基于

vh

的最短解决方案。请注意，

vh

在某些较旧的浏览器中不受支持。

更新：我发布这篇文章已经四年了。同时，大多数浏览器应该支持这一点。

CSS：

div {
    width: 100%;
    height: 100vh;
}

HTML：

<div>This div is fullscreen :)</div>

Answer 7

将

body

元素更改为 Flex 容器，将

div

更改为 Flex 项目：

body {
  display: flex;
  height: 100vh;
  margin: 0;
}

div {
  flex: 1;
  background: tan;
}

<div></div>

Answer 8

我发现最好的优雅方式如下，这里最技巧是制作

div

的

position: fixed

。

.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>

Answer 9

这是我使用的技巧。适合响应式设计。当用户尝试调整浏览器大小时，效果非常好。

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

Answer 10

使用全屏 API 和

:fullscreen

伪选择器，任何元素都可以切换全屏模式。

注：

Stackoverflow 不允许全屏模式 (
```
document.fullscreenEnabled
```
)，因此该代码片段无法在此处演示
```
requestFullscreen()
```
方法。

我知道这个问题不需要 jQuery。我正在使用一个库来简化事件绑定。当然可以使用 vanilla 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>

参考资料：

Answer 11

我能够用这个简单的解决方案解决我的问题。另外，无论页面滚动多久，div始终保持全屏状态。

#fullScreenDiv {
  position: fixed;
  top: 0;
  bottom: 0;      
  left: 0; /*If width: 100%, you don't need it*/
  right: 0; /*If width: 100%, you don't need it*/
}

希望这有帮助。

Answer 12

嘿，这对我有用

#splashScreen{
        background-color:white;
        position:absolute;
        top:0px;
        left:0px;
        width:100%;
        height:100%;
        overflow:auto;
        max-width: 2000px;

  }

Answer 13

不幸的是，CSS 中的

height

属性并不像应有的那样可靠。因此，必须使用 JavaScript 将相关元素的高度样式设置为用户视口的高度。是的，这可以在没有绝对定位的情况下完成......

<!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>

如何让<div>始终全屏？

问题描述投票：0回答：13

13个回答

最新问题

如何让<div>始终全屏？

问题描述 投票：0回答：13

13个回答

最新问题

问题描述投票：0回答：13