Html 边栏被页脚截断

我在自己的网站上工作，这仍然是非常非常业余的，但我遇到了一个我自己似乎无法解决的问题

我刚刚添加了一个包含内容的侧栏（没有什么特别的，只是一些填充文本），但是页脚会切断侧栏的文本，而不是主要内容的文本

这是我的HTML：

<div id="content">
    <div id="main">
        <h1>PHP</h1>
    </div>
    <div id="sidebar">
        <h2>Sidebar</h2>

        <p>
        Hello, this is just some filler tekst. Blablabla blabl blabla blabla blblbla blablalbabla blablalbl.<br>
        <br>
        As you can see, it's positioned well.
        </p>
    </div>
</div>

<div id="footer">
<p>Made by me 2014</p>
</div>

对不起，我知道有很多要读，但我希望你能帮我

我的问题是：页脚不会随着侧栏中的文本移动，它会将其截断，但当主div中添加了文本时，页脚会移动

有人能帮忙吗

---

Max

同样的问题，但在将位置从绝对位置更改为相对位置时，侧边栏在立柱下方移动

.sidebar-wrapper {
  width: 300px;
  position: absolute;
  right: 0px;
  margin: 25px 0;
  padding: 0 20px;
  border: medium none;
  top: 0;
  bottom: 0;
  display: block;
}

---

外带

溢出：自动是>>>它（点击：：JSFiddle）@BeatAlex：我把它放在那里是为了尝试修复它，但忘了把它拿走。没有修好它P@Benio：是的。这就是我想要实现的。在你的答案中添加更多的描述。兄弟，请访问此链接并转到页面底部。侧边栏是重叠的页脚
.sidebar-wrapper {
  width: 300px;
  position: absolute;
  right: 0px;
  margin: 25px 0;
  padding: 0 20px;
  border: medium none;
  top: 0;
  bottom: 0;
  display: block;
}