为什么容器大小取决于绝对定位的孩子？ [英] Why does container size depend on absolute-positioned child?
问题描述
我正在尝试使用两个视频框建立一个类似Skype的界面：
< ;! DOCTYPE html>
< html>
< head>
< meta http-equiv =Content-Typecontent =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
{
/ *必要时收缩* /
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 =bigRemotecontrols preload =noneposter =http://media.w3.org/2010/05/sintel/poster.png>
< source id =mp4src =http://media.w3.org/2010/05/sintel/trailer.mp4type =video / mp4/>
< source id =webmsrc =http://media.w3.org/2010/05/sintel/trailer.webmtype =video / webm/>
< source id =ogvsrc =http://media.w3.org/2010/05/sintel/trailer.ogvtype =video / ogg/>
< p>您的用户代理不支持HTML5视频元素。< / p>
< / video>
< video id =smallLocalcontrols preload =noneposter =http://media.w3.org/2010/05/sintel/poster.png>
< source id =mp4src =http://media.w3.org/2010/05/sintel/trailer.mp4type =video / mp4/>
< source id =webmsrc =http://media.w3.org/2010/05/sintel/trailer.webmtype =video / webm/>
< source id =ogvsrc =http://media.w3.org/2010/05/sintel/trailer.ogvtype =video / ogg/>
< p>您的用户代理不支持HTML5视频元素。< / p>
< / video>
< / div>
< / body>
< / html>
大框（ bigRemote ）表示远程视频流。小盒子（ smallLocal ）表示本地视频流。
我遇到了一个问题：as您垂直缩小结果窗口， smallLocal 框将从 bigRemote 的右下角漂移。原因是 smallLocal 绑定到 videoContainer 的右下角，后者不缩减为 bigRemote 。
我的印象是 position：absolute 在确定容器的布局/大小时忽略子项。 我如何让 videoContainer 适合 bigRemote ，因为后者缩小？因此会间接导致 smallLocal 停留在 bigRemote 的右下角。）
- 我希望视频随着其容器增长/缩小，因此您无法在
videoContainer 。 - 我想让视频保持其长宽比，因此使其与
videoContainer
假设需求是：
- 调整视频大小以适合窗口
- 小型视频总是大型宽度的30％
- 无滚动条
解决方案我发现（至少）Chrome 26.0，Firefox 19，IE9，IE10：
HTML：
< div class =wrap>< video class = bigcontrols preload =noneposter =http://media.w3.org/2010/05/sintel/poster.png>
< source src =http://media.w3.org/2010/05/sintel/trailer.mp4type =video / mp4/>
< source src =http://media.w3.org/2010/05/sintel/trailer.webmtype =video / webm/>
< source src =http://media.w3.org/2010/05/sintel/trailer.ogvtype =video / ogg/>
< p>您的用户代理不支持HTML5视频元素。< / p>
< / video>< video class =smallcontrols preload =noneposter =http://media.w3.org/2010/05/sintel/poster.png>
< source src =http://media.w3.org/2010/05/sintel/trailer.mp4type =video / mp4/>
< source src =http://media.w3.org/2010/05/sintel/trailer.webmtype =video / webm/>
< source src =http://media.w3.org/2010/05/sintel/trailer.ogvtype =video / ogg/>
< / video>< / div>
CSS：
code> 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中有一些问题。
设置字体大小和 line-height 以避免一些 inline 间距问题。 / p>
I am attempting to build a Skype-like interface with two video boxes:
<!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
videoContainerwon't do either.
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.
这篇关于为什么容器大小取决于绝对定位的孩子？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
