html - Setting height attribute on div with JQuery yields inconsistent behavior -
i have simple 3 column (divs) page center content column bounded 2 sidebars. sidebars remain relatively static content column being dynamic page-to-page. goal ensure sidebars retain same height content column , after mashing in css, figured simple jquery solution far cleaner. enter following code:
$(document).ready(function () { setdivattributes(); }); function setdivattributes() { $("#sidebar-left").height($("#content").height()); $("#sidebar-right").height($("#content").height()); }
this works perfect, when runs , therein lies problem. can't simple bit of code run reliably. works fine in jsfiddle when run in various browsers, inconsistent behavior. load perfect. need refresh once, multiple times , have restart whatever browser altogether. figured maybe code running before content div had finished loading every solution i've encountered fails solve problem.
i suspect there simple solution has evaded me far.
with simple flex layout dont need javascript @ all. wrap content , sidebars in flex container , give widths.
you end clean css well
.flexlayout { display:flex; background:black; } #content { flex:1; background:white } #sidebar-left, #sidebar-right { width: 180px; }
Comments
Post a Comment