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

Я пытаюсь построить Skype-подобный интерфейс с двумя видео коробки:Почему размер контейнера зависит от дочернего элемента с абсолютным расположением?

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.

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

Я хочу видео расти/сокращаться с контейнером, так что вы не можете удалить максимальную ширину/высоту или настройки явный размер на videoContainer.
Я хочу, чтобы видео поддерживало его соотношение сторон, поэтому с его совпадением размер videoContainer тоже не будет.

источник

2013-03-14 Gili

Пожалуйста, следуйте инструкциям по размещению ссылок jsfiddle: http://meta.stackexchange.com/questions/84342/answer-that-only-contains-a-link-to-jsfiddle – Lowkase

Вам нужно будет разместить большее видео также абсолютно и установите нижнее и правое на ноль, однако вам также необходимо установить некоторые ширины, чтобы он отображался правильно, чтобы начать с этого пути. – j08691

Это может помочь: http://stackoverflow.com/questions/9587868/css-percentage-of-screen-with-positionabsolute –

jsFiddle demo(edit)

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

Держите оригинальные видео пропорции

Keep vid ео в оригинальном размере, когда это возможно

Изменение размера видео по размеру окну

Малого видео в правом нижнем углу

Малых видео всегда составляет 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.

источник

2013-04-03 21:33:20 Qtax

Отличная работа. Вы спасаете жизнь! – Gili

Я удалил атрибуты 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; 
}

источник

2013-03-14 17:22:05 Lowkase

Извините. Мне нужно, чтобы видео увеличивалось/сокращалось с помощью контейнера, поэтому этого решения не будет. – Gili

Видео растет и сжимается в jsfiddle, который я предоставил. Если мне не хватает чего-то здесь, все, что вам нужно сделать, это отрегулировать размер окна при просмотре этого jsfiddle. – Lowkase

Ваше решение рода работ. Когда я поворачиваю окно горизонтально, видео сжимается, чтобы соответствовать; однако, когда я сжимаю его вертикально, я получаю полосы прокрутки, и видео не изменяется. – Gili

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

ответ

Смежные вопросы