css - How to stretch a div from navigation bar to footer? -


i have made simple site. can see page (code below) here: https://googledrive.com/host/0b2uk7byfkiwyshc5eu5cm25kcmm/index.html

my problem content div (with sample code, right below navigation bar). need reach until footer. need reach until footer no matter how resize page, never going under it, nor leaving room between , footer.

i ok not reaching bottom if content inside not require so, however, if content scrollable, need reach until footer. also, don't want whole page scroll, content div.

i have tried many solutions (a container div, tables, jquery resizing, etc.) unsuccessfully, , loss how can accomplished. so, uploaded basic code without solutions see if me out :)

thanks!

<html>     <head>      <style type="text/css">      body {        background: #e6e6e6;      }      #title{       margin:0 0 0 0;       text-align: center; font-size:40px;        font-family: "league-gothic", courier;       color: #707070; font-weight:600;     }      #navbar ul {        margin: 0; padding: 5px;        list-style-type: none;        text-align: left; background-color: #005ab3;         border-top-left-radius: 5px;        border-top-right-radius: 5px;     }       #navbar ul li {         display: inline;        font-family: arial;     }       #navbar ul li {        text-decoration: none;        padding: .2em 1em;        color: #fff;        background-color: #005ab3;      }       #navbar ul li a:hover {        color: #005ab3;        background-color: #fff;      }       #content {       background-color: #fff; font-family: arial;       border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;       padding: 5px; padding-left: 15px; padding-right: 15px;        height: 70%;       overflow: auto;     }      #footer {       position: fixed;       bottom: 0; left:0; width: 100%;        background: #005ab3;        line-height: 2;       text-align: center; color: #fff;       font-size: 15px; font-family: sans-serif;      }      </style>     </head>      <body>       <div id = "title">title</div>        <div id = "navbar">         <ul>            <li><a id ="link1" href="#">link 1</a></li>            <li><a id ="link2" href="#">link 2</a></li>            <li><a id ="link3" href="#">link 3</a></li>          </ul>        </div>        <div id = "content">          <h1> sample content (1984)</h1>         <p>it </p>          <p>the </p>          <p>inside </p>         <p>outside,  </p>         <p>behind  </p>         <p>winston  </p>         <p>the </p>         <p> war peace </p>         <p> freedom slavery </p>         <p> ignorance strength </p>      </div>      <div id = "footer">footer</div>    </body> </html>

take @ fiddle: http://jsfiddle.net/c92z2/

i think understand you're saying , got great answer here: css 100% height padding/margin

he writes great way stretch content box.

.stretchedtomargin {     display: block;     position:absolute;     height:auto;     bottom:0;     top:0;     left:0;     right:0;     margin-top:20px;     margin-bottom:20px;     margin-right:80px;     margin-left:80px;     background-color: green; }

Comments

Post a Comment