Created
April 20, 2017 17:56
-
-
Save ginader/b69550fa008eed8ef3003624fc466596 to your computer and use it in GitHub Desktop.
Give CSS the exact pixel width of the viewport for situations when 100% doesn't work
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var updateWindowWidthVar = function(){ | |
// console.log('Resized finished.', window.innerWidth); | |
document.documentElement.style.setProperty( '--window-width', window.innerWidth + 'px' ); | |
}; | |
updateWindowWidthVar(); | |
window.onresize = updateWindowWidthVar; | |
// window.onresize = _.debounce(updateWindowWidthVar, 150); // debounced version (only fires once when resize is done) to not impact performance of app (needs lodash) | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
this will position the element at the right even when it's in another positioned element | |
*/ | |
.bla{ | |
position: absolute; | |
width: 123px; | |
left: calc( var(--window-width) - 123px ); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment