HTML-нижний колонтитул, перекрывающий содержимое

Я пробовал, что нижний колонтитул html перекрывает контейнер тела.HTML-нижний колонтитул, перекрывающий содержимое

здесь мой html-код с нижним колонтитулом css.

<html> 
    <head> 
    <style> 
     .footer {position: fixed;overflow: hidden;right: 0;bottom: 0;left: 0;z-index: 9999;}  
    </style> 
    </head> 
<body> 

     <div class="container"> 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
     </div><br> 
<div class="footer"> 
     <ul class="copy inline text-center"> 
     <li>©2016 - 2017 <a href="http://Example/"> Example</a></li> 
     <li>All Rights Reserved</li> 
     </ul> 
</div> 
</body> 
</html>

источник

2017-02-11 Anandha Kumar

Взгляните здесь ширина запас на дне http://stackoverflow.com/questions/18915550/fix-footer-to-bottom-of-page – Daniel

Вы установили нижний колонтитул 'fixed'' bottom: 0'. Это заставит ваш нижний колонтитул всегда придерживаться нижней части экрана. Если у вас много контента в «контейнере», нижний колонтитул будет перекрываться. Исправьте его, удалив «position: fixed» – TheYaXxE

Stack Overflow нацелен на то, чтобы помочь программистам стать лучше на их работе, а не предоставлять бесплатные услуги кодирования. Если вы не понимаете, что этот 'CSS' вы вряд ли квалифицируете как программиста. С моей точки зрения, вы просто клиент, который пытается выполнить задачи без оплаты. Если вы на самом деле программист, пытающийся учиться, SO действительно не лучшее место для начала. Сначала вам нужно изучить основы. Кроме того, простой поиск в Google предоставит вам ответ. –

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

Стик колонтитулы внизу страницы:

С помощью этого решения, подвал будет всегда придерживаться нижней страницы (а не окна). Если у вас мало информации, нижний колонтитул будет внизу окна, и если содержимое будет расширяться, нижний колонтитул будет двигаться вперед.

html, 
 
body { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.container { 
 
    min-height: 100%; 
 
    height: auto; 
 
    margin-bottom: -60px; 
 
    box-sizing: border-box; 
 
} 
 

 
.container:after { 
 
    display: block; 
 
    content: ''; 
 
    height: 60px; 
 
} 
 

 
ul { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.footer { 
 
    height: 60px; 
 
    background: red; 
 
}

<div class="container"> 
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has 
 
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing 
 
    software like Aldus PageMaker including versions of Lorem Ipsum. 
 

 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has 
 
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing 
 
    software like Aldus PageMaker including versions of Lorem Ipsum. 
 
</div> 
 
<div class="footer"> 
 
    <ul class="copy inline text-center"> 
 
    <li>©2016 - 2017 <a href="http://Example/"> Example</a></li> 
 
    <li>All Rights Reserved</li> 
 
    </ul> 
 
</div>

Working Fiddle

Стик колонтитулы в нижней части окна:

Второе решение является почти такой же, как ваша, используя position: fixed. Чтобы предотвратить совпадение с содержимым, вы устанавливаете padding-bottom на .container таким же значением, что и нижние колонтитулы height.

body { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.container { 
 
    padding-bottom: 60px; 
 
    box-sizing: border-box; 
 
} 
 

 
.footer { 
 
    height: 60px; 
 
    position: fixed; 
 
    overflow: hidden; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    z-index: 9999; 
 
    background: red; 
 
}

<div class="container"> 
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has 
 
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing 
 
    software like Aldus PageMaker including versions of Lorem Ipsum. 
 
</div> 
 
<div class="footer"> 
 
    <ul class="copy inline text-center"> 
 
    <li>©2016 - 2017 <a href="http://Example/"> Example</a></li> 
 
    <li>All Rights Reserved</li> 
 
    </ul> 
 
</div>

Working Fiddle

источник

2017-02-11 17:45:01 TheYaXxE

Необходимо выполнить сброс своих стилей. Просто добавьте margin: 0; к телу. https://jsfiddle.net/36q5a7kw/

 <div class="container"> 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
     </div><br> 
<div class="footer"> 
     <ul class="copy inline text-center"> 
     <li>©2016 - 2017 <a href="http://Example/"> Example</a></li> 
     <li>All Rights Reserved</li> 
     </ul> 
</div> 


body{ 
    margin: 0; 
} 
.footer { 
    position: fixed; 
    overflow: hidden; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    z-index: 9999; 
}

источник

2017-02-11 17:16:32

Перекрытие вызывается путем позиции FOOTER в фиксированы. введите код:

<html> 
<head> 
<style> 
     </style> 
.footer {overflow: hidden;right: 0;bottom: 0;left: 0;z-index: 9999;}  

</head> 
<body> 

    <div class="container"> 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
    </div><br> 
<div class="footer"> 
    <ul class="copy inline text-center"> 
    <li>©2016 - 2017 <a href="http://Example/"> Example</a></li> 
    <li>All Rights Reserved</li> 
    </ul> 
</div> 
</body> 
</html>

источник

2017-02-11 17:22:13 GeorgeDopeG

HTML-нижний колонтитул, перекрывающий содержимое

ответ

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