Question

我有一个奇怪的问题，当我改变浏览器的高度时，我的数据会被隐藏。它也会在移动浏览器大小中消失...这是截图：

enter image description here

我正在关注此tutorial

Here是有问题的页面。

Answer 1

我可以告诉你幻灯片DIV有height: 100%;以及html和body标签。 html将从视口大小继承它的高度。当您更改垂直高度时，您的内容大于视口。内容隐藏在它之后的元素下。如果从所有幻灯片中删除背景颜色，您将开始看到内容重叠。

您需要做的是从幻灯片中删除height: 100%;。这将导致滑块DIV包含/显示您的内容，因为它们将展开以适应它们实际占用的高度并防止元素堆叠。

您需要的是将幻灯片放在视口大小或内容大小上，这个大小都要大。由于你已经在使用jQuery，你可以尝试这样的事情：

http://jsfiddle.net/z6xrf/

function slideHeights() {

     var viewportHeight = $(window).height();

     $('.slide').each(function(){

          var elem = $(this);

          // reset so we can get the correct height of element each time
          elem.css('height','auto');

          var slideHeight = elem.height();  // height of content in slide

          if ( viewportHeight > slideHeight ) {
               height = viewportHeight;
          } else {
               height = slideHeight;
          }

          elem.css('height', height);

     });

}
$(document).ready(function(){
     slideHeights();  // for page load
     $(window).resize(slideHeights);  // for window resize
});

我们上面所做的是创建一个监视视口的当前大小的函数，并将其与幻灯片的高度（幻灯片内容的总高度）进行比较。如果视口高度大于内容高度，我们使用它，否则我们使用幻灯片的内容高度。在此过程中，我们重置了min-height值，因此它没有读取我们之前设置的值。

我们最初只需通过调用它就可以在页面加载时触发该函数。然后我们将它传递给resize函数，以便在适当时调用它。有关浏览器如何应用调整大小事件，请参阅http://api.jquery.com/resize/。

Answer 2

这是一个高度问题。做一件事，设置每张幻灯片的最小高度，大约800或900像素。然后进行测试，肯定会有效。

.slide {
background-attachment: fixed;
height: 100%;
min-height: 800px;  /*set any height here*/
position: relative;
width: 100%;

}

更改浏览器高度时隐藏数据

2 个答案: