Question

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

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

这是我的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>

这是我的CSS：

#content {
background          :   linear-gradient(#669900, #66FF99); /* Gradient -                        Standaard */
background          :   -moz-linear-gradient(#669900, #66FF99); /* Gradient  - Firefox */
background-repeat   :   no-repeat;
background-attachment:  fixed;
/*margin-left       :   185.5px;
  margin-right      :   185.5px;*/
margin              :   0 auto;
width               :   980px;
position            :   relative;
padding             :   20px 0 25px 0;
border-left         :   5px solid lightgreen;
border-right        :   5px solid lightgreen;
}

#main {
padding             :   0 30px 0 30px;
margin-right        :   200px;
}

#sidebar {
position            :   absolute;
top                 :   0;
bottom              :   0;
left                :   780px;
width               :   180px;
float               :   right;
margin              :   0 10px 0 10px;
overflow            :   auto;
}

#sidebar h2 {
text-align          :   center;
margin-left         :   -15px;
}

抱歉，我知道这很重要，但我希望你能提供帮助。

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

有人可以帮忙吗？

最高

Answer 1

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

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

边栏被页脚切断

1 个答案: