javascript - Is it possible to set an element's margin-top as 60% of another element's height with SCSS? -
question says all. possible set element's margin-top 60% of element's height scss?
i'm developing ionic 2 app, targeting browsers, android, ios , windows phone. here elements:
<div class='logobox'> <img src="assets/img/-.png" class="corner-logo" alt="-" /> <img src="assets/img/icon.png" class="logo" id="logo" alt="-" /> </div> <div class='headerbox' id="headerbox">...</div>
this how i'm setting positioning right now:
ionviewdidenter(){ document.getelementbyid('headerbox').style.margintop = math.round(number(document.getelementbyid('logo')['height']) * 0.6) + 'px'; window.addeventlistener('orientationchange', () => { document.getelementbyid('headerbox').style.margintop = math.round(number(document.getelementbyid('logo')['height']) * 0.6) + 'px'; }); }
my current method works in browser, when running on real device app, 'orientationchange' event listener fired sometimes, evident in visual results.
so possible achieve same scss, works everywhere? if not, can achieve js?
i'm not sure if answer anyway
scss
$marginvar = 200px // example .element-with-height{ margin-top: $marginvar ; } // if elements want affect not nested inside `.element-with-height` .affected-elements{ height: $marginvar * 60 / 100 // 60% question }
so in fact using variables
"sugar" scss
Comments
Post a Comment