Question

我创建了一个position: fixed div，它必须始终位于顶部，width: 900px，现在我遇到以下问题，当我将浏览器窗口调整为最小值时900px我的div被裁剪，我甚至无法滚动它，因为滚动条没有出现。我该如何解决？

代码如下： <body> <div class= "bar"><div class="inner_div"></div></div> </body>

现在是css

.bar { position: fixed; height: 60px; width: 900px; border: 2px solid; }

.inner_div {position: absolute; right: 5px; top: 2px; border: 2px solid;  width: 100px; height: 15px;}

尝试使用此代码，您会看到如果您的浏览器窗口小于900px，则会裁剪条形，并且无法滚动它并查看inner_div。

Answer 1

我很确定某些浏览器只使用非固定元素来确定内容的宽度。在页面底部添加这样的内容可以获得滚动条<div style="width:900px;"></div>

以前我没有提到间距div不能为空或者必须有高度，所以添加一个不间断的空间或1px的高度会使它填满宽度。

完整代码示例：http://jsfiddle.net/8LnBr/

<style>
.bar { position: fixed; height: 60px; width: 900px; border: 2px solid; }
.inner_div {position: absolute; right: 5px; top: 2px; border: 2px solid;  width: 100px; height: 15px;}
.spanner{width:900px; height:1px;}
</style>
<body>
 <div class= "bar">
  <div class="inner_div"></div>
 </div>
 <div class="spanner"></div>
</body>

当我调整浏览器窗口大小时如何滚动固定的div

1 个答案: