Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 20
  1. #1
    New Coder
    Join Date
    Dec 2006
    Posts
    95
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Condensing a page to full height of browser.

    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.

    http://moth.homelinux.com/~scriptdaemon/test.html

    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.

  • #2
    New Coder
    Join Date
    Dec 2006
    Posts
    95
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I still can't figure out how to accomplish this. Any help at all?

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    It appears at the bottom already so whats the problem?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #4
    New Coder
    Join Date
    Dec 2006
    Posts
    95
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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?

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #6
    New Coder
    Join Date
    Dec 2006
    Posts
    95
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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.

  • #7
    New Coder
    Join Date
    Dec 2006
    Posts
    95
    Thanks
    4
    Thanked 0 Times in 0 Posts
    This is more what I am talking about, just a div instead of an iframe.

    http://www.secretsphere.com/

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Yes it does. You can't say it doesn't require something if you don't know how it works.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    margin:0;
    padding:0;
    border:0;
    height:100%;
    background:#000;
    color:#FFF;
    font-size:13px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    }
    #container {
    padding-bottom:30px;
    }
    p {
    margin:0;
    padding:5px;
    }
    #footer {
    position:fixed;
    height:29px;
    border-top:1px solid #FFF;
    color:#000;
    text-align:center;
    line-height:29px;
    background:#FFA500;
    width:100%;
    z-index:1;
    bottom:0;
    left:0;
    }
    </style>
    <!--[if lte IE 6]>
    <style type="text/css">
    html {
    overflow-x:hidden;
    overflow-y:hidden;
    }
    body {
    overflow-y:auto;
    }
    #footer {
    position:absolute;
    width:expression(parseFloat(document.body.clientWidth));
    }
    </style>
    <![endif]-->
    </head>
    <body>
    <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>
    <div id="footer">This is the footer with <a href="http://moth.homelinux.com/~scriptdaemon/">link</a>.</div>
    </body>
    </html>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #9
    New Coder
    Join Date
    Dec 2006
    Posts
    95
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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.

  • #10
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Guess not. Explain yourself better. Did you try the code I posted?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #11
    New Coder
    Join Date
    Dec 2006
    Posts
    95
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    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
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #13
    New Coder
    Join Date
    Dec 2006
    Posts
    95
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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.)

  • #14
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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
    http://bonrouge.com/2c-hf-fluid.php
    then the same layout but without content
    http://bonrouge.com/2c-hf-fluid.php?nc
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #15
    New Coder
    Join Date
    Dec 2006
    Posts
    95
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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.
    Last edited by Scriptdaemon; 12-13-2006 at 06:51 AM.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •