Как остановить Sticky Footer от покрытия контента ...?

Я использую «липкий» нижний колонтитул, но на нескольких страницах он накладывает содержимое. Есть ли способ предотвратить это, но сохранить его «липкое» качество?Как остановить Sticky Footer от покрытия контента ...?

Я пробовал использовать min-height: по телефону HTML и body, но это не сработало.

CSS:

html { 
    background: black url(images/bg2.jpg) no-repeat 200px center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    height: 100%; 
} 
body { 
    margin: 0; 
    height: 100%; 
    padding-left: 40px; 
    padding-top: 25px; 
} 
#container { 
    min-height: 100%; 
    position: relative; 
    height: 100%; 
    min-width: 900px; 
    overflow: hidden; 
} 
#body { 
    padding-bottom: 100px; 
    float: left; 
    background-color: rgba(0,0,0,0.7); 
    width: 750px; 
    height: 400px; 
} 
#footer { 
    position: absolute; 
    bottom: 0px; 
    width: 100%; 
    height: 100px; 
}

HTML:

<body> 

<div id="container"> 

    <div id="header"> 
    <div class="logo">C</div> 

    <ul class="main_nav"> 
     <li><a href="index.html">Home</a></li> 
     <li><a href="about.html">About</a></li> 
     <li><a href="music.html">Music</a></li> 
     <li><a href="services.html">Services</a></li> 
     <li><a href="gallery.html">Gallery</a></li> 
     <li><a href="contact.html">Contact</a></li> 
    </ul> 
    </div> 

    <div id="body"> 
    <div id="bio_wrapper"> 

    </div> 
    </div> 

    <div id="footer"> 
    <span class="footer_text">Copyright © 2013<br />All Rights Reserved.</span> 
    </div> 

</div> 

</body>

источник

2013-04-26 pianoman

это поможет, если вы можете разместить источник html на своей странице :) – LRA

@LRA Обновлено! Надеюсь, это поможет. – pianoman

Кроме того, нет ничего вне '' кроме ''. – pianoman

Как Амит сказал, вы должны положить край дно для вашего тела и использовать мин-высоту вместо высоты:

#body { 
    min-height: 400px; 
    margin-bottom: 100px; 
    clear: both; 
}

И вы должны удалить высота: 100% от <body>

Надеюсь это поможет!

источник

2013-04-26 21:25:56 LRA

Спасибо! действительно помогите мне! – FlokiTheFisherman

Если ваше тело ДИВА закрыта до колонтитула начать деление с затем использовать маржинальное дно свойства. Пример, если структура страницы

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

затем написать

#body{ 
    margin-bottom: (height of your footer); 
}

Если ваша структура кода не так. Я имею в виду, что ваш нижний колонтитул находится внутри тела div. Затем используйте это свойство нижнего края в div, которое закрывается перед началом нижнего колонтитула.

источник

2013-04-26 20:51:23

Структура страницы написана так, но свойство 'margin-bottom:' ничего не делает. – pianoman

Have a look at this solution. Вы можете использовать абсолютное позиционирование для всех ваших основных элементов контента (заголовок, статья, нижний колонтитул). Используйте запросы @media для создания разрывов при разных разрешениях, если вам нужно изменить высоту заголовка или нижнего колонтитула для разных ширины экрана (отзывчивый дизайн) и сообщить основной области содержимого, чтобы скрыть переполнение. Вы также можете использовать плавающие, относительные макеты в основных областях содержимого.

источник

2013-12-01 21:43:47 Craig

В последнем div перед нижним колонтитулом просто добавьте style = "height: 100%; padding-bottom: 0;" для перезаписывания общих правил, с которыми вы, вероятно, сталкиваетесь.

источник

2018-03-01 21:59:27 negman

Добро пожаловать в SO. Убедитесь, что ваше решение работает, и в идеале включите рабочий пример в свой ответ. В Справочном центре есть информация о том, как написать хороший ответ (https://stackoverflow.com/help/how-to-answer). – sean

Как остановить Sticky Footer от покрытия контента ...?

ответ

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