Bootstrap 自动高度面板

Question

I have 3 panels (see image)

Panel1 's height changing the height based on the content. Panel2 has a fixed height. And my problem: I want for Panel3 a "perfect" height like height = panel1.height - panel2.height

But I don't know how can I do that.

Answer 1

try something like this--

Using javascript

var panel1Height = document.getElementById('panel1').clientHeight;
var panel2Height = '20';
var panel3Height = panel1Height - panel2Height;
document.getElementById("panel3").style.height= panel3Height + 'px';

note this is just a mock up customize it according to your needs.

Answer 2

This framework does the work in a line height .. and always self-adjust if you put dynamic content

Framework: https://github.com/mattbanks/jQuery.equalHeights code: https://codepen.io/micahgodbolt/pen/FgqLc