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

Question

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

我正在关注本教程

这是有问题的页面。

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%;

}