Why does container size depend on absolute-positioned child?

问题

I am attempting to build a Skype-like interface with two video boxes:

http://jsfiddle.net/q9ER2/20/

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
            html, body
            {
                background-color: #000000;
                height: 100%;
                font-family: Verdana, Arial, Helvetica, sans-serif;
            }

            body
            {
                margin: 0;
                padding: 0;
            }

            #videoContainer
            {
                position: relative;
                max-width: 800px;
            }

            #bigRemote
            {
                /* Shrink if necessary */
                max-width: 100%;
                max-height: 100%;
            }
            #smallLocal
            {
                position: absolute;
                height: 30%;
                width: 30%;
                bottom: 0;
                right: 0;
            }
        </style>
  </head>
  <body>
        <div id="videoContainer">
            <video id="bigRemote" controls preload="none" poster="http://media.w3.org/2010/05/sintel/poster.png">
                <source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4" />
                <source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm" />
                <source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg" />
                <p>Your user agent does not support the HTML5 Video element.</p>
            </video>
            <video id="smallLocal" controls preload="none" poster="http://media.w3.org/2010/05/sintel/poster.png">
                <source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4" />
                <source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm" />
                <source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg" />
                <p>Your user agent does not support the HTML5 Video element.</p>
            </video>
        </div>
    </body>
</html>

The big box (bigRemote) represents the remote video stream. The little box (smallLocal), represents the local video stream.

I've run into a problem: as you shrink the result window vertically, smallLocal box will drift away from the bottom-right corner of bigRemote. The reason is that smallLocal is bound to the bottom-right corner of videoContainer and the latter does not shrink as bigRemote does.

I was under the impression that position: absolute children are ignored when determining the layout/size of a container. How do I make videoContainer fit around bigRemote as the latter shrinks? (I believe doing so will indirectly cause smallLocal to stick to the bottom-right corner of bigRemote.)

I want the video to grow/shrink with its container so you cannot remove max-width/height or setting explicit size on videoContainer.
I want the video to maintain its aspect ratio, so having it match the size of videoContainer won't do either.

回答1:

jsFiddle demo (edit)

Assuming the requirements are:

Keep original video proportions
Keep video at original size when possible
Resize the video to fit the window
Small video at bottom right corner
Small video always is 30% the width of the big one
No scrollbars

The solution I found that works in (at least) Chrome 26.0, Firefox 19, IE9, IE10:

HTML:

<div class="wrap"><video class="big" controls preload="none" poster="http://media.w3.org/2010/05/sintel/poster.png">
    <source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4" />
    <source src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm" />
    <source src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg" />
    <p>Your user agent does not support the HTML5 Video element.</p>
</video><video class="small" controls preload="none" poster="http://media.w3.org/2010/05/sintel/poster.png">
    <source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4" />
    <source src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm" />
    <source src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg" />
</video></div>

CSS:

html, body{
    height: 100%;
    line-height: 0;
    font-size: 0;
}

.wrap{
    display: inline;
    position: relative;
}

.big{
    max-width: 100%;
    max-height: 100%;
}

.small{
    max-width: 30%;
    position: absolute;
    right: 0;
    bottom: 0;
}

Surprisingly display: inline is the only display type that worked as desired on the wrapper. inline-block didn't work in Firefox and had some issues in Chrome.

font-size and line-height are set to avoid some inline spacing issues.

回答2:

I removed the max and min width/height attributes and set the video containers to block. Not sure if this is exactly what you need, but it looks close:

http://jsfiddle.net/q9ER2/5/

html, body
{
    background-color:lime;
    height: 100%;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

body
{
    margin: 0;
    padding: 0;
}

#container
{
    background-color: red;
    position: relative;
    height: 100%;
    width: 100%;
    margin: 0 auto;
}

#bigRemote
{
}

#videoContainer
{
    position: relative;
}

#bigRemoteVideo
{
    /* Shrink if necessary */
    display:block;
    width: 100%;
}
#smallLocalVideo
{
    display:block;
    position: absolute;
    height: 30%;
    width: 30%;
    bottom: 0;
    right: 0;
}

来源：https://stackoverflow.com/questions/15415488/why-does-container-size-depend-on-absolute-positioned-child

标签

html

css

css-position