我想将浏览器窗口一分为二。右侧应包含一个固定大小的列。左侧应包含一个动态大小的列,填充其余空间。
我的实现有以下错误:
- 运行测试用例(下)
- 水平缩小窗口,直到红色条的宽度为零。
- 请注意,如果进一步缩小窗口,红色条的大小会突然增大。
- 如何让红色条保持隐藏状态并让蓝色条开始缩小?
更新:看起来红条被推到蓝条上方(就像两个<div>
s 在不同的行上渲染)。有没有办法强制两个块在同一行上渲染?
<!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>