Question

我已经远离HTML CSS，无法找到解决这个简单问题的方法。

我在另一个里面有一个div。外部黑色和内部橙色。

我的HTML和CSS是：

＆＃13;

#outer {
  position: fixed;
  width: 30%;
  height: 30%;
  background-color: black;
}
#inner {
  width: 100%;
  height: 100%;
  margin: 5px;
  background-color: orange;
}

＆＃13;

<div id="outer">
  <div id="inner">
  </div>
</div>

＆＃13;

为什么我的内心DIV会溢出外面？如何在不给出固定尺寸的情况下修复它？

Answer 1

由于保证金 - 宽度为100％加上保证金。为避免这种情况，请写width: calc(100% - 10px);（=边距的两倍。）高度相同。

＆＃13;

#outer {
  position: fixed;
  width: 30%;
  height: 30%;
  background-color: black;
}
#inner {

  width: calc(100% - 10px);
  height: calc(100% - 10px);
  margin: 5px;
  background-color: orange;
}

＆＃13;

<div id="outer">
  <div id="inner">
  </div>
</div>

＆＃13;

Answer 2

margin属性将div从顶部和左侧方向移动5个像素，并且由于div默认为overflow: show;（这意味着任何超出div的内容都将显示），您可以看到div正在运行外部。

你可以避免使用overflow: hidden;来隐藏div之外的任何内容，如果这是你想要做的事情，否则你需要以不超出其容器的方式设置你的内部div大小< / p>

#outer {
  position: fixed;
  width: 30%;
  height: 30%;
  background-color: black;
  overflow: hidden;
}
#inner {

  width: 100%;
  height: 100%;
  margin: 5px;
  background-color: orange;
}

Answer 3

您可以将#inner设置为绝对位置，而不是使用边距，您可以使用此

#inner {
  position: absolute;
  top: 5px;
  bottom:5px;
  left:5px;
  right:5px;
  background-color: orange;
}

body {
  width: 100%;
  height: 1000px;
}

#outer {
  position: fixed;
  width: 30%;
  height: 30%;
  background-color: black;
}
#inner {
  position: absolute;
  top: 5px;
  bottom:5px;
  left:5px;
  right:5px;
  background-color: orange;
}

<body>
  <div id="outer">
    <div id="inner">
    </div>
  </div>
</body>

Answer 4

这种情况很可能发生，因为你的内部div被边缘推出了它的父母。您是否尝试将'inner'设置为position：absolute with left：0和top：0 property？

Answer 5

上述答案假设您不想要保证金。实际上，如果您想要边距，则可以将overflow: hidden;添加到#outer。

为什么内部DIV会从外部DIV中溢出？

5 个答案: