Question

＆＃13;

<!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>

＆＃13;

获取数据后，内容宽度会超出页面/视口的宽度。我想在页面右侧显示一些边距/填充。

我尝试了很多东西 - 浮动，定位，BFC等。

如何在#content右侧获得一些空格？

Answer 1

问题是身体只有窗户那么宽，所以你不是真的滚动身体，而是滚动画布。（你可以通过给身体一个边框来看到这一点;这表明它不会比窗口变宽。）

一种解决方案是将主体转换为内联块，以便它与内容一起伸展，然后填充工作。

＆＃13;

body {
  display: inline-block;
  margin: 0;
  padding: 3em;
  height: calc(100% - 6em);
  overflow: auto;
}

#content {
  width: 200em;
  height: 4em;
  background-color: #dcdcdc;
}

＆＃13;

<div id="content"></div>

＆＃13;

Answer 2

你必须学习这个：

填充是内容和边框之间的空间，而保证金是边界以外的空间。

在这里你必须删除宽度：200em，并放100％。所以你现在可以实现我们的目标，所以右边的空白区域。

  body {
            margin: 0;
            padding: 3em;
            height: 100%;
            overflow: auto;
        }
        #content {
            width: 100%;
            height: 4em;
            background-color: #dcdcdc;
            margin-right:30px!important;
        }

<body>
    <div id="content"></div>
</body>

对于超出页面宽度的内容（正文/视口），填充右边距或边距右边

2 个答案: