如何使<div>始终全屏显示？

Answers:

146

这总是对我有用：

<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满意）。

— 亚当·哈特
source
1
@AdamHarte如果从CSS中删除“ html”选择器，为什么它不起作用？→身体{身高：100％；边距：0; }
— Alex Prut 2014年
2
@ P.Alex Math！如果您的HTML标签高度可以拉伸以适合其内容，则主体高度为其父代的100％，那么您将不会强制其达到可用空间的100％。
— 亚当·哈特
1
我刚刚使用cefsharp铬在wpf中尝试了它，它起作用了:)
— adminSoftDK
106

这是我使用纯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>
展开摘要

— 米海奇库
source
58

这是最稳定（也是最简单）的方法，并且可以在所有现代浏览器中使用：

.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中的仿真）上工作。

— 敬畏
source
1
如果使用以下命令，效果会更好：position: fixed; top: 0; left: 0;现在使用的部分有所不同：width: 100%; height: 100%;。实际上，这在旧版浏览器中也可以正常使用。
— Aart den Braber
1
为什么使用宽度和高度比使用底部和右侧更好？如果您使用宽度和高度，并且还需要一些填充和/或边框，则还需要确保您具有box-sizing: border-box;，否则您将获得较大的框，这将导致滚动。看到这个。
— 敬畏
31

对于现代浏览器，最好的方法是利用视口百分比长度，对于不支持这些单位的浏览器，应使用常规的百分比长度。

视口百分比长度基于视口本身的长度。我们将在此处使用的两个单位是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大小，则元素将相应地调整大小。

— 詹姆斯·唐纳利
source
18

我没有IE Josh，请为我测试一下。谢谢。

<html>
<head>
    <title>Hellomoto</title>
    <style text="text/javascript">
        .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>
— 塔贝
source
您不需要将宽度设置为100％
— Adam Harte
我不明白 您正在DIV上硬编码800px的高度。OP希望这是动态的。
— 乔什·斯托多拉
抱歉，没有发现那里（或顶部/左侧）有绝对的潜行。好吧：)
— 亚当·哈特
附带说明一下，position: fixed如果页面可以滚动，则可能要使用它，但请注意，它不能在某些移动浏览器中使用caniuse.com/#feat=css-fixed
— luiges90 2013年
1
我听说有更多现代方法可以解决此问题。@Tubbe你知道那是真的吗？
— bzlm 2014年
8

我发现最好的优雅方式如下所示，这里最有趣的是make 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>
展开摘要

面具演示

— 田杰夫
source
8

变化body元素成flex container和div成flex item：

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

div {
  flex: 1;
  background: tan;
}
<div></div>
展开摘要

— 森
source
8

这是基于的最短解决方案vh。请注意，某些旧版浏览器vh不支持。

CSS：

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

HTML：

<div>This div is fullscreen :)</div>
— 寡糖
source
1
它很方便，但在移动浏览器中存在问题：css-tricks.com/the-trick-to-viewport-units-mobile-
— 亚历山大·金
为什么使事情复杂化？这可以在移动浏览器DuckDuckGo 5.54.0，Samsung Internet 11.2.1.3和Chrome 81.0.4044.138以及台式机上完成。勇敢者1.10.97，Chrome 83.0.4103.116和Safari 12.1.2。
— 雅各布
1

这是我使用的技巧。适用于响应式设计。当用户尝试改变浏览器的大小时，效果很好。

<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>
— 沙杜尔
source
-8

不幸的是，heightCSS中的属性不够可靠。因此，必须使用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>
— 乔什·斯托多拉
source
1
如果您使用的是jQuery之类的库（推荐），$(window).height();最好通过来获取高度。
— 乔什·斯托多拉
有纯CSS解决方案吗？
— 面膜
@面具没有，没有。仍然没有。
— 乔什·斯托多拉
@Jed您如何尝试将最小高度：100％应用于Mac-Safari，也许我们可以在此处找到解决方案。我认为这比争论平台要好。
— 乔什·斯托多拉
3
可以在IE7，Chrome3和Safari4和Opera10中使用。全部在Windows上测试。缺点是它使用javascript，这是Mask想要避免的事情（请参阅他对此答案的评论）。TandemAdam的答案是纯CSS，并且可以在我测试过的所有浏览器（Opera除外）上使用。
— 敬畏
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.