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
Post a Comment