0

I have made a very simple site. You can see the page (code below) here: https://googledrive.com/host/0B2uK7byfkiwySHc5eU5CM25kcmM/index.html

My problem is the content div (with the sample code, right below the navigation bar). I need it to reach until the footer. I need it to reach until the footer no matter how I resize the page, never going under it, nor leaving too much room between it and the footer.

I would be ok with it not reaching the bottom if the content inside it does not require it do so, however, if the content is scrollable, I need it to reach until the footer. Also, I don't want the whole page to scroll, only this content div.

I have tried many solutions (a container div, tables, jquery resizing, etc.) unsuccessfully, and am a loss to how this can be accomplished. So, I uploaded the basic code without my solutions to see if someone could help 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 a { 
      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 IS PEACE </p>
        <p> FREEDOM IS SLAVERY </p>
        <p> IGNORANCE IS STRENGTH </p>

    </div>

    <div id = "footer">Footer</div>

  </body>
</html>
delta
  • 13
  • 1
  • 4
  • Duplicate of http://stackoverflow.com/questions/3937372/making-a-div-extend-all-the-way-down-to-the-bottom-of-the-page – Adam Mar 24 '14 at 20:55
  • take a look into sticky footer : http://ryanfait.com/sticky-footer/ – ntgCleaner Mar 24 '14 at 21:35
  • @Adam, I have seen that qs before - and tried the solution again just now to make sure that it is different. That is simply trying to keep a footer at the bottom of the page. I am trying to make a always visible footer that sits at the bottom of the screen, so no scrolling for the page at all, just the content div. – delta Mar 24 '14 at 21:40
  • @ntgCleaner, I don't want the page to scroll at all, the sticky footer doesn't solve that (at least I couldn't figure out a way to). – delta Mar 24 '14 at 21:41
  • Alright, if you want to keep your footer always at the bottom, just `position:fixed;` it to the bottom. Make your content 100% height of your body and then place your actual content inside of another div that allows scrolling. This way you can keep your content div any height you want – ntgCleaner Mar 24 '14 at 22:04
  • @ntgCleaner, I think I figured that part out. I just don't know how to make the height of the div where I will put the content so that it reaches right above the footer, regardless of how I resize the page. – delta Mar 24 '14 at 22:22

2 Answers2

0

Look at this jsFiddle.

Let me know if this is not what you were looking for.

.title-bar {
    position: fixed;
    width: 100%; 
    top: 0;
    background-color: #ccc;
}
Siva
  • 396
  • 6
  • 12
  • Kinda. Is there a way I can make the middle div scrollable, instead of the entire page? – delta Mar 24 '14 at 23:53
  • Sorry, what do you mean my middle div and not entire page? Right now, header and footer are static/ fixed. Content div is the only one that scrolls. Can you please elaborate middle div being scrollable? – Siva Mar 25 '14 at 00:16
  • I fixed it, and can show you if you want. But, my problem is that I wanted a scroll bar only in the middle div. I wanted it clear that the page itself was static. While your fix did the same thing at the end, it did it in a different way :) – delta Mar 25 '14 at 15:35
  • I see what you are saying... I have done that recently for one of my projects. – Siva Mar 25 '14 at 17:21
0

Take a look at this fiddle: http://jsfiddle.net/c92z2/

I think I understand what you're saying and I got a great answer from here: CSS 100% height with padding/margin

He writes about a great way to stretch a 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;
}
Community
  • 1
  • 1
ntgCleaner
  • 5,865
  • 9
  • 48
  • 86
  • Thanks! I had actually gotten help and fixed it before I saw this, but I have implemented it pretty much the same way. This might actually be a little bit better, will be experimenting with it! – delta Mar 25 '14 at 15:37