Welcome to WebmasterWorld Guest from 54.167.82.170

Forum Moderators: not2easy

Message Too Old, No Replies

div rows 100% browser height

     

greencode

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

5+ Year Member



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?

brandozz

12:52 pm on Nov 5, 2013 (gmt 0)



Sounds like a job for jQuery.

drhowarddrfine

5:09 pm on Nov 5, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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.

birdbrain

1:09 am on Nov 6, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

drhowarddrfine

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

WebmasterWorld Senior Member 10+ Year Member



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

birdbrain

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

WebmasterWorld Senior Member 10+ Year Member



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

greencode

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

5+ Year Member



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.

birdbrain

9:02 am on Nov 6, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



No problem, you're very welcome. ;)


birdbrain

brandozz

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



Great solution! I bookmarked this one for future reference

drhowarddrfine

10:06 pm on Nov 6, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Yeah, nvm. Had two topics mixed up.

birdbrain

10:33 pm on Nov 6, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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
 

Featured Threads

Hot Threads This Week

Hot Threads This Month