Css 当窗口收缩时，为什么动态大小的列会增长？_Css_Google Chrome

Css 当窗口收缩时，为什么动态大小的列会增长？

css google-chrome

Css 当窗口收缩时，为什么动态大小的列会增长？,css,google-chrome,Css,Google Chrome,我想把浏览器窗口分成两部分。右侧应包含一个固定大小的列。左侧应包含一个动态大小的列，该列填充空间的其余部分我的实现存在以下错误：运行测试用例（如下所示）水平收缩窗口，直到红色条的宽度为零请注意，如果进一步缩小窗口，红色条的大小会突然增大如何使红色条保持隐藏，蓝色条开始收缩更新：看起来红色条被推到了蓝色条的上方（就像两个在不同的行上渲染）。有没有办法强制两个块在同一条线上渲染 html { 身高：100%； /*解决方法直到http://stackoverflow.com/a/26

我想把浏览器窗口分成两部分。右侧应包含一个固定大小的列。左侧应包含一个动态大小的列，该列填充空间的其余部分

我的实现存在以下错误：

运行测试用例（如下所示）

水平收缩窗口，直到红色条的宽度为零

请注意，如果进一步缩小窗口，红色条的大小会突然增大

如何使红色条保持隐藏，蓝色条开始收缩

更新：看起来红色条被推到了蓝色条的上方（就像两个

在不同的行上渲染）。有没有办法强制两个块在同一条线上渲染


html
{
身高：100%；
/*解决方法直到http://stackoverflow.com/a/2629446/14731 工作*/
字号：0；
}
身体
{
背景色：#000000；
身高：100%；
保证金：0；
填充：0；
}
#左栏
{
右边距：400px；
身高：100%；
}
#大型视频
{
位置：相对位置；
宽度：100%；
最大高度：100%；
背景色：红色；
}
#右栏
{
位置：固定；
宽度：400px；
身高：100%；
右：0；
背景颜色：蓝色；
}

我提交了一份针对Chrome（26.0.1410.64 m版）的错误报告，因为我认为这是一个错误：

如果仔细观察，您会注意到视频元素正被推到右侧列的上方。Firefox运行正常

更新：我已将测试用例更新为在匿名模式下工作。我现在可以在匿名模式下复制这个问题，在Chrome 26.0.1410.64 m下禁用所有扩展

更新2：有人在Mac下重现了这个问题，所以不仅仅是我：

在Chrome 26中可以正常工作，你有没有尝试过在没有扩展或插件的情况下加载？@DavidBarker，你是在匿名模式下运行的？即使我禁用了所有

chrome://extensions

。还有什么我应该尝试禁用的吗？没有，我在正常模式下运行，带有摆锤、速度跟踪器和如此活跃的。。。不确定还有什么建议：（我的答案是：使用jQuery！

<!DOCTYPE html>
<html>
<head>
  <style type='text/css'>
    html
    {
      height: 100%;

      /* Workaround until http://stackoverflow.com/a/2629446/14731 works */
      font-size: 0;
    }

    body
    {
      background-color: #000000;
      height: 100%;
      margin: 0;
      padding: 0;
    }

    #leftBar
    {
      margin-right: 400px;
      height: 100%;
    }

    #largeVideo
    {
      position: relative;
      width: 100%;
      max-height: 100%;
      background-color: red;
    }

    #rightBar
    {
      position: fixed;
      width: 400px;
      height: 100%;
      right: 0;
      background-color: blue;
    }
  </style>
</script>
</head>
<body>
  <div id="rightBar"></div>
  <div id="leftBar">
      <video id="largeVideo" autoplay="autoplay"></video>
  </div>
</body>
</html>