在大屏幕上将尸体固定在体内

Question

<div id='wrapr'>
...
</div>

CSS

body{
max-width:1366px;
}
#wrapr{
position:fixed;
right:14px;
top:30px;
}

我只想让#divr bi固定，即不能在页面上滚动 但是在大屏幕（例如1920像素）上，它被放置在我的body标签之外！

如何将其保持固定，但在body？

内

Answer 1

现代网络开发的一个好的经验法则是不惜一切代价避免px测量。 em，ch，vh / vw和百分比通常可以为各种设备，宽高比，屏幕分辨率等用户提供更好的体验。

body {
    max-width: 100vw;
}

#wrapr {
    position:fixed;
    right: 1em;
    top: 2em;
}

有时也要注意的是儿童元素不尊重父母的最大宽度。您可能需要为这些元素编写CSS，以确保它们永远不会比父元素大。

#wrapr .someChildClass {
    max-width: 100%;
}

对于调试此类事情，我发现使用Chrome DevTools非常有帮助。如果选择您感兴趣的元素，它将在样式面板中显示整个框模型，包括边距，内容大小，填充大小等。

最后，如果您只想截断内容，可以关闭溢出以防止滚动。

body {
    max-width: 100vw;
    overflow: hidden;
}

#wrapr {
    position:fixed;
    right: 1em;
    top: 2em;
}