I need to place 3 divs at the top, middle, and bottom positions.
To achieve this, I have used jQuery to calculate the viewport height and apply a percentage of it to the top and bottom divs. However, resizing the page causes issues as the middle div overlaps either the top or bottom div. It is important for me to maintain a margin of around 10px for the middle div, as shown in the picture provided.
Below is the JavaScript code I am currently using:
$(document).ready(function() {
function thirty_pc() {
var height = $(window).innerHeight();
var thirtypc = (40 * height) / 100;
thirtypc = parseInt(thirtypc) + 'px';
$(".botline, .topline").css('height', thirtypc);
}
$(document).ready(function() {
thirty_pc();
$(window).bind('resize', thirty_pc);
});
});
I would like to know if there is a way to achieve the same result using CSS or jQuery more effectively.
I appreciate any assistance you can provide. Thank you.