homepage Welcome to WebmasterWorld Guest from 54.211.235.255
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
div rows 100% browser height
greencode




msg:4621233
 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




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

Sounds like a job for jQuery.

drhowarddrfine




msg:4621352
 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




msg:4621458
 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




msg:4621469
 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




msg:4621489
 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




msg:4621494
 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




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

No problem, you're very welcome. ;)


birdbrain

brandozz




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

Great solution! I bookmarked this one for future reference

drhowarddrfine




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

Yeah, nvm. Had two topics mixed up.

birdbrain




msg:4621689
 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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved