Html 如何在调整浏览器窗口大小时滚动固定div_Html_Css

Html 如何在调整浏览器窗口大小时滚动固定div

html css

Html 如何在调整浏览器窗口大小时滚动固定div,html,css,Html,Css,我创建了一个position:fixeddiv，它必须始终位于顶部，宽度为width:900px，现在我遇到了以下问题，当我将浏览器窗口的大小调整到小于900px时，我的div被裁剪，甚至无法滚动，因为滚动条没有出现。我该如何解决代码如下：现在是css .bar{位置：固定；高度：60像素；宽度：900像素；边框：2倍实心； } 试一下这段代码，你会发现如果你的浏览器窗口小于900px，条会被裁剪，并且没有办法滚动它和查看内部分区。我敢肯定有些浏览器只使用非固定元素来确定内容的宽度。

我创建了一个

position:fixed

div

，它必须始终位于顶部，宽度为

width:900px

，现在我遇到了以下问题，当我将浏览器窗口的大小调整到小于

900px

时，我的

div

被裁剪，甚至无法滚动，因为滚动条没有出现。我该如何解决

代码如下：

现在是css

.bar{位置：固定；
高度：60像素；宽度：900像素；边框：2倍实心；
}

试一下这段代码，你会发现如果你的浏览器窗口小于900px，条会被裁剪，并且没有办法滚动它和查看内部分区。

我敢肯定有些浏览器只使用非固定元素来确定内容的宽度。在页面底部添加类似的内容可以获得滚动条

之前我没有提到spacing div不能为空或必须有一个高度，因此添加一个不间断的空格或1px高度将使其填充宽度

完整代码示例：


.bar{位置：固定；高度：60px；宽度：900px；边框：2px实心；}
.inner_div{位置：绝对；右侧：5px；顶部：2px；边框：2px实体；宽度：100px；高度：15px；}
.扳手{宽度：900px；高度：1px；}

您是否使用了overflow:visible？在发布代码时，最好使用可用的“代码示例”按钮发布代码。由于移动设备的原因，现在使用固定div是不好的做法。放大页面几乎总是会破坏布局。如果确实需要，请使用相对定位或绝对定位。可能与此相关：我不明白，我应该将？放在body标记的内部，任何其他div的外部。@user2262522-使用完整的工作代码示例编辑了我的答案。我刚刚复制了代码，但仍然无法工作，当我调整浏览器窗口的大小时，内部div将隐藏，滚动条出现了，但我只能滚动div scaper（？banner）。@user2262522-我将类名复制到堆栈溢出中时弄错了。只需将div中的类更改为“扳手”而不是“间隔器”

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

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