homepage Welcome to WebmasterWorld Guest from 54.227.20.250
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
div rows 100% browser height
greencode

5+ Year Member



 
Msg#: 4621231 posted 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#: 4621231 posted 12:52 pm on Nov 5, 2013 (gmt 0)

Sounds like a job for jQuery.

drhowarddrfine

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4621231 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4621231 posted 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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4621231 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4621231 posted 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

5+ Year Member



 
Msg#: 4621231 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4621231 posted 9:02 am on Nov 6, 2013 (gmt 0)

No problem, you're very welcome. ;)


birdbrain

brandozz



 
Msg#: 4621231 posted 1:08 pm on Nov 6, 2013 (gmt 0)

Great solution! I bookmarked this one for future reference

drhowarddrfine

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4621231 posted 10:06 pm on Nov 6, 2013 (gmt 0)

Yeah, nvm. Had two topics mixed up.

birdbrain

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4621231 posted 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