2

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

我的实现有以下错误：

  1. 运行测试用例（下）
  2. 水平缩小窗口，直到红色条的宽度为零。
  3. 请注意，如果进一步缩小窗口，红色条的大小会突然增大。
  4. 如何让红色条保持隐藏状态并让蓝色条开始缩小？

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

jsFiddle演示 （编辑）

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

1 回答 1

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

于 2013-04-24T21:21:07.890 回答