当前位置: 首页 > 面试题库 >

滚动条出现时防止居中布局移动其位置

子车高歌
2023-03-14
问题内容

我的页面布局看起来像这样:

<style type="text/css">
#content-wrap
{
    margin: 0 auto;
    width: 800px;
}
</style>

<div id="content-wrap">
</div>

您会注意到,当垂直滚动条出现时,content-wrapdiv会稍稍移动其位置。一种情况是浏览器开始逐渐呈现页面而不显示垂直滚动条,然后确定需要滚动条,因为内容比“折叠”高。这会将div向左移动约10像素。

不强制浏览器始终显示滚动条的情况下 解决此问题的最佳方法是什么


问题答案:

恐怕解决此问题的最佳方法是使用强制滚动条始终可见html{overflow-y:scroll;}。您遇到的问题是,出现滚动条时,“可用区域”会缩小10像素。这会导致左侧计算出的边距缩小到滚动条宽度的一半,从而使居中内容向左移动一些。

可能的解决方案可能是使用JavaScript而不是使用计算边距,margin: 0 auto;并在滚动条出现时以某种方式补偿“丢失”的像素,但恐怕会很混乱,并且在您浏览内容时,内容可能会有所移动计算并应用新的保证金。



 类似资料:
  • 我正在用html制作一个应用程序,并且需要有一个滚动条。但是,每当我添加一个时,它都会移动所有内容,以便为滚动条提供必要的空间。这搞砸了应用程序的布局。 因此,我需要一种方法,使滚动条简单地覆盖在页面顶部,这意味着页面仍然在它后面。我已经知道如何设计滚动条以使背面透明,我只需要滚动条不占用任何空间。 提前感谢!

  • 本文向大家介绍js防止DIV布局滚动时闪动的解决方法,包括了js防止DIV布局滚动时闪动的解决方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了js防止DIV布局滚动时闪动的方法,分享给大家供大家参考。具体方法如下: 最近接触页面性能的东西,有很多细微又原始的内容,比如浏览器渲染。资料非常多,所以选一些做节译,备忘。 JavaScript多次写、读DOM就会发生「布局颠簸」,引起文档重排

  • 问题内容: 我有一个中心对齐的DIV网站。现在,有些页面需要滚动,有些不需要。当我从一种类型移动到另一种类型时,滚动条的外观会将页面向侧面移动几个像素。如果没有在每个页面上明确显示滚动条,有什么办法可以避免这种情况? 问题答案: overflow-y:scroll是正确的,但是您应该将其与html标记一起使用,而不是body,否则在IE 7中 会出现一个双滚动条,因此正确的CSS是:

  • 我的第一个标签上有一条编辑文本。当然,当我触摸编辑文本时会出现软键盘。但当我访问第二个选项卡时,这意味着第二个选项卡活动,软键盘始终出现在我的第一个选项卡上,并且不会消失,即使我的第二个选项卡活动上没有EditText。 我想防止软键盘出现,当我访问我的第二个选项卡。 我如何解决这些问题? 这是我的清单文件

  • 问题内容: 众所周知,许多Android应用在首次聚焦之前都会非常短暂地显示白屏。在以下情况下会出现此问题: 扩展全局类并在其中执行主要初始化的Android应用。该 对象总是在第一个对象之前创建(这可以在调试器中观察到),因此这很有意义。这是我的案件延误的原因。 在初始屏幕之前显示默认预览窗口的Android应用。 设置显然在这里不起作用。我也无法将初始屏幕的父主题设置为此处所述,因为[不幸的是

  • 我有一个自定义布局,如下所示。它有三个标签。 标签2是可选的。它并不存在于每个细胞中。因此,我想隐藏它,并将标签1向下移动一点,以便在发生这种情况时与标签3居中对齐。 以下是我为每个标签添加的约束。 标签1 标签 2 标签3 请注意,我添加了一个额外的约束,将中心与Y对齐,值为0的标签为1,并将其优先级设置为750。我想,如果我去掉标签2,优先级较低的约束将取代它的位置并下移。 但它似乎不起作用。