Css 带边距的全屏div_Css_Layout

Css 带边距的全屏div

css layout

Css 带边距的全屏div,css,layout,Css,Layout,我有一个幻灯片是用jbgallery脚本构建的，我正试图将它整合到我网站的一个页面中。幻灯片中的图像的宽度和高度均为100%。我在页面底部有一个高度为90像素的导航栏我的代码是： <style type="text/css"> body{ height:100%; background-color:#444; margin: 0;} div.fullscreenslideshow{ display:block; position:absolute;

我有一个幻灯片是用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>


身高：100%；
背景色：#444；
边距：0；}
全屏幻灯片{
显示：块；
位置：绝对位置；
排名：0；
左：0；
填充底部：90px；
宽度：100%；
身高：100%；
背景色：#000；
}
您的浏览器不支持iFrame。

虽然这看起来达到了预期效果，但它在页面上生成了一个滚动条（因为90像素的填充将页面拉伸到设置为的100%高度之外）

基本上，我如何调整css以确保我在页面中获得90像素空间的幻灯片，并且不裁剪图像（例如在fullscreenslideshow div css上将高度设置为90%）或产生溢出

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

谢谢你事先的帮助

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

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

加载页面完成后运行此操作。玩得开心。

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

margin-top: -90px;

编辑：我得到了一些东西

首先，将其添加到div.fullscreensileshow中

margin-top: -90px

现在，转到slideshow.html页面并添加以下内容：

margin-top: 90px

致：

div.jbg-load
.jbgallery.jbg wrap
.jbgs包装器（您必须自己将此包装器添加到css中，它还不存在

我让它在我的计算机上工作（与其他链接相比，它显示的完全相同）。

因为您的div已经是

位置：绝对；

您只需设置

底部：90px

即可使div模拟

边距底部：
div.fullscreenslideshow{
    bottom:90px;
}

对于边距或css，您没有此高度固定。确定已添加：$（function（）{$（“div.fullscreensileshow”）.css（'height'，（parseInt（$（window.height（））-90）；}）；但仍然有语法错误！？再次感谢您的帮助。如果您尝试像该网站一样，它的全速闪动，但您可以设置网站正文的最小高度和最小宽度，并尝试使用百分比或像素，但最好的方法是在加载页面后设置宽度和高度，然后分配它们，创建函数以重新调整元素的大小。非常抱歉替换此部分$（“div.fullscreensileshow”）.css（高度：（parseInt（$（window.height（））-90））
：感谢-已将测试版本上载到www.biid.co/layout.html，但尽管包含此javascript，似乎仍然存在相同的问题。非常令人沮丧….！非常感谢任何其他想法。谢谢，JD+1工作得很好！测试了IE7、IE8、O、Moz、Chrome、Safari:。而不仅仅是一点JS/jQ来调整大小（带动画）内部容器和…瞧！它确实起作用了，但是它将图像的顶部裁剪了90像素。我正在尝试合并整个图像（slideshow.html显示为100%宽度和100%高度）如果没有任何这样的裁剪，那么就不顾一切地试图在这里获得帮助！我认为，鉴于此，jquery选项可能是最好的方法，只要我能让它工作……谢谢你的帮助。JDI觉得将这些东西保存在css中是正确的工作方式。必须有一种方法可以用css来实现这一点。你不可能有link？完全同意并疯狂地尝试让它工作！！我已经将jquery版本上传到了www.biid.co/layout.html，并将上面的jsbin版本上传到了www.biid.co/layout1.html。正如我前面提到的，我正在尝试在不使用flash的情况下实现类似的功能。感谢您提供的任何帮助。再次感谢，JDI已经将其上传到了work（但未选中跨浏览器，它应在其他浏览器上工作）。请参阅编辑。。。