Почему размер контейнера зависит от абсолютного положения ребенка?

Я пытаюсь создать скайп-подобный интерфейс с двумя видео:

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>
Большая коробка (bigRemote) представляет собой удаленный видеопоток. Маленькая коробочка (smallLocal), представляет собой локальный видеопоток.

Я столкнулся с проблемой: когда вы сжимаете окно результата вертикально, окно smallLocal будет смещаться от нижнего правого угла bigRemote. Причина в том, что smallLocal привязан к нижнему правому углу videoContainer и последний не сжимается, как bigRemote.

У меня сложилось впечатление, что position: absolute дети игнорируются при определении компоновки/размера контейнера. Как заставить videoContainer поместиться вокруг bigRemote, когда последний сжимается? (я полагаю, что это косвенно приведет к тому, что smallLocal будет придерживаться нижнего правого угла bigRemote.)

  • я хочу, чтобы видео росло / сжималось вместе со своим контейнером, поэтому вы не можете удалить max-width / height или установить явный размер на videoContainer.
  • мне нужно видео. чтобы сохранить его соотношение сторон, так что его соответствие размеру videoContainer не будет делать ни того, ни другого.
2 2
html css css-position

2 ответа:

Jsfiddle демо (edit)

Предполагая, что требования таковы:

  • сохранять исходные пропорции видео
  • сохраняйте видео в исходном размере, когда это возможно
  • измените размер видео, чтобы оно соответствовало окну
  • небольшое видео в правом нижнем углу
  • маленькое видео всегда на 30% шире большого
  • нет полос прокрутки

Решение я нашел, что работает в (по крайней мере) 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;
}

Удивительно display: inline - это единственный тип отображения, который работал так, как требовалось на обертке. inline-block не работал в Firefox и имел некоторые проблемы в Chrome.

font-size и line-height установлены, чтобы избежать некоторых inline проблем с интервалами.

2

Я удалил атрибуты max и min width / height и установил видео контейнеры на блокировку. Не уверен, что это именно то, что вам нужно, но это выглядит близко:

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;
}
0