Html 当窗口高度较窄时，如何防止在引导粘贴中跳跃？

当搜索结果少于页面高度时，滚动时，页面高度较窄，且粘贴侧边栏跳跃。我试图使主容器的最小高度大于侧边栏，但看起来不太好。当窗户高度较窄时，如何禁用粘贴底部或周围工作以防止跳跃

模板显示我当前的应用程序：

JS:

HTML:

---

你会用JS吗？为什么不读取元素的高度，如果搜索结果小于侧边栏，则禁用词缀

您还可以在窗口调整大小时添加事件，以便重新检查大小，并根据需要启用/禁用它

---

希望能有帮助。

实际上没有必要用添加或删除词缀的脚本使事情过于复杂。事实上，由于您已经通过标记启用了词缀，因此无需再次通过脚本执行。下面是我做的一个简单的提琴来说明这一点：（您可以忽略脚本中的所有内容，因为这些都是为了使按钮能够切换主面板的高度）

简单模板：

对于您的模板，我尝试在粘贴之前删除脚本并增加原始侧栏的宽度，这对我来说很好：

#sidebar {
    background-color: #d5cbc6;
    height: 400px; width: 283px;
    margin-top: 60px;
}

修改您的模板：

---

尽管您可能希望在单独的窗口中加载页面，或者让JSFIDLE中的预览窗格非常大，以查看实际情况，而不会让响应容器将所有内容都折叠起来。

在设置粘贴之前检查.main的高度是否足够大

JS

然后确保删除自动初始化粘贴的

data spy=“affix”

<div class="sidebar-fixed" data-offset-top="60" data-offset-bottom="50" id="sidebar"></div>

---

尝试在内部或外部CSS文件中实现此功能

.affix + .container-fluid {
         padding-top: 0px;
         margin-top: 50px;
     }

将边距顶部替换为导航栏的高度。 希望这有帮助。

---

此外，请记住，这是用于容器流体的。如果您希望此CSS处理容器类div元素，请将容器流体替换为容器。

您的意思是，当尺寸发生变化时，您不希望它从根本上“跳跃”，而是希望它平滑过渡？我希望防止跳跃。我想在窗口太小的时候减少侧边栏的高度。我不是100%确定，但我认为你要求在媒体查询中转换以获得平滑的效果。有一个很好的CSS技巧教程，我个人从DavidWalsh的另一篇文章中加入了一些过渡和屏幕调整动画。你可以阅读它，也许这是解决它的好主意。我会检查这个解决方案。谢谢。我尝试使用@media（最大高度：400px），这是一个糟糕的解决方案。我尝试通过“$（窗口）禁用resize事件中的粘贴。关闭（“.affix”）”，它带来了所需的效果，但我无法重新启用粘贴。你必须对此进行一些研究。从官方文件开始，检查它们是如何做到的。对不起，我现在没有时间寻求帮助。我在这个问题上浪费了很多时间，但这看起来不太好，我把谷歌地图放在了侧边栏上。

#sidebar {
    background-color: #d5cbc6;
    height: 400px; width: 283px;
    margin-top: 60px;
}

if ($(.main).first().innerHeight() > someNumber)
    $(#sidebar).affix({})

<div class="sidebar-fixed" data-offset-top="60" data-offset-bottom="50" id="sidebar"></div>

.affix + .container-fluid {
         padding-top: 0px;
         margin-top: 50px;
     }