Home/ Questions/Q 7068521
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T05:20:03+00:00

I am working on some homework. I cannot get the footer to fit properly

  • 0

I am working on some homework. I cannot get the footer to fit properly at the bottom of the page not matter how much I fill each individual page…can anyone give me a pointer? The width and height of the wrapper div have to be set to the presets. I want the footer to sit at the bottom of the page. Body content should be filled and the footer should be sitting at the bottom of the page. The top should be 50px into the bottom of the body.

body
{
    background-color:           #ffffff;
}
.wrapper
{
    width:                          960px;
    height:                         700px;
    background-color:               #D3D1C2;
    margin-left:                    auto;
    margin-right:                   auto;   
    margin-top:                     20px;
}
.masthead
{
   height:                          150px;
   width:                           960px;
   background-color:                #000;
}

#nav-wrapper 
{
   width:                           960px;
   margin:                          0 auto;
   padding:                     20px 0;
   background:                      #3D3331;
}
 ul#nav 
 {
   font-family:                     Verdana;
   font-size:                       14px;
   list-style:                      none;
   margin:                          0 auto;
   padding:                     0;
   width:                           960px;
   overflow:                        auto;
  }
 ul#nav li 
   {
   display:                     inline;
   }
  ul#nav li a
  {
   text-decoration:             none;
   display:                         block;
   padding:                     5px 21px;
   background:                      #5F3222;
   color:                           #eee;
   float:                           left;
   text-align:                      center;
   border-top:                      2px solid #815444;
   border-right:                    2px solid #3d1000;
   border-bottom:                   2px solid #3d1000;
   border-left:                 2px solid #815444;
}
ul#nav li a:hover 
{
   background:                      #a37666;
   color:                           #000;
   border-top:                      2px solid #815444;
   border-right:                    2px solid #c59888;
   border-bottom:                   2px solid #c59888;
   border-left:                 2px solid #815444;
}
 .body
 {


 }
 .footer
  {
  clear:                            both;
  width:                            960px;
  height:                           50px;
  background:                       #000;
      margin-bottom:                    10px;
 }
 h1
 {
   text-align:                      center;
 }

HTML:

<html>
<head>
    <!--I am using TextWrangler to do my html css editing on my Mac-->
    <link rel="stylesheet" type="text/css" href="style.css" />
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet'      type='text/css'>
<title>
    KG Doors
</title>
</head>
<body>
    <div class="wrapper">  
    <div class="masthead">

    </div><!--end the masthead div -->
    <div id="nav-wrapper">
    <ul id="nav">
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">Services</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</div>
<div class="body">
    <br/>KG Doors offers replacement of:
    <br/>- Springs
    <br/>- Cables
    <br/>- Openers
    <br/>- Keypads
    <br/>- Transmitters
    <br/>- Garage Doors
    <br/>- Sections

</div><!--end the body div -->
<div class="footer">

</div><!--end the footer div -->
</div><!--end the wrapper div -->

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Let’s Create a sticky footer!

    We’ll start out with some nice clean markup:

    <header>
    <h1>A beautiful header!</h1>
</header>

<section id="pagebody">
    <p>My long page body...</p>
    <p>My long page body...</p>
    <p>My long page body...</p>
    <p>My long page body...</p>
    <p>My long page body...</p>
    <p>My long page body...</p>
    <p>My long page body...</p>
    <p>My long page body...</p>
</section>

<footer>
    <p>A beautiful footer!</p>
</footer>

    …and we’ll add some basics to our CSS:

    body, h1, footer p { margin: 0 }

header, footer {
    color: #333;
    vertical-align: middle;
}

header {
    height: 80px;
    padding-left: 20px;
    line-height: 80px;
    background: #d2006b;
}
footer {
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #FFE700;
}

#pagebody {
    padding: 20px;
    background: #00A67C;
}

#pagebody p { margin: 160px 0 }

#pagebody p:first-child { margin-top: 0 }
#pagebody p:last-child { margin-bottom: 0 }

    To achieve a “sticky” footer (a footer that sticks to the bottom of the page), set height:100%; on the <html> and <body> elements. This will prevent the element from shrinking vertically to the size of its contents:

    html, body { height:100% }

    Then set a box-sizing of border-box (this is css3 so add your desired vendor prefixes), and a min-height of 100% on the #pagebody element (main page container):

    #pagebody {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    min-height:100%;
    padding: 20px;
    background: #00A67C;
}

    Now that the main container of the page has a minimum height of 100% the footer should be pushed down below the viewport (so you have to scroll to see it).

    Next, on the #pagebody element, add a top padding that is equal to the height of the header (80px) and a bottom padding that is equal to the height of the footer (40px):

    #pagebody {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    min-height: 100%;
    padding: 100px 20px 60px; /* I already had a 20px padding so I just added 20px to 80px for the new top padding, and added 20px to 40px for the new bottom padding. */
    background: #00A67C;
}

    Next, on the #pagebody element, add a negative top margin equal to the height of the header, and a negative bottom margin that is equal to the height of the footer:

    #pagebody {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    min-height:100%;
    padding: 100px 20px 60px;
    margin: -80px 0 -40px;
    background: #00A67C;
}

    Then add position:relative; to the header element so it is not underneath the #pagebody:

    header {
    position: relative;
}

    And we’re done! Try taking out some of the paragraphs in the example. The footer still sticks to the bottom of the page! 🙂
    I hope this was helpful!

    -Daniel

    • 0