Question

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

我的实现有以下错误：

运行测试用例（如下）
水平收缩窗口，直到红色条的宽度为零。
请注意，如果您进一步缩小窗口，红色条突然增加。
如何让红色条保持隐藏，蓝色条开始收缩？

更新：看起来红色条被推到蓝色条上方（就像在不同的行上呈现两个<div>一样）。有没有办法强制两个块在同一行上渲染？

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

Answer 1

我提交了针对Chrome（版本26.0.1410.64 m）的错误报告，因为我认为这是一个错误：https://code.google.com/p/chromium/issues/detail?id=235189

如果你仔细观察，你会注意到视频元素被推到右列之上。 Firefox表现正常。

更新：我已将测试用例更新为在隐身模式下工作。我现在可以在隐身模式下重现此问题，并在Chrome 26.0.1410.64 m下禁用所有扩展程序。

更新2 ：有人在Mac下重现了这个问题，所以不仅仅是我：https://code.google.com/p/chromium/issues/detail?id=235189#c3

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

1 个答案: