полноэкранные div с запасом

У меня есть слайд-шоу, построенное с использованием сценария jbgallery, который я пытаюсь включить в страницу на моем сайте. Изображения в слайд-шоу имеют ширину и высоту 100%. У меня есть панель навигации в нижней части страницы с высотой 90 пикселей.полноэкранные div с запасом

Мой кода:

<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%, например, на fullscreenslideshow div css) или производить переполнение?

Общался с этим в течение нескольких часов и думаю, что я ударил по стене, поэтому просьба о помощи! Из интереса, когда я отрегулировал нижнюю часть до нижней границы, на странице не было никакого эффекта.

Спасибо за любую помощь заранее,

источник

2012-01-15 JD2011

Почему бы вам просто не добавить отрицательный отпечаток к нижней части контейнера, который нужно сжать, так что нет необходимости в javascript?

margin-top: -90px;

редактировать: Я получил что-то

Во-первых, добавьте в ваш div.fullscreenslideshow

margin-top: -90px

Теперь перейдите на страницу slideshow.html и добавьте:

margin-top: 90px

Кому:

div.jbg заряжания
.jbgallery .jbg обертывание
.jbgs-обертка (вы должны добавить один к CSS самостоятельно, это еще не существует

Я получил его для работы на моем компьютере (сравнил его с другой ссылкой, и он показывает точно так же).

источник

2012-01-15 15:44:58

+1 отлично работает! проверены IE7, IE8, O, Moz, Chrome, Safari: http://jsbin.com/ufayah/edit#javascript,html. Чем немного JS/jQ для изменения размера на win-resize (с анимацией) внутреннего контейнера и ... voilá! –

он действительно работает, однако он обрезает верх изображения с помощью этого поля 90px. Я пытаюсь включить все изображение (которое slideshow.html отображает как 100% ширину и 100% высоты) без какого-либо такого обрезки, следовательно, отчаянная попытка получить помощь здесь! Я думаю, что с учетом этого вариант jquery, вероятно, является лучшей методологией, если только я могу заставить его работать ... спасибо за вашу помощь. JD – JD2011

Я чувствую, что сохранить этот материал в css - это правильный способ работы. Должен быть способ сделать это с помощью css. Нет никаких шансов, что у вас есть ссылка? –

Если вы можете использовать JQuery вы можете использовать этот код:

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

перспективе это после загрузки страницы завершена. И хорошо провести время.

источник

2012-01-15 14:43:19

с запасом или CSS вы не эту высоту исправить. –

что '$ (function() {});' ваш document.ready. –

Ok добавили: , но все еще получаю синтаксическую ошибку !? Еще раз спасибо за помощь. JD – JD2011

Поскольку ваш DIV уже position:absolute; вы можете просто установить bottom:90px вызвать DIV для имитации margin-bottom:

div.fullscreenslideshow{ 
    bottom:90px; 
}

источник

2014-10-16 06:01:39

полноэкранные div с запасом

ответ

Смежные вопросы