Home/ Questions/Q 8846461
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T11:59:28+00:00

I created a navigation bar for my school project (I’m doing basic design, then

  • 0

I created a navigation bar for my school project (I’m doing basic design, then we’re adding the mysql database), and the bar works great, but it does not extend to the bottom of the page, it’s just a little box right now.

Here’s my style script

style type='text/css'>
#navigation {
 display:block;
 width:150px;
 float:left;
 margin-left:7px;
 margin-right6px;
 margin:5px;
 border-style:solid;
}
#navhead {
 text-align:center;
 margin-left:7px;
 margin-right:6px;
}
#links {
 display:block;
 width:60px;
}
</style>

Am I missing any attributes that say ‘extend to bottom of frame?’

Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to use the height property. You can set the height to 100% (the height of this parent, so the <body>) but it will looks weird, because it will render the height + the padding + border + margin.
    You need to use the border-box property with the height. It allows you to define if the padding and/or border (or none, by default) are count in the height and width properties. You also needs to kill the margin-top and margin-bottom.
    After those changes, here what your CSS should look like : 

    #navigation {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    display: block;
    width: 150px;
    height: 100%;
    float: left;
    margin-left: 7px;
    margin-right: 5px;
    border-style: solid;
}
    • 0