侧边栏不会垂直拉伸

Question

添加内容时，我的侧边栏不会垂直拉伸。 如何才能使用HTML和CSS来增长？

html代码：

<div id="main">
    <section>
    a lot of text here...
    </section>
    <div id="sidebar">
    a lot of text here...
    </div>
</div>
<footer>
Copyright © domain.com 2014
</footer>

css代码：

#main{
    background: #ffffff;
    width: 60%;
    margin: auto;
    padding: 20px;
    position:relative;
}

section{
    width: 75%;
    margin: 40px 0;
    padding: 0;
    line-height: 1.5em;
    min-height: 100px;
}

#sidebar{
    width:150px;
    position: absolute;
    margin: 60px 0 0 10px;
    padding: 0 20px 0 20px;
    right:0;
    bottom:0;
    top:0;
    line-height: 1.5em;
}

footer{
    width: 60%;
    background-color: #700505;
    text-align: center;
    padding: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin: auto;
    margin-bottom: 20px;
    color: #ffffff;
}

我知道那里可能会有很多不需要的属性......

编辑：现在添加页脚我希望这已经足够了。在重现时，你必须添加很多行以使它与页脚重叠。

Answer 1

这是你的问题：

postition: absolute;

这会从正常流程中移除侧边栏，从而不会影响其他元素。尝试将其替换为：

float: right;

Answer 2

试试这个......

的CSS：

#main{
background: #ffffff;
width: 60%;
margin: auto;
padding: 20px;
position:relative;
}

section{
width: 55%;
display:inline-block;
vertical-align:top;
margin: 40px 0;
padding: 0;
line-height: 1.5em;
min-height: 100px;
}

#sidebar{
width:150px;
display:inline-block;
margin: 60px 0 0 10px;
padding: 0 20px 0 20px;
 vertical-align:top;
right:0;
bottom:0;
top:0;
line-height: 1.5em;
}

footer{
width: 60%;
background-color: #700505;
text-align: center;
padding: 20px;
padding-top: 10px;
padding-bottom: 10px;
margin: auto;
margin-bottom: 20px;
color: #ffffff;
}

http://jsfiddle.net/zsdutj9p/

如果这不是您想要的，或者您需要更多帮助，请回复 - 我很乐意为您提供帮助。