View Full Version : Condensing a page to full height of browser.

12-12-2006, 12:14 AM
I want to make my page not overflow the browser window and only have the pageDiv use a scrollbar, yet I can't seem to accomplish this myself.


If you scroll to the very bottom, you'll find a login link and my copyright. I want this to be on the bottom of the page without having to scroll all the way down to get there, and only have the pageDiv (the id of the div tag that holds the content of the page) require a scrollbar, as I have seen done with other div tags.

I know how to get this to work if I define an absolute height like 400px, but I want it to be 100% of the space it is placed in, so it expands or shrinks based on how big the browser window is.

12-13-2006, 05:54 AM
I still can't figure out how to accomplish this. Any help at all?

12-13-2006, 05:56 AM
It appears at the bottom already so whats the problem?

12-13-2006, 05:58 AM
I guess I didn't explain it very well. I mean I want that part of the page to be at the bottom of the browser WITHOUT having to scroll down for it, and the content of the page will be in a div that will have a scrollbar. Make more sense now?

12-13-2006, 06:00 AM
So you want the footer to never leave the screen? Kind of like how this menu stays in place on this example? http://www.cssplay.co.uk/layouts/fixed.html

12-13-2006, 06:03 AM
I guess you could consider it like that, but I don't think what I want to do would require the same thing as that does.

12-13-2006, 06:06 AM
This is more what I am talking about, just a div instead of an iframe.


12-13-2006, 06:21 AM
Yes it does. You can't say it doesn't require something if you don't know how it works.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
html, body {
font-family:Verdana, Arial, Helvetica, sans-serif;
#container {
p {
#footer {
border-top:1px solid #FFF;
<!--[if lte IE 6]>
<style type="text/css">
html {
body {
#footer {
<div id="container">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc varius, metus et gravida tincidunt, enim metus euismod augue, eget facilisis diam magna sit amet ipsum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed arcu dolor, interdum eu, iaculis quis, rutrum in, turpis. Etiam malesuada, justo at pellentesque vulputate, justo sem sodales augue, ut facilisis ipsum turpis vel urna. Nam non tortor vitae risus vestibulum viverra. Etiam dictum ipsum suscipit elit. Integer vestibulum varius nibh. Integer urna ipsum, interdum nec, adipiscing quis, elementum ac, tortor. Praesent nulla. Praesent lobortis nunc id mi. In semper libero non mi. Vivamus semper bibendum nulla. Morbi pede nulla, iaculis non, luctus eu, vestibulum non, nunc. Morbi lorem elit, cursus nec, vulputate vitae, consectetuer at, ante. </p>
<p> Suspendisse potenti. Curabitur ut velit. Fusce faucibus velit quis lectus. Aliquam sem lectus, condimentum a, dignissim ut, tincidunt id, felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nullam feugiat leo ac augue. Praesent pellentesque mauris et turpis. Aenean vitae massa. Duis nonummy sollicitudin purus. Pellentesque commodo placerat justo. Curabitur congue quam ac nibh. Nulla facilisi. Nulla enim. Sed blandit lorem sed ante. Pellentesque adipiscing leo eu pede. Ut convallis placerat lectus. </p>
<p> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla sit amet libero. Curabitur blandit euismod ligula. Nunc suscipit nisi ac mi. Donec mattis rutrum nisi. Nullam elementum dolor nec risus. Maecenas malesuada suscipit lacus. Proin pulvinar vestibulum nibh. Vivamus ligula neque, interdum at, elementum quis, tincidunt ut, eros. Duis egestas. Fusce ut ligula. Vestibulum ac diam. Quisque tellus ipsum, varius pharetra, nonummy sed, convallis sed, nisl. In eget lorem vel magna consequat euismod. Nunc fermentum augue sit amet nisl. Praesent sit amet urna. </p>
<p> Quisque hendrerit facilisis mauris. Nulla dolor. Proin vehicula dui sed purus. Aliquam eleifend consequat eros. Aliquam velit lectus, malesuada in, ultricies id, tristique eget, ipsum. Proin gravida pretium turpis. Donec nec dui. Integer porta tellus in dui. Vivamus ornare, felis id condimentum tristique, metus ligula pharetra orci, in tempus leo felis a elit. Praesent molestie nunc sit amet mauris adipiscing tincidunt. Quisque tincidunt, dolor sit amet tempus auctor, ipsum est tincidunt odio, eu mattis magna nunc gravida metus. Sed nulla. Morbi egestas facilisis nibh. Mauris dui. Suspendisse faucibus. </p>
<p> In id diam. Curabitur iaculis ante ut nibh. Nullam eros pede, vestibulum quis, venenatis eget, fermentum non, mauris. Donec ornare ante et lacus. Suspendisse sollicitudin libero at leo. Nam auctor nisi ac mi. Etiam massa. Phasellus nisl pede, mattis at, varius eu, pretium et, arcu. Nulla id mi. Sed at dolor eu arcu interdum dapibus. Aliquam erat volutpat. </p>
<p> Sed velit nunc, nonummy vitae, interdum sed, cursus egestas, ipsum. Donec id neque eget est interdum convallis. Nullam feugiat urna in pede. Donec interdum. Sed metus sapien, pulvinar iaculis, consequat pretium, imperdiet sit amet, orci. Pellentesque posuere neque sit amet enim. Cras dignissim. Maecenas lobortis ultricies justo. Aliquam congue odio. Nunc arcu. Suspendisse potenti. Fusce fringilla quam vel nisi. Aenean in risus. Nulla tempus pretium ipsum. Cras viverra tristique lectus. Nunc lobortis nunc vitae diam. </p>
<p> Quisque ut mi. Fusce ac pede ut libero hendrerit tristique. Vestibulum in magna ac diam bibendum commodo. Suspendisse potenti. Vestibulum mi ligula, auctor vel, interdum eu, commodo sed, pede. Nam nonummy. Nunc facilisis pede nec diam. Proin vehicula pede tempus turpis tincidunt varius. Mauris lorem felis, scelerisque ac, imperdiet vel, vehicula eget, lacus. Nulla facilisi. Proin elementum dapibus pede. Etiam lobortis malesuada massa. Mauris sit amet erat. Suspendisse scelerisque, diam euismod gravida congue, neque neque scelerisque lectus, eu tempor enim est in enim. </p>
<p> Cras tincidunt rutrum tortor. Sed commodo libero ac est. Ut placerat nibh malesuada leo. Vestibulum et sem. Nam fermentum, nunc non commodo interdum, lacus purus facilisis urna, eu porttitor ipsum eros vestibulum diam. Maecenas ante leo, laoreet non, feugiat vel, rutrum viverra, ante. Phasellus tincidunt vestibulum nibh. In elementum. Nulla facilisi. Etiam lorem justo, adipiscing non, pulvinar dapibus, feugiat vel, nibh. Cras ornare justo. Vestibulum vulputate nisl ac tellus. </p>
<p> Nullam condimentum justo vitae dui. Etiam neque ante, lacinia molestie, laoreet eu, cursus et, est. Vestibulum porttitor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vestibulum a orci sit amet risus ullamcorper ultrices. Nam ante elit, tincidunt ac, elementum vel, rhoncus in, leo. Maecenas vulputate nonummy augue. Maecenas sodales tellus. Morbi scelerisque ornare felis. Sed tristique odio a diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
<p> Nulla facilisi. Vestibulum posuere est in nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer vehicula leo non tellus. Quisque purus. Sed sed lacus nec risus tincidunt rutrum. Donec ultricies. Fusce nibh risus, bibendum sed, porta sed, vulputate at, libero. Aliquam commodo ante in leo. In tellus enim, molestie pulvinar, dictum ornare, condimentum in, pede. Cras ipsum orci, rutrum sit amet, mattis vitae, viverra vel, libero. Sed ultricies sem et nibh. Nulla in est. Vestibulum est urna, rutrum nec, lacinia sed, suscipit in, elit. Quisque vestibulum convallis nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus at est. </p>
<div id="footer">This is the footer with <a href="http://moth.homelinux.com/~scriptdaemon/">link</a>.</div>

12-13-2006, 06:25 AM
Well, I've seen it done a different way which is the way I am thinking about, but was never able to find where I saw it again.

Unless the place I saw it had the div with an absolute height (as defined in px instead of a %).

I still don't think you quite understand exactly what I am looking for, also.

12-13-2006, 06:31 AM
Guess not. Explain yourself better. Did you try the code I posted?

12-13-2006, 06:34 AM
Guess not. Explain yourself better. Did you try the code I posted?

Maybe I am just thinking of a way that can't actually be done. I'll mess with what you gave me. Thanks.

12-13-2006, 06:37 AM
You probably aren't thinking of something that can't be done, you just don't know how to explain it properly. So now WHAT do you want the footer to do? From what I gathered you don't want it to move even if the content extends pass the screen.

12-13-2006, 06:42 AM
Well, if possible, I wanted to use it all with tables, however, the content of the page (JUST the part in the pageDiv) be in a div, and have that div act pretty much the same as an iframe. I've accomplished this by setting the div height to 400px, for example, but I can't figure out how to get it to work if I want to make it 100% so it expands and shrinks with the browser if you were to expand or shrink the browser (or if a client's resolution is different from someone else's.)

12-13-2006, 06:45 AM
And thats exactly what the code I gave you does unless you want the footer to move and you want it to be at the bottom of the content at all times and if there isn't enough content you want to be at the bottom of the browser window.

Something like this
then the same layout but without content

12-13-2006, 06:48 AM
Yeah, except it doesn't use all tables, to be technical. I'll use this though, thanks.

Edit: No, I want the footer to be at the bottom without having to scroll anywhere regardless if there's content or not and regardless if the content overflows.

12-13-2006, 06:49 AM
Why would you want to use tables? Tables aren't for page layout. You should read the article in my sig titled "Why Tables for Layout is Stupid?"

12-13-2006, 06:57 AM
Ah, I'll give it a read.

12-19-2006, 10:39 AM
Alright, I've changed the layout to use divs, but I am stuck on a few things.


Here is what I changed it to, and here are my problems:

1. I still can't figure out how to do what I initially wanted to do. Which was make the CONTENT DIV ONLY contain a scrollbar. Meaning, the scrollbar would not at all be to the right of the header or footer.
2. If you view it in IE, before the page content loads, the footer is just below the header, and not at the bottom of the screen where it should be.
3. Also in IE, the content of the page exceeds the width of the browser window.
4. In FF (not sure about IE, since those other problems would have to be fixed before I check this one in IE), I can't seem to center the copyright where it should be. It either centers itself for the entire page, or if I move the div to the left 125px, it moves the copyright more left than it should be. I left anything that messes with it in this sense out so you can see where exactly, horizontally aligned-wise, where it should be.

12-20-2006, 08:09 AM
Edit: I have it ALMOST working just the way I want it to. And maybe now that I have it almost working it will show off better what I want.


When the browser is maximized, it works for the most part. (At least for me, in both IE and FF.) However, when I resize the browser smaller it still overflows and makes the browser scrollbar appear, which I do not want. I want the bottom of the content div to stay just above the footer at all times. Also, when maximized, the bottom of the div is a little higher above the footer than I would like, but if I change the percentages at all again it makes it worse.

12-21-2006, 04:24 AM
Anyone at all have a solution for this?