Chrome gap below iframe inside absolute div with border

StackOverflow https://stackoverflow.com/questions/21333775

题

The gap below the iframe is always twice the border width. This problem does not occur in Firefox or IE.

Chrome screenshot

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>

It can be solved easily enough by placing the iframe in a 100% width/height div.

I'm guessing it's a bug, but does anybody have an explanation, or an elegant CSS solution?

Edit1: box-sizing appears to be part of the problem. Here is a screenshot without it:

Chrome screenshot

Unfortunately that (expectedly) messes up the border positioning.

有帮助吗？

解决方案

Am not sure why Chrome behaves awkwardly... But if anyone's interested in workaround, than you can use 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);
}
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top