Viewport Height for Full Screen Div? - CSS-Tricks

This topic is empty.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
January 24, 2014 at 10:11 am #161079

jor133d
Participant

I have a DIV element that needs to fill the entire screen until the user scrolls and reveals the content. So essentially remain at the viewports height.

Here is what I did and it works, but it’s only compatible with newer browsers.

`.section-full {
height:100vh;
min-height:100vh;

}`

Is there a way to do this that has a bit more compatibility? Will I need Javascript?

I tried the absolute method with height and width set to 100%, however, the content below then overlaps.

Any help would be appreciated!!

January 24, 2014 at 10:17 am #161080

Paulie_D
Member

Will I need Javascript?

Probably.

January 24, 2014 at 10:25 am #161081

jor133d
Participant

Should I start a new discussion in the javascript section or will people be able to provide some assistance here?

January 24, 2014 at 5:18 pm #161095

Alen
Participant

Something like this:

http://codepen.io/anon/pen/wjpKn

January 25, 2014 at 8:01 am #161109
paulob
Participant
I may be missing the point a little but you would just set html,body to height:100% and then you can set your div to height:100% .

Or if there is no content in this div then use the pseudo element on the body to create the height (IE8+ + all others).
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html,body{height:100%;margin:0;padding:0}
body:before{
    content:"";
    width:100%;
    height:100%;
    display:block;
    background:red; 
}
</style>
</head>
<body>
<p>lorem ispsum</p>
</body>
</html>
```
December 5, 2015 at 1:20 am #235612

behia
Participant

Helped me! thanks.
Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

The forum ‘CSS’ is closed to new topics and replies.