全屏div适合浏览器大小

时间:2013-08-07 06:43:02

标签: css html

我有一个带有div和css的html文档,如下所示:

<html>
<head>
    <title></title>
    <style text="text/javascript">
    body { padding:0px; margin:0px; }
    .full { background-color: yellowgreen; width: 100%; height: 100%; }
    .menu { height: 50px; width: 100%; background-color: black; position: fixed; }
    .behindMenu { height: 50px; width: 100%; }
    .logo {width: 100%; height: 150px;}
    .content {background-color: yellow;}
    </style>
</head>
<body>
<div class="menu">Menu</div>
<div class="behindMenu"></div>
<div class="logo">Logo</div>
<div class="full">Full div</div>
<div class="content">The rest content</div>
</body>
</html>

菜单是固定的,后面菜单与菜单大小相同,位于菜单后面。然后我有徽标和div与课程满。完全是div后的课程内容。

当访问该页面时,我希望div满的将是(尺寸)在徽标和底部之间的浏览器大小。因此,即使我调整窗口大小,完整的标识和浏览器大小的底部之间也必须有一个高度。向下滚动时,用户将看到剩余的内容。

像这样:http://strobedigital.com/

这是小提琴:http://jsfiddle.net/2963C/

5 个答案:

答案 0 :(得分:33)

所有现代浏览器都支持简单的解决方案。

div#full {
    height: 100vh;
}

唯一值得注意的例外是Android 4.3以下 - 但仅限于系统浏览器(Chrome工作正常)。

浏览器支持图表:http://caniuse.com/viewport-units

答案 1 :(得分:9)

HTML

<html>
<head>
    <title></title>
    <style text="text/css">
    body { padding:0px; margin:0px; }
    .full { background-color: yellowgreen; width: 100%; height: 100%; }
    .menu { height: 50px; width: 100%; background-color: black; position: fixed; }
    .behindMenu { height: 50px; width: 100%; }
    .logo {width: 100%; height: 150px;}
    .content {background-color: yellow;}
    </style>
</head>
<body>
<div class="wrapper">
<div class="menu">Menu</div>
<div class="behindMenu"></div>
<div class="logo">Logo</div>
<div class="full">Full div</div>
<div class="content">The rest content</div>
</div>
</body>
</html>

CSS

html,body{height:100%;}
.wrapper{min-height:100%; position:relative}
.full{position:absolute; top:0; left:0; width:100%; height:100%;}

答案 2 :(得分:2)

 .full { min-height: 100%; height:auto;}

答案 3 :(得分:0)

<html>
<head>
    <style text="text/javascript">
    html,body{height:100%;}
.wrapper{min-height:100%; position:relative}
.full{position:absolute; left:0; width:100%; min-height:100%;}
.menu { height: 50px; width: 100%; background-color: black; position: fixed; }
.behindMenu { height: 50px; width: 100%; }
.logo {width: 100%; height: 150px;}
.content {background-color: yellow;}
    </style>
</head>
<body>
<div class="wrapper">
<div class="menu">Menu</div>
<div class="behindMenu"></div>
<div class="logo">Logo</div>
<div class="full">Full div</div>
</div>
    <div class="content">The rest content</div>
</body>
</html>

这里有解决方案 - http://jsfiddle.net/agrawal_rupesh/b7gwK/

答案 4 :(得分:0)

不幸的是vhvw对于iPhone来说是非常错误的,但几乎所有的浏览器(回去)都很乐意为你做一些数学运算:

html,body {
  height:100%;
  margin:0;
}

.full {
  height: calc(100% - 50px); /* Minus menu height */
  min-height: calc(100% - 50px); / *for Mozilla */
}

html>body .full {
  height:auto;
}