为什么内部DIV从外部DIV溢出？ [英] Why does inner DIV spills out of outer DIV?

问题描述

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

I have been long away from HTML CSS, can't find solution to this simple problem.

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

I have one div inside the other. Outer Black and inner orange.

我的HTML和CSS是：

My HTML and CSS is :

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

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

为什么我的内在DIV是从外溢出来的吗？

Why my inner DIV is spilling out of Outer ? How do I fix it without giving fixed dimensions?

推荐答案

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

Because of the margin - the width is 100% PLUS the margin. To avoid that, write width: calc(100% - 10px); (= twice the margin.) Same for height.

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

  width: calc(100% - 10px);
  height: calc(100% - 10px);
  margin: 5px;
  background-color: orange;
}

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

这篇关于为什么内部DIV从外部DIV溢出？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！