側邊欄不垂直拉伸

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;