Рассчитать высоту дочернего div путем вычитания высоты другого ребенка Div из родительского Div

Question

У меня есть страница с секцией заголовка, левой боковой панелью, контентом и нижним колонтитулом. Смотрите мой jsfiddle здесь: https://jsfiddle.net/maryjames0/3vxdzga6/.

Вот HTML:

<div id="container"> 
    <div id="header"> 
Some Header Content 
    </div> 
    <div id="main"> 
    <div id="sidebar"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec placerat sodales neque, in varius est accumsan id. Ut nec fringilla purus, et sodales erat. Fusce pretium dapibus erat. Aenean ornare in felis quis commodo. Duis vulputate tellus sed faucibus aliquet. Suspendisse erat enim, laoreet sit amet enim sollicitudin, varius efficitur arcu. Maecenas molestie fringilla dolor, non pulvinar ante ullamcorper bibendum.</p> 
     <p>Curabitur quam magna, tempor in posuere vestibulum, porta at est. Fusce cursus leo vel arcu rhoncus dapibus. Fusce vel dictum lectus. Curabitur ligula elit, cursus ac lorem at, interdum fermentum arcu. Morbi eleifend tincidunt justo a tempor. Nulla quis egestas enim, vel iaculis nisi. Duis eros arcu, pulvinar aliquam ante eu, euismod commodo tellus. Phasellus egestas, nulla eu dictum finibus, eros massa aliquam massa, a volutpat sem urna ut purus. Duis egestas erat felis, sed scelerisque elit molestie tincidunt. Phasellus ac lorem ut dolor imperdiet varius. Quisque dapibus dui vitae urna pretium, a tincidunt urna sagittis. Vivamus quis accumsan ex. Mauris in ornare nisl, eu auctor mi. Mauris arcu risus, pharetra vel metus eu, feugiat tristique lectus. Aliquam erat volutpat. Vivamus ex lorem, pellentesque in pharetra ac, vulputate et massa.</p> 
    </div> 
    <div id="content"> 
     <div id="top"> 
     <p>Curabitur rhoncus quis diam quis tristique. Fusce aliquam lobortis elit. Duis dapibus maximus interdum. Praesent vitae mi venenatis, tincidunt enim ac, malesuada urna. Sed mollis massa at felis bibendum dapibus. Nunc vel sodales justo, at ultrices quam. Nullam in ornare sem. Praesent vestibulum interdum orci, in dignissim eros. Nunc lobortis, ligula id pellentesque sodales, sapien erat accumsan tellus, et finibus nunc eros auctor est. Integer sem odio, tincidunt sed purus sed, porta lacinia magna. Nulla sed sollicitudin risus. Aenean pulvinar maximus dui id luctus. Donec accumsan fermentum ante, ut gravida augue interdum ut. Quisque volutpat blandit luctus. Duis mollis eu odio gravida dictum. Nullam interdum tortor sit amet semper bibendum.</p> 
     </div> 
     <div id="bottom"> 
     <p>Etiam euismod mattis sem pretium fringilla. Nunc lobortis ante diam, ac feugiat sem consectetur in. In non neque mattis, elementum ante ornare, blandit metus. Morbi eu sapien id elit sagittis commodo. Morbi sed velit eget dui vestibulum faucibus mattis vel lacus. Vestibulum a fringilla risus. Nulla convallis, lacus ut suscipit hendrerit, nisi lacus interdum neque, a commodo mauris diam in enim. Donec venenatis, nulla eu elementum ultrices, mi est vestibulum lectus, vel eleifend mi nisi quis lectus. Suspendisse commodo, risus id porttitor gravida, ex odio vulputate magna, eget elementum lectus mauris ac turpis. Nulla feugiat vestibulum viverra. Nullam vitae justo tristique purus tincidunt fermentum. Cras pretium purus elit, non interdum felis fermentum quis.</p>  
     </div> 
    </div> 
    </div> 
    <div id="footer"> 
    Some Footer Content 
    </div> 
</div> 

И CSS:

#container {max-width: 1125px; margin-right: auto; margin-left: auto;} 
#header {background-color: #c1d1dc;} 
#main {overflow: hidden; padding: 0; margin: 0;} 
#sidebar {float: left; display: inline; width: 305px; background-color: #d4d7d9; box-sizing: border-box; padding-left: 15px; padding-right: 15px; padding-top: 10px; padding-bottom: 99999px; margin-bottom: -99999px;} 
#content {padding-bottom: 99999px; margin-bottom: -99999px; overflow: hidden; background-color: pink;} 
#top {padding: 0 15px 4px 15px; margin: 0 0 0 0; background-color: #FFFFFF; overflow: hidden;} 
#bottom {background-color: #c1d1dc; overflow: hidden; padding: 0 15px 10px 15px; box-sizing: border-box;} 
#footer {background-color: #8EA4B8;} 

Родитель ДИВ (#content) содержит два дочерних дивы (#top и #bottom). Все эти divs, а также div sidebar (#sidebar) будут иметь переменное количество контента, поэтому все они будут иметь переменную высоту.

Что я хотел бы знать, так это, если можно вычислить высоту #bottom, основанную на высоте (переменной) #top, вычитаемой из (переменной) высоты #content, так что #bottom заполняет оставшееся место в #content после #top. Цель состоит в том, чтобы получить #bottom и его фоновый цвет (и границы, которые он также будет иметь), чтобы простираться так далеко, как боковая панель.

Примечание: к сожалению, я не могу использовать Flexbox (необходимо создать для IE8 и IE9).

Принятый здесь ответ: Pass variable into jQuery CSS value to calculate height соответствует строкам того, что я хочу сделать, но используя родительский div переменной высоты, а не 100% или 100vh.

Я также принимаю решения, которые не используют вычисления; все работает. Спасибо!

Answer 1

Просто запустить что-то вроде этого после йота готов

$(function() { 
    var maxHeight = Math.max($("#sidebar").height(), $("#content").height()); 
    $("#bottom").height(maxHeight - $("#top").height()); 
});