不管内容如何。

有可能做到吗?


当前回答

这对我来说总是有效的:

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

其他回答

将body元素更改为一个flex container,将div更改为一个flex item:

身体{ 显示:flex; 身高:100 vh; 保证金:0; } div { flex: 1; 背景:棕褐色; } < div > < / div >

这对我来说总是有效的:

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

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

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

希望这能有所帮助。

这是我创建一个全屏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 >