Fatal编程技术网
  • html/
  • Html 为什么容器大小取决于绝对位置的子容器？

Html 为什么容器大小取决于绝对位置的子容器？

html css

Html 为什么容器大小取决于绝对位置的子容器？,html,css,css-position,Html,Css,Css Position,我正在尝试使用两个视频框构建类似Skype的界面： html，正文 { 背景色：#000000； 身高：100%； 字体系列：Verdana、Arial、Helvetica、无衬线； } 身体 { 保证金：0； 填充：0； } #视频容器 { 位置：相对位置； 最大宽度：800px； } #大遥控 { /*必要时收缩*/ 最大宽度：100%； 最大高度：100%； } #小地方 { 位置：绝对位置； 身高：30%； 宽度：30%； 底部：0； 右：0； } 您的用户代理不支持HTML5视频元

我正在尝试使用两个视频框构建类似Skype的界面：


html，正文
{
背景色：#000000；
身高：100%；
字体系列：Verdana、Arial、Helvetica、无衬线；
}
身体
{
保证金：0；
填充：0；
}
#视频容器
{
位置：相对位置；
最大宽度：800px；
}
#大遥控
{
/*必要时收缩*/
最大宽度：100%；
最大高度：100%；
}
#小地方
{
位置：绝对位置；
身高：30%；
宽度：30%；
底部：0；
右：0；
}
您的用户代理不支持HTML5视频元素

您的用户代理不支持HTML5视频元素
大框（
bigRemote
）表示远程视频流。小框（
smallLocal
）表示本地视频流

我遇到了一个问题：当垂直缩小结果窗口时，
smallLocal
框将从
bigRemote
的右下角偏移。原因是
smallLocal
绑定到
videoContainer
的右下角，后者不会像
bigRemote
那样收缩

我的印象是，在确定容器的布局/大小时，忽略了
position:absolute
子项如何使
videoContainer
适应
bigRemote
的收缩？（我相信这样做会间接导致
smallLocal
粘在
bigRemote
的右下角）

  • 我希望视频与其容器一起增长/收缩，以便您无法删除最大宽度/高度或在
    videoContainer
    上设置显式大小
  • 我希望视频保持其纵横比，因此让它匹配
    videoContainer
    的大小也不行
我删除了最大和最小宽度/高度属性，并将视频容器设置为块。不确定这是否正是您需要的，但看起来很接近：

假设要求是：

  • 保持原始视频比例
  • 尽可能将视频保持在原始大小
  • 调整视频大小以适应窗口
  • 右下角的小视频
  • 小视频的宽度总是大视频的30%
  • 没有滚动条
解决方案我发现它（至少）适用于Chrome 26.0、Firefox 19、IE9、IE10：

HTML:

令人惊讶的是，
display:inline
是包装器上唯一按需要工作的显示类型<代码>内联块在Firefox中不起作用，在Chrome中出现一些问题

设置
字体大小
和
行高
是为了避免一些
内联
间距问题。

请遵循发布JSFIDLE链接的指导原则：您还需要绝对定位较大的视频，并将底部和右侧设置为零，但是，您还需要设置一些宽度，以便以这种方式正确显示。这可能会有所帮助：
videoContainer
实际上会像
bigRemote
那样收缩。这里的问题是，
bigRemoteVideo
没有占用
videoContainer
提供的全部空间。要解决此问题，请尝试在
bigRemoteVideo
上设置100%高度，并为
videoContainer
提供明确的高度。你可以看到一个例子。a）这里的大多数评论都是你的。b） 只有当有人对问题有了实际的解决方案时，才会发布答案。我把我的提琴作为一条评论发布，因为它只解释了容器实际上正在调整大小。这有助于更准确地诊断问题，但无法解决问题。抱歉。我需要视频随容器增长/收缩，所以这个解决方案不行。视频在我提供的JSFIDLE中增长和收缩。除非我在这里遗漏了什么，否则您需要做的就是在查看JSFIDLE时调整窗口的大小。当我水平收缩窗口时，视频会收缩以适应；然而，当我垂直缩小它时，我会看到滚动条，视频不会调整大小，只是做了一些阅读。看起来HTML5视频标签本身就有一个方面的限制。看起来有一些解决办法：。最后，我认为我的JSFIDLE是正确的，它只是视频标签接管并强制执行一个纵横比。。。所以我们仍然需要找到一种方法来修正你的答案。 
<!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>

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

<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>

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