侧边栏不垂直拉伸

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

试试这个...

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/

，如果这是不是你想要的，或者你需要更多的帮助，请评论回来 - 我很乐意提供帮助。

Answer 2

这是你的问题：

postition: absolute; 

这将删除正常流动的侧边栏，从而使其无法影响其他元素。尝试更换与：

float: right;