div rows 100% browser height

Forum Moderators: not2easy

Message Too Old, No Replies

div rows 100% browser height

greencode

9:35 am on Nov 5, 2013 (gmt 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?

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)

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)

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)

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

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)

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)

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)

Yeah, nvm. Had two topics mixed up.

birdbrain

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

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