SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Thread: full Height

  1. #1
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    full Height

    http://dot.kr/x-test/style/autoHeight.php has the code below.
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>autoHeight</title>
    <style>
    .central{text-align:center}
    .central div{
      vertical-align:middle;
     display:inline-block;
     border:1px solid #000;
     border-radius:5px;
     padding:5px;
    }
    </style>
    </head>
    <body>
    <div class="central">
    <div>top</div>
    </div>
    <div class="central">
    <div>bottom</div>
    </div>
    </body>
    </html>
    I like to put "bottom box" to the bottom of the browser regardless of the size of the browser.
    http://dot.kr/x-test/style/autoHeight01.php which has the code below is one of trials for it.
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>autoHeight01</title>
    <style>
    .hiP100{height:100%}
    .central{text-align:center}
    .central div{
      vertical-align:middle;
     display:inline-block;
     border:1px solid #000;
     border-radius:5px;
     padding:5px;
    }
    </style>
    </head>
    <body class="hiP100">
    <div class="central">
    <div>top</div>
    </div>
    <div class="central">
    <div>bottom</div>
    </div>
    </body>
    </html>
    However, it seems not to work as I expected.
    How can I put the bottom box to the bottom of the full browser?

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,578
    Mentioned
    63 Post(s)
    Tagged
    2 Thread(s)
    Use a sticky footer design and put the bottom box in the footer.

    Paul gives excellent examples with a detailed explanation of how they work right here, just for you:
    http://www.sitepoint.com/forums/show...66#post1239966


Bookmarks

Posting Permissions

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