Auto height content DIV/Always bottom footer

Results 1 to 2 of 2

Thread: Auto height content DIV/Always bottom footer

  1. #1
    Join Date
    Oct 2012
    Posts
    2

    Exclamation Auto height content DIV/Always bottom footer

    Hi guys, I'm trying to create a page that has:

    - keeping footer DIV at the bottom of the page
    - Making content DIV 100% of the browser height unless content is taller than DIV height.
    - CSS rounded corners of DIVs (content/footer).

    I'm using curvycorners.js that's attached here.

    So, the structure of the webpage would be something like:

    HTML:
    <div id="site-wrapper">
    <div id="site-header"> Header goes here </div>
    <div id="site-content">Content goes here</div>
    <div id="site-footer">Footer goes here</div>
    </div>



    CSS:
    body
    {
    margin: 0px;
    padding: 0px;
    background-color: #FFF;
    height: 100%;

    }


    #site-wrapper {
    padding: 0px;
    width: 1024px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    }


    #site-header {
    margin: 0px;
    padding: 0px;
    float: left;
    height: 115px;
    width: 100%;
    }



    #site-content{

    position:absolute;
    top:130px;
    padding-top: 10px;
    bottom:30px;
    width: 1024px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 8px;
    color: #3e3e3e;
    text-align: left;
    background-color: #f3f3f3;
    vertical-align: top;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    }


    #site-footer {
    display:block;
    position: absolute;
    bottom: 0;
    height: 20px;
    width: 1024px;
    background-color: #666;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.75em;
    font-weight: normal;
    color: #FFF;
    text-align: center;
    vertical-align: middle;
    vertical-align: middle;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    padding-top: 10px;
    }


    I have a problem when the content DIV is taller the screen, I cannot get the height automatically adjusted with the footer DIV appearing at the bottom of the page! Am I doing something wrong here? Necessary amendments should work in all browsers, please!

    I appreciate if you have any suggestions.

    Thanks!
    Attached Files

  2. #2
    Join Date
    Oct 2012
    Posts
    2

    Unhappy Any suggestions?

    Please let me know if you have any suggestions. Thanks!

Posting Permissions

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


More ASP Resources

Resources:
-- ASP Articles
-- ASP.NET Information
-- 4Guys ASP F.A.Q.
-- ASPFAQs.com
-- ASP Coding Tips
-- Related Web Technologies
-- User Tips!!
-- JavaScripts


Development Centers
-- HTML5 Development Center
-- Windows Mobile Development Center
-- Android Development Center
-- Cloud Development Project Center


Development Technology
Check out these sites for more articles, tutorials, FAQs, discussions, and code!
-- CodeGuru.com
-- VBForums.com
-- DevX.com
-- Developer.com
-- HTMLGoodies