Welcome to WebmasterWorld Guest from 54.163.54.95

Forum Moderators: not2easy

Message Too Old, No Replies

div rows 100% browser height

     
9:35 am on Nov 5, 2013 (gmt 0)

Junior Member

5+ Year Member

joined:July 4, 2007
posts: 189
votes: 0


I've seen some layouts now where you have a 100% full browser height div, you then scroll to the next div row on the page and that too then fills 100% browser height. Any ideas on how this is achieved?
12:52 pm on Nov 5, 2013 (gmt 0)

Junior Member

joined:June 6, 2012
posts: 104
votes: 0


Sounds like a job for jQuery.
5:09 pm on Nov 5, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:May 23, 2005
posts:742
votes: 0


You can use plain javascript to measure the viewport height and size the divs accordingly. There are several methods such as getClientHeight.

I've been up all night and woozy and can't think of anything else right now.
1:09 am on Nov 6, 2013 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 2, 2003
posts: 970
votes: 23


Hi there greencode,

Any ideas on how this is achieved?


Yes, no problem, try it like this...


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">

<title>100% height boxes</title>

<style>
html,body {
height:100%;
margin:0;
}
.full-size {
position:relative;
float:left;
width:100%;
height:100%;
box-shadow:inset 0 0 20px rgba(0,0,0,0.75);
}
.full-size:before {
content:'Look No Javascript';
position:absolute;
top:20px;
right:20px;
bottom:20px;
left:20px;
padding:20px;
border:3px double rgb(0,0,0);
font-size:200%;
text-align:center;
box-shadow:inset 0 0 10px rgba(0,0,0,1.0);
}
#div0 {
background-color:rgb(255,0,0);
}
#div1 {
background-color:rgb(0,0,255);
}
#div2 {
background-color:rgb(0,255,0);
}
#div3 {
background-color:rgb(0,255,255);
}
#div4 {
background-color:rgb(255,0,255);
}
</style>

</head>
<body>

<div id="div0" class="full-size"></div>
<div id="div1" class="full-size"></div>
<div id="div2" class="full-size"></div>
<div id="div3" class="full-size"></div>
<div id="div4" class="full-size"></div>

</body>
</html>


birdbrain
2:57 am on Nov 6, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:May 23, 2005
posts:742
votes: 0


@birdbrain The problem with doing it that way is the html and body elements are only as high as the viewport which may cause problems.
8:32 am on Nov 6, 2013 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 2, 2003
posts: 970
votes: 23


Hi there drhowarddrfine,

Did you not bother to test your assertion?

...I've been up all night and woozy and can't think of anything else right now...

Perhaps your wooziness may be lingering. :)

So you are forgiven. ;)

There is still no javascript in here...


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">

<title>100% height boxes</title>

<style>
html,body {
height:100%;
margin:0;
}
.full-size {
position:relative;
float:left;
width:100%;
height:100%;
box-shadow:inset 0 0 20px rgba(0,0,0,0.75);
overflow:auto;
}
.container {
padding:50px;
font-size:300%;
}
#div0 {
background-color:rgb(255,0,0);
}
#div1 {
background-color:rgb(0,0,255);
}
#div2 {
background-color:rgb(0,255,0);
}
#div3 {
background-color:rgb(0,255,255);
}
#div4 {
background-color:rgb(255,0,255);
}
</style>

</head>
<body>

<div id="div0" class="full-size"></div>
<div id="div1" class="full-size"></div>
<div id="div2" class="full-size">
<div class="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
ultricies sollicitudin nisi, ut molestie felis adipiscing sit
amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae
faucibus felis. Vivamus at metus eget eros consequat fringilla.
Quisque magna magna, laoreet eu tempus sit amet, fringilla at
tellus. Praesent felis tortor, scelerisque vitae fringilla
non, porttitor et lacus. Ut ut sapien nec quam tincidunt
consectetur in nec lacus.
</p><p>
Phasellus porta, dui a elementum egestas, odio sapien rhoncus
lorem, vitae bibendum erat sem eget sapien. Maecenas ut metus
ac quam pellentesque lacinia quis sit amet augue. Fusce eu
euismod urna. Nunc volutpat scelerisque tempus. Donec eget arcu
et mauris scelerisque tristique. Donec fringilla mauris dolor,
sit amet vulputate lacus. Nulla feugiat mattis nulla non
tincidunt. Nam sit amet dolor eros, a viverra lacus. Nunc quis
nisi eget neque tempus facilisis eu quis sapien.
</p>
</div>
</div>
<div id="div3" class="full-size"></div>
<div id="div4" class="full-size"></div>

</body>
</html>



birdbrain
8:57 am on Nov 6, 2013 (gmt 0)

Junior Member

5+ Year Member

joined:July 4, 2007
posts: 189
votes: 0


Wow, stunning work birdbrain - really appreciate this and exactly what I was trying to figure out. Thanks so much for taking the time out to help.
9:02 am on Nov 6, 2013 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 2, 2003
posts: 970
votes: 23


No problem, you're very welcome. ;)


birdbrain
1:08 pm on Nov 6, 2013 (gmt 0)

Junior Member

joined:June 6, 2012
posts: 104
votes: 0


Great solution! I bookmarked this one for future reference
10:06 pm on Nov 6, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:May 23, 2005
posts:742
votes: 0


Yeah, nvm. Had two topics mixed up.
10:33 pm on Nov 6, 2013 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 2, 2003
posts: 970
votes: 23


Hi there drhowarddrfine,

Yeah, nvm.


Oh, I don't mind. ;)

Due to your extenuating circumstances, I have, as I
wrote in a previous post, completely exonerated you.:)

birdbrain