如何使<div>总是全屏?

不管内容如何。

有可能做到吗?

当前回答

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

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

2015-11-22 00:42:20

其他回答

我用这个简单的方法解决了我的问题。此外，无论页面滚动多长时间，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*/
}

希望这能有所帮助。

2022-04-23 00:18:49

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

2014-05-28 09:44:01

这对我来说总是有效的:

<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高兴)。

2009-11-12 02:31:17

不幸的是，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>

2009-11-12 02:34:23

这应该工作，虽然我没有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>

2009-11-12 08:48:01

如何使<div>总是全屏?

推荐文章

最新文章

标签