CSS height dependent on other div height

Question

I have a website, with horizontal menu on top with submenu. Below is main div and footer. I want to set my submenu max-height equeal to main div height (with is different on each page, depending on content) to not let it go over footer. Is it posible to set css property of on element, depending on other element property?

Thank you in advance for you help

score 0 · Answer 1 · answered Jan 21 '13 at 21:57

You can set the menu's max-height through scripting after the page has loaded. Example using JQuery:

var mainDivHeight = $('#mainDiv').css('height');
//manipulate the height as you want if it is different than the maindiv's height
var menuHeight = mainDivHeight - 50;
$('#menuDiv').css('max-height', 'menuHeight');

score 0 · Answer 2 · edited May 23 '17 at 12:27

0

This can be fixed with CSS and additional HTML code.

I am tempted to suggest that you use the clearfix hack, but I won't, instead I suggest you invetigate with this solution described in another answer and demonstrated in JS Bin.

edited May 23 '17 at 12:27

Community

1
1

answered Jan 21 '13 at 22:43

Nabil Kadimi

10,078
2
51
58

CSS height dependent on other div height

2 Answers2