Нижний колонтитул. Он перекрывается на div

Question

У меня проблема с нижним колонтитулом моего сайта. Он перекрывается с содержимым div. У меня есть структура, как это:

#content { 
 
    width: 80%; 
 
    color: white; 
 
    margin: 0 auto; 
 
    font-family: "Arial"; 
 
    clear: both; 
 
} 
 
#footer { 
 
    font-family: "Arial"; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    color: #E6E6E6; 
 
    padding: 2%; 
 
    font-size: 70%; 
 
    text-align: center; 
 
    position: absolute; 
 
}

<div id="content"> 
 
    <div id="logo"> 
 
    <img logo here> 
 
    </div> 
 

 
    <div id="paragraph"> 
 
    <p>here 
 
    </div> 
 

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

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

Answer 1

его поскольку вы используете позицию: absolute; которые означают, что любой элемент с абсолютным положением будет размещен там независимо от того, что лучше, поэтому лучше использовать позицию: относительный;

Answer 2

<div id="paragraph"> 
     <p> here is where you want to make your change. 
    </div> 
<style> 
    #paragraph::after{ 
     margin-top:2px; 
     margin-bottom:2px; 
    } 

    #footer{ 
    clear:both; 
    } 
</style> 

Поместите стиль в вашем CSS-файл вместо встроенного, как это. Я просто написал это, чтобы понять суть. Псевдоэлемент «после» добавит что-то «после» вашего элемента id = paragraph, который должен помочь с небольшим интервалом между этим и нижним колонтитулом. В дополнение к этому добавление «clear: both» к элементу нижнего колонтитула должно гарантировать, добавите ли вы: «после» или нет, что ваш нижний колонтитул «очищает» все элементы над ним в HTML. Я добавил 2px, чтобы обеспечить небольшую амортизацию. Вы можете изменить или удалить это при необходимости. Я бы порекомендовал оставить как минимум 1px строку для крайнего края или края, так что это не пустой элемент.

Я согласен с тем, что вы можете удалить «абсолютный» из своего стиля для позиции.

Answer 3

Изменить нижние колонтитулы на relative;, в настоящее время нижний колонтитул сидит сверху контейнера div.

Поскольку вы используете %, переместите нижний колонтитул из контейнера, чтобы потерять все унаследованные свойства.

http://www.w3schools.com/cssref/pr_class_position.asp

Answer 4

Вот пример, где начать с сноской, что оставаться на дне, когда меньше содержания и получает толкнуло вниз, когда больше содержания.

Если вам нужна динамическая высота на нижнем колонтитуле, вам понадобятся решения flex или display:table, поэтому, если вы используете «липкий нижний колонтитул», вы получите много демонстраций о том, как они работают.

html, body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
} 
 
.content { 
 
    min-height: 100%; 
 
    margin-bottom: -80px; /* same as footer height */ 
 
} 
 
.content:after { 
 
    content: ""; 
 
    display: block; 
 
    height: 80px;   /* same as footer height */ 
 
} 
 
.footer { 
 
    height: 80px; 
 
    background-color: #ccc; 
 
}

<div class='content'> 
 
    Content 
 
</div> 
 
<div class='footer'> 
 
    Footer 
 
</div>