div 的 100% 高度在另一个 div 内，有边距

Question

我在 div 里面有一个 div。 CSS/HTML 在下面。我想弄清楚如何使内部 div 具有真正的 height: 100%; 而没有溢出等等。无论我尝试什么，内部 div 的边框都会因为外部 div 的 overflow: hidden.

而被裁剪

由于某些原因，我无法修改任何 div 的内容或样式。但是，如果需要，我可以将内部 div 包裹在其他 div 中。这不是通过 JavaScript 完成的，这就是为什么我不能修改外部或内部 divs.

此外，这必须在 IE8 中工作。

外部 div 样式不会有太大变化 -- 只有宽度、高度、背景颜色和边距。

内部div可以是任何东西。它可以有一个更大的边框，它可以没有边框，它可能是谁知道的。

#outer
{
 width: 200px;
 height: 200px;
 background-color: yellow;
 margin: 20px;
 overflow: hidden;
 position: absolute;
}

#wrapper
{
  height: 100%;
}

#inner
{
 border: 1px solid red;
 height: 100%;
}

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

Answer 1

jsfiddle

将 #wrapper 高度更改为仅 99% 即可解决问题。

内部被切断的原因是：

#inner {
    height: 100%; //this means it equals to 200px
    border: 1px solid red;  //1px at the top border and 1px at the bottom added to the height of the #inner so now it becomes 202px, which will get cut off by overflow:hidden
}

Answer 2

您可以对 #wrapper

使用 css flex 属性

#wrapper {
    display: flex;
    flex-flow: column;
    height: 100%;
}

#outer
{
 width: 200px;
 height: 200px;
 background-color: yellow;
 margin: 20px;
 overflow: hidden;
 position: absolute;
}

#wrapper /* adding flex */
{
  display: flex;
flex-flow: column;
height: 100%;
}

#inner
{
 border: 1px solid red;
 height: 100%;
}

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

它适用于所有最新的浏览器，但不适用于 IE8。

div 的 100% 高度在另一个 div 内，有边距

100% height for div inside another div with margins

html

css

internet-explorer-8

ie8-compatibility-mode