jquery - How to make header height relative to (tab) content height? -



jquery - How to make header height relative to (tab) content height? -

hard explain need added image create things more clear:

example: see image below

i'm building website tabbed content on single page. want header , content height bigger , smaller when there more or less content total page height nog bigger 100% when content smaller maximum content size want header become bigger/animate slide down.

how can create header , content resize relative each other , tabbed content size?

please see above image more clear explanation.

building on @vlrprbttst's fiddle, more or less need:

working demo

css :root, body { margin:0; padding:0; height:100%; overflow:hidden; } .cont { background:black; } .wrap { height:100%;} #header { height:75%; background:red; } #content { height:25%; padding:0; margin:0; background:tan; } #tabbed.dynamic-height { background:violet; max-height:80%; } javascript $(function() { $(window).resize(setheights); setheights() }); function setheights() { $(".wrap").height($(window).height()-$("#tabbed").height()); }

jquery html css relativelayout

Comments

Popular posts from this blog

php - Android app custom user registration and login with cookie using facebook sdk -

django - Access session in user model .save() -

php - .htaccess Multiple Rewrite Rules / Prioritizing -