CODEWITHSUNDEEP
csshtml
repincln
repincln

Reputation: 2059

full screen div that fits browser size

I have a html document with div and css like this:

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

Menu is fixed, behindMenu is the same size as Menu and it is behind menu. Then I have logo and div with class full. After the full is div with class content.

When visit that page I want that div full will be (size) between logo and bottom od the browser size. So the full must have a height between logo and bottom of the browser size, even if I resize window. When scroll down then user will see The rest of content.

Something like this: http://strobedigital.com/

Here is fiddle: http://jsfiddle.net/2963C/

Upvotes: 9

Views: 86167

Answers (5)

Anon
Anon

Reputation: 2874

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%;}

Upvotes: 10

user742030
user742030

Reputation:

Unfortunately vh and vw is very buggy with iPhone but nearly all browsers (going way back) is happy doing some math for you:

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

Upvotes: 0

Tomek Kobyliński
Tomek Kobyliński

Reputation: 1308

There is a simple solution supported by all modern browsers.

div#full {
    height: 100vh;
}

The only notable exception is the Android below 4.3 - but only in the system browser (Chrome works ok).

Browser support chart: http://caniuse.com/viewport-units

Upvotes: 33

Rupesh
Rupesh

Reputation: 444

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

Here is fiddle with solution- http://jsfiddle.net/agrawal_rupesh/b7gwK/

Upvotes: 0

ParVathi
ParVathi

Reputation: 109

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

Upvotes: 2

Related Questions