Html 在另一个带边距的分区内，分区的高度为100%

我在

div

中有一个

div

。下面是CSS/HTML。我正在试图找出如何使内部

div

具有真实的

高度：100%没有溢出，什么都没有。无论我尝试什么，由于外部div的
溢出：hidden
，内部div的边框都会被裁剪

由于某些原因，我无法修改这两个div的内容或样式。但是，如果需要，我可以在其他div中包装内部div。这不是通过JavaScript实现的，这就是我无法修改外部或内部div的原因

而且，这必须在IE8中起作用

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

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


#外部
{
宽度：200px；
高度：200px；
背景颜色：黄色；
利润率：20px；
溢出：隐藏；
位置：绝对位置；
}
#包装纸
{
身高：100%；
}
#内在的
{
边框：1px纯红；
身高：100%；
}

A.

将
#包装高度更改为仅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
}


将
#包装高度更改为仅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
}

您可以将css flex属性用于
#包装器

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


#外部
{
宽度：200px；
高度：200px；
背景颜色：黄色；
利润率：20px；
溢出：隐藏；
位置：绝对位置；
}
#包装器/*添加flex*/
{
显示器：flex；
柔性流动：柱；
身高：100%；
}
#内在的
{
边框：1px纯红；
身高：100%；
}

A.
您可以将css flex属性用于
#包装器

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


#外部
{
宽度：200px；
高度：200px；
背景颜色：黄色；
利润率：20px；
溢出：隐藏；
位置：绝对位置；
}
#包装器/*添加flex*/
{
显示器：flex；
柔性流动：柱；
身高：100%；
}
#内在的
{
边框：1px纯红；
身高：100%；
}

A.
如果父项具有单向溢出，而您希望子项具有不同的溢出方式，则必须在子项上指定它。但我不希望内部子项内容在外部溢出。内部分区应填满外部分区内可用空间的100%高度和宽度。@AllDani我在问题中包括了小提琴，但这里有一个直接在网站上：。我没有看到外部分区中的JSFIDLE链接question@AllDani对不起，我的意思是我在问题中包含了代码片段。我认为这是我们现在使用的而不是JSFIDLE。我的错误。如果父级有一种溢出方式，而您希望子级有不同的溢出方式，则必须在子级上指定它。但我不希望内部子级内容在外部溢出。内部分区应填满外部分区内可用空间的100%高度和宽度。@AllDani我在问题中包括了小提琴，但这里有一个直接在网站上：。我没有看到外部分区中的JSFIDLE链接question@AllDani对不起，我的意思是我在问题中包含了代码片段。我认为这是我们现在使用的而不是JSFIDLE。我的错。但我认为如果边界宽度超过1px，这将不起作用。根据OP，边框宽度可能会有所不同。是的，你说得对！但这至少指出了它被溢出切断的原因：隐藏，因为@imthenanchoman无法识别它，我认为如果边界宽度超过1px，这将不起作用。根据OP，边框宽度可能会有所不同。是的，你说得对！但这至少指出了它被溢出切断的原因：隐藏，因为@imthenanchoman无法找出它，我无法修改#inner的样式/代码。有没有办法通过修改#wrapper来实现这一点？您是否可以像这样遍历
#wrapper#inner{box size:border box；}
我无法修改#inner的样式/代码。有没有办法通过修改#包装器来实现这一点？您是否可以像这样遍历
#包装器#内部{box size:border box；}