Слайд-шоу перекрывает нижний колонтитул

Я работаю на отзывчивой странице и пробовал все (включая функцию поиска здесь), но нижний колонтитул скользит по содержимому/слайд-шоу. Что я делаю не так?Слайд-шоу перекрывает нижний колонтитул

<div id="wrapper"> 
<div id="content"> 

    <div class="slideshow"> 
     <img src="img/1.JPG" width="850" /> 
     <img src="img/2.JPG" width="850" /> 
     <img src="img/3.JPG" width="850" /> 
    </div> <!-- Ends Slideshow --> 

</div> <!-- Ends Content --> 

<div id="footer"> 
</div> 
</div> 

Style-sheet: 

#wrapper { width: 900px; margin: 0 auto 0 auto; } 
#content { padding: 20px 30px 0 30px; height: auto; } 
.slideshow { position:relative; height:auto; max-width: 100%; margin-bottom: 10px; } 
.slideshow img { max-width:100%; height: auto; } 
#footer { padding: 20px 0 0 0; }

источник

2014-12-05 n_ck

Я не вижу его перекрывающихся с этим кодом. Смотрите: http://jsfiddle.net/0qe47o5e/ –

Спасибо, я обновил ваш Jsfiddle в соответствии с моим текущим кодом: http://jsfiddle.net/0qe47o5e/1/ –

Решено. см. мой ответ (он обновлен). Хорошего дня. –

Невозможно сделать абсолютный элемент пробелом на странице, потому что они не делают этого по определению. Однако вы можете указать высоту #content для исправления.

Поскольку вы знаете высоту изображений (в соответствии с jsfiddle в комментариях), так что вы можете добавить height:450px; к вашим #content потому height:auto не будет видеть любую высоту на ваши absolute расположенных элементах.

#content { padding: 20px 30px 0 30px; height:450px;}

JSFiddle: http://jsfiddle.net/0qe47o5e/3/

ИЛИ Код сниппета

* { margin: 0; padding: 0; } 
 
#wrapper { width: 900px; margin: 0 auto 0 auto; } 
 
#content { padding: 20px 30px 0 30px; height: 450px; } 
 
.slideshow { position:relative; height:100%; max-width: 100%; margin-bottom: 10px; } 
 
.slideshow img { max-width:100%; } 
 
#footer { padding: 20px 0 0 0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
<div id="content"> 
 

 
    <div class="slideshow"> 
 
     <img src="img/1.JPG" width="850" height="450" style="position: absolute; top: 0px; left: 0px; display: block; z-index: 3; opacity: 1;" /> 
 
     <img src="img/2.JPG" width="850" height="450" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 2; opacity: 0;" /> 
 
     <img src="img/3.JPG" width="850" height="450" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 1; opacity: 0;" /> 
 
    </div> <!-- Ends Slideshow --> 
 

 
</div> <!-- Ends Content --> 
 

 
<div id="footer"> Footer HERE 
 
</div> 
 
</div>

источник

2014-12-05 16:48:36

Слайд-шоу перекрывает нижний колонтитул

ответ

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