2

ブラウザ ウィンドウを 2 つに分割したいと思います。右側には、固定サイズの列が含まれている必要があります。左側には、残りのスペースを埋める動的サイズの列が含まれている必要があります。

私の実装には次のバグがあります。

  1. テストケースを実行します (以下)
  2. 赤いバーの幅がゼロになるまで、ウィンドウを水平方向に縮小します。
  3. ウィンドウをさらに縮小すると、赤いバーのサイズが突然大きくなることに注意してください。
  4. 赤いバーを隠したままにし、青いバーを縮小し始めるにはどうすればよいですか?

更新: 赤いバーが青いバーの上に押し出されているように見えます (2 つ<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 に答える