Javascript Flexslider在加载内容时向下推内容

我的主页有不同的部分，上面有锚定标签。其中一个部分包含一个全宽的“flexslider”滑块。当我从另一个页面链接到位于滑块下方的主页上的任何锚定点时，视口将首先转到正确的位置。但当flexslider加载时，它会将所有内容向下推

我通过为flexslider容器定义一个固定的宽度和高度来解决这个问题，但这不是一个有效的解决方案，因为我的站点是响应性的

任何解决方案都将不胜感激，我已经为此忙了一整天

编辑：标记：

<div class="flexslider">
    <ul class="slides">
    <li>
      <img src="slide1.jpg" />
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    </ul>
 </div>

---

当我将.flexslider类设置为固定高度时，加载滑块时页面不会偏移，但这是obv不响应的。我尝试使用“最大高度”，但没有为滑块“保留”空间。

使用“最大高度”和“最大宽度”，而不是使用固定高度和宽度

---

希望这有助于您

在代码中，将

高度

和

宽度

的所有实例替换为

最大高度

和

最大宽度

。即使是在一个反应迅速的网站上，这也不应该把东西推到最大限度之外

---

如果您需要更具体的帮助，请将编辑当前代码发布到问题中。

您只需在“slides”元素中添加两行CSS即可保留空间

首先，您必须通过将高度从图像的宽度向下移动来获得滑块的纵横比，例如，您的图像为2048x820px，比值为820/2048~0.4

那么其他css行是：

.flexslider .slides {
height: 0;
padding-bottom: 40%; /* if it doesn't fit exactly, try a minimal higher value, eg. 40.05%;  maybe you need to add !important too, to overwrite some previous values */
background: red; /* just for testing purposes, this line can be removed afterwards */
}

---

我们需要一些代码，我们不想猜测你已经有了什么。

.flexslider .slides {
height: 0;
padding-bottom: 40%; /* if it doesn't fit exactly, try a minimal higher value, eg. 40.05%;  maybe you need to add !important too, to overwrite some previous values */
background: red; /* just for testing purposes, this line can be removed afterwards */
}