带边框的绝对 div 内 iframe 下方的 Chrome 间隙答案

【问题标题】：Chrome gap below iframe inside absolute div with border带边框的绝对 div 内 iframe 下方的 Chrome 间隙
【发布时间】：2014-01-24 13:19:14
【问题描述】：

iframe 下方的间隙始终是边框宽度的两倍。在 Firefox 或 IE 中不会出现此问题。

jsfiddle：http://jsfiddle.net/KLH5w/

* {
    margin: 0px;
    padding: 0px;

    /* Make box sizes include the border, which is more convenient in most cases */
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

div {
    border-style: solid;
    border-width: 10px;
}

iframe {
    display: block;
    width: 100%;
    height: 100%;

    border-style: dashed;
}

#frame_container {
    position: absolute;
    top: 50px;
    bottom: 0px;
    width: 100px;
}

<!doctype html>
<head>
    <link rel="stylesheet" type="text/css" href="test.css">
</head>

<body>
    <div id="frame_container">
        <iframe></iframe>
    </div>
</body>

通过将 iframe 放置在 100% 宽度/高度的 div 中，可以很容易地解决这个问题。

我猜这是一个错误，但有人有解释或优雅的 CSS 解决方案吗？

Edit1：box-sizing 似乎是问题的一部分。这是没有它的屏幕截图：

不幸的是（预计）会弄乱边框定位。

【问题讨论】：

标签： html css google-chrome iframe chromium

【解决方案1】：

我不知道为什么 Chrome 的行为很尴尬...但是如果有人对解决方法感兴趣，那么您可以使用 calc()

Demo

html, body {
    height: 100%;
}

* {
    margin: 0px;
    padding: 0px;

    /* Make box sizes include the border, which is more convenient in most cases */
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

div {
    border-style: solid;
    border-width: 10px;
    top: 50px;
    position: absolute;
}

iframe {
    display: block;
    width: 100%;
    height: 100%;    
    border-style: dashed;
}

#frame_container {
    width: 100px;
    height: 100%;
    height: calc(100% - 50px);
}

【讨论】：

设置高度没有抓住重点。单独删除 box-sizing 会使 iframe 边框与 div 边框重叠。
@Zantier this 相关吗？
您使用calc() 的新答案很好！如果在#frame_container 中将height: 100% 替换为bottom: 0px，它也适用于IE8。
我在 IE8 中打开过。如果您做出我建议的更改，它可以正常工作并回退到使用bottom:0px。
@Zantier 我不确定它是否有效，但您已发表评论，所以我不会编辑，因为我想将我的答案作为标准:) 所以如果它适合您和它满足你的需要，而不是你肯定能坚持下去..