HTML/CSS Div does not continue all way down

Question

I'm trying to make a website with a static side bar and scrollable text. I can't really find the reason why my content-divider doesn't continue all way down. I'm also wondering if it's better practice to make content-divider fixed or continuing it at the very bottom. See how the page won't fit in the grey divider

Here's my code so far:

HTML:

<div id="content">
    <div id="sidebar">
        <p>This is sidebar</p>
    </div>      
    <div id="page">
        <p>This is page</p>
        ...
    </div>
</div>

CSS:

#content {
    height: 100%;
    background-color: lightgrey;
    background-attachment: fixed;   /* THIS DOES NOT WORK */
    margin: auto;
    width: 80%;
}
#sidebar {  
    margin-top: 10%;
    text-align: right;
    position: fixed;
    bottom: 0;
    float: left;
    width: 34%;
    height: 70%;
}
#page {
    float: right;
    width: 54%;
}

P.S. I managed to solve this by adding overflow: auto; to page-divider but I don't really like having that scrollbar on the page.

Answer 1

I suppose in your CSS you also have html,body {height:100%} and by defining height:100% to the content you limit its content to browser size thus the background won't continue and you will have overflow. Use min-height instead of height. You are also using float, so you need to clear it using overflow:auto

html,body {
  height: 100%;
}

#content {
  min-height:100%;
  overflow:auto;
  background-color: lightgrey;
  margin: auto;
  width: 80%;
}

#sidebar {
  margin-top: 10%;
  text-align: right;
  position: fixed;
  bottom: 0;
  float: left;
  width: 34%;
  height: 70%;
}

#page {
  float: right;
  width: 54%;
}

<div id="content">
  <div id="sidebar">
    <p>This is sidebar</p>
  </div>
  <div id="page">
    <p>This is page</p>
    <p>This is page</p>
    <p>This is page</p>
    <p>This is page</p>
    <p>This is page</p>
    <p>This is page</p>
    <p>This is page</p>
    <p>This is page</p>
    <p>This is page</p>
    <p>This is page</p>
    <p>This is page</p>
    <p>This is page</p>
    <p>This is page</p>
    <p>This is page</p>
    ...
  </div>
</div>