<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
margin: 0;
padding: 3em;
height: 100%;
overflow: auto;
}
#content {
width: 200em;
height: 4em;
background-color: #dcdcdc;
}
</style>
</head>
<body>
<div id="content"></div>
</body>
</html>获取数据后内容宽度超出页面/视口(viewport)宽度。我想在页面右侧显示一些边距/填充。
我尝试了很多东西 - float 、定位、BFC 等。
我怎样才能在 #content 的右边得到一些空白？
最佳答案
问题在于主体仅与窗口一样宽，因此您真正滚动的不是主体，而是 Canvas 。 (你可以通过给 body 一个边框来看到这一点；这表明它不会变得比窗口更宽。)
一个解决方案是将正文变成一个内联 block ，这样它就可以随着内容拉伸(stretch)，然后填充就可以了。
body {
display: inline-block;
margin: 0;
padding: 3em;
height: calc(100% - 6em);
overflow: auto;
}
#content {
width: 200em;
height: 4em;
background-color: #dcdcdc;
}<div id="content"></div>关于html - 超出页面宽度(正文/视口(viewport))的内容的 padding-right 或 margin-right，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50236753/