keep fixed div inside body on a large screen - html

Question

<div id='wrapr'>
...
</div>
CSS
body{
max-width:1366px;
}
#wrapr{
position:fixed;
right:14px;
top:30px;
}
I just want #divr to bi fixed i.e. not scrollable on page.
But on a large screen (1920 px for example) it is placed outside of my bodytag !
How can I keep it fixed, but inside the body ?

Answer 1

A good rule of thumb for modern web development is to avoid px measurements at all costs. em, ch, vh/vw, and percents will generally provide a much better experience for users across a wide range of devices, aspect ratios, screen resolutions, etc.
body {
max-width: 100vw;
}
#wrapr {
position:fixed;
right: 1em;
top: 2em;
}
Sometime also to watch out for is for children elements which do not respect their parents max width. You may need to write CSS for these elements to ensure that they never grow larger than their parents.
#wrapr .someChildClass {
max-width: 100%;
}
For debugging this sort of thing, I find it extremely helpful to utilize Chrome DevTools. If you select the element you are interested in, it will show the entire box model including margin, content size, padding size, etc. in the style panel.
Finally, if you just want to truncate content, you can turn overflow off to prevent scrolling.
body {
max-width: 100vw;
overflow: hidden;
}
#wrapr {
position:fixed;
right: 1em;
top: 2em;
}