Question

我有<div>块用于显示内容。我已经设置了div，这样如果内容很大，就会出现一个垂直滚动条。

现在，我需要将表放在这个容器div中，我需要它与父类一样宽，每边有几个像素的边距。但是，当我向内部表应用边距时，右侧使用滚动条调整超出父div边缘的大小。

<div  style="overflow: scroll; overflow-x:hidden; position:relative; width: 100%; height:100%; background: magenta">
<table class="data_container"  style="width:100%;">
    <tr>
        <td style="height:400px">How can I fix my margins?</td>
    </tr>
</table>

.data_container {
    border-color: black;
    border-style: solid;
    border-width: 2px;
    background-color: white;
    margin: 50px !important;
    font-size: smaller;
}

此外，这是我在JSFiddle中看到的一个例子。这是一个证明问题的准系统示例。

Answer 1

This需要做什么？我在这里所做的就是将margin 50px替换为padding 50px到其父级

Answer 2

一种选择是使用CSS'calc()：

.data_container {
  border-color: black;
  border-style: solid;
  border-width: 2px;
  background-color: white;
  margin: 50px !important;
  font-size: smaller;
  width: calc(100% - 100px);
}

<div style="overflow: scroll; overflow-x:hidden; position:relative; width: 100%; height:100%; background: magenta">
  <table class="data_container">
    <tr>
      <td style="height:400px">How can I fix my margins?</td>
    </tr>
  </table>
</div>

Answer 3

你不应该把表用于这些事情。

HTML

<div id="container">
    <div id="inside">
        Fixed your problem.
    </div>
</div>

CSS

#container {
    width:90%;
    height:400px;
    overflow:scroll;
    border:1px solid blue;

}

#inside {
    width:90%;
    height:100%;
    margin-left:auto;
    margin-right:auto;
    border:1px solid red;
}

我认为这就是你想要的，如果不告诉我，希望这会有所帮助。 Here是小提琴

Answer 4

人们都试图在没有正确解释问题的情况下提供解决方案。

width属性给出元素内部的宽度，不包括任何填充，边框或边距。当您为其指定百分比值时，它会将父项的width属性乘以该百分比，并将其应用于子项，而不考虑任何元素的填充，边距甚至边框。它实际上意味着“占用父节点宽度的n％并将子宽度设置为”，其中 width 仅为内部宽度。

幸运的是，现代CSS无法让你写出像calc(100% - 20px)这样的内容，将内部元素的大小设置为相对于父元素的特定大小。你必须亲自从这个孩子的宽度中手动减去任何边框，填充或边距。

在带有滚动条的块元素中，如何正确设置块元素的边距？

4 个答案: