这种情况通常是由于标题栏设置为固定定位,但没有指定其父级容器的相对定位所致。解决方法是在父级容器中添加“position: relative;”的样式,如下所示:
HTML代码:
CSS代码:
.container { position: relative; height: 500px; overflow: auto; } header { position: fixed; top: 0; left: 0; width: 100%; background-color: #ccc; padding: 10px; }
在这个例子中,.container元素的position属性设置为relative,这使得它成为其子元素header的“相对定位”容器。此外,.container元素的height属性设置为了一个固定值,如需在页面上滚动,请设置overflow属性为auto。
通过以上CSS代码,我们能够在不用设置固定高度的情况下,实现标题栏不超出div容器的效果。
上一篇:标题栏不消失