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