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; } 

demo: https://jsfiddle.net/g3a2670e/1/


Comments

Popular posts from this blog

java - SSE Emitter : Manage timeouts and complete() -

jquery - uncaught exception: DataTables Editor - remote hosting of code not allowed -

java - How to resolve error - package com.squareup.okhttp3 doesn't exist? -