CODEWITHSUNDEEP
csslayout
JD2011
JD2011

Reputation: 223

full screen divs with margin

I have a slideshow built using the jbgallery script that I am trying to incorporate into a page on my site. The images in the slideshow have a width and height of 100%. I have a navigation bar at the bottom of the page with a height of 90 pixels.

My code is:

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

While this looked to have the desired effect it is producing a scroll bar on the page (as the 90 pixel padding is stretching the page beyond the 100% height it has been set to).

Basically, how to I adjust the css to ensure I get the slideshow in the page with a 90 pixel space beneath it, and without cropping the image (by setting the height to 90% for example on the fullscreenslideshow div css) or producing an overflow?

Been playing around with this for hours now and think I have hit the wall hence the request for help! Out of interest, when I adjusted the padding-bottom to margin-bottom there was no effect on the page.

Thanks for any help in advance,

JD

Upvotes: 0

Views: 8363

Answers (3)

Patrick Klug
Patrick Klug

Reputation: 14381

Since your div is already position:absolute; you can simply set bottom:90px to cause the div to simulate a margin-bottom:

div.fullscreenslideshow{
    bottom:90px;
}

Upvotes: 1

Sander Declerck
Sander Declerck

Reputation: 2535

Why don't you just add a negative margin to the bottom of the container that needs to shrink, so there's no need for javascript?

margin-top: -90px;

edit: I got something

First, add this to your div.fullscreenslideshow

margin-top: -90px

Now, go the page slideshow.html and add this:

margin-top: 90px

To:

  • div.jbg-loading
  • .jbgallery .jbg-wrap
  • .jbgs-wrapper (you will have to add this one to the css yourself, it doesn't exist yet

I got it to work on my computer (compared it to the other link, and it shows exactly the same).

Upvotes: 0

Ali Youhanaei
Ali Youhanaei

Reputation: 384

If you can use JQuery you can use this code: 

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

run this after load your page complete. And have good time.

Upvotes: 0

Related Questions