Как блок растянуть до конца страницы?

Question

[Андрей Васоц]

Вообщем у меня имеется контент - сайдбар - футер

<section>
<div id="content">
</div>
</section>
<section>
<div id="sidebar">
</div>
</section>
<section>
<div id="footer">
</div>
</section>

#content {
		display:inline-block;
	float:right;
	width: 78%;
	
}
#sidebar {
	display:inline-block;
	float:left;
	width: 285px;
	height: 100%;
	background: #89a8d4;
	opacity: 0.8;
}
#footer {

}

Контент , как и сайдбар, растягивают блоки. Мне нужны сайбдар растянуть до конца страницы. Подскажите, как это сделать?

Answer 1

[Mark]

#content {
    display:inline-block;
  float:right;
  width:100%;
  
}

попробуйте так

Comments

[Андрей Васоц]

тогда получается контент займёт всю ширину страницы, а сайдбар и футер будет внизу.

Answer 2

[Сергей Горячев]

#content {
  width: calc(100% - 285px - .35em);
}

Тебя совсем не смущает, что inline-block и float противоречат друг другу?

Comments

[Андрей Васоц]

Всё так же и остаётся. Моя задача растянуть сайдбар до конца страницы ( сейчас он на кнопке заканчивается)

[Сергей Горячев]

Андрей Васоц: А слабо сделать пример на jsfiddle.net?

[Сергей Горячев]

Андрей Васоц: И куда растянуть? В сторону? Или вниз?

[Андрей Васоц]

Sergey Goryachev: https://jsfiddle.net/200Ld6sw/

[Андрей Васоц]

Sergey Goryachev: Просто вниз, до конца страницы( на 2 скрине видно(

[Антон Вебсайтовский]

Андрей Васоц, походу ни кто не понял, хотя пример понятный у тебя )