боковой панели не вытягивается вертикально

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; 
} 

Я знаю, что может быть много ненужных свойств ...

EDIT: Добавлен нижний колонтитул. Надеюсь, этого достаточно. вам нужно добавить много строк, чтобы они перекрывали нижний колонтитул при воспроизведении.

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;