Question

我有一个使用jbgallery脚本构建的幻灯片，我试图将其合并到我网站的页面中。幻灯片中的图像宽度和高度均为100％。我在页面底部有一个导航栏，高度为90像素。

我的代码是：

<style type="text/css">

body{ height:100%;
  background-color:#444;
   margin: 0;}

 div.fullscreenslideshow{
    display:block;
    position:absolute;
    top:0;
    left:0;
    padding-bottom:90px;
    width:100%;
    height:100%;
    background-color:#000;
  }
</style>
</head>

<body>
<div class="fullscreenslideshow">
<iframe src="slideshow.html" style="border: 0; width: 100%; height: 100%">Your browser doesn't support iFrames.</iframe>
</div>

</body>

虽然这看起来具有所需的效果，但它正在页面上生成一个滚动条（因为90像素填充将页面拉伸超过其已设置的100％高度）。

基本上，我如何调整css以确保我在页面下方有90像素空间的幻灯片显示，并且没有裁剪图像（例如在全屏幕滑动显示屏上将高度设置为90％）或产生溢出？

现在已经玩了好几个小时了，认为我已经碰壁了所以请求帮助！出于兴趣，当我将填充底部调整到边距底部时，对页面没有任何影响。

感谢您提前提供任何帮助，

JD

Answer 1

由于您的div已经position:absolute;，因此您只需设置bottom:90px即可使div模拟margin-bottom：

div.fullscreenslideshow{
    bottom:90px;
}

Answer 2

如果您可以使用JQuery，则可以使用以下代码：

$("div.fullscreenslideshow").css(height: (parseInt($(window).height()) - 90));

在加载页面完成后运行此操作。并享受美好时光。

Answer 3

为什么不在需要缩小的容器底部添加负边距，这样就不需要javascript了？

margin-top: -90px;

编辑：我得到了一些东西

首先，将其添加到div.fullscreenslideshow

margin-top: -90px

现在，转到页面slideshow.html并添加：

margin-top: 90px

要：

div.jbg加载
.jbgallery .jbg-wrap
.jbgs-wrapper（你必须自己将这个添加到css中，它还不存在

我让它在我的电脑上工作（将它与其他链接进行比较，它显示完全一样）。

带有保证金的全屏div

3 个答案: