Блог

Главная - Вопросы по программированию - Мой нижний колонтитул не останется под моим основным контентом

Мой нижний колонтитул не останется под моим основным контентом

#html #css

#HTML #css

Вопрос:

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

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

Вот ссылка на codepen: https://codepen.io/k-miller/pen/RwGGxEB

Как я уже сказал, я довольно новичок в этом, поэтому надеюсь, что я понимаю смысл. Спасибо!

Нижний колонтитул в HTML:

   <!-- footer -->
    <footer class="footer">
        <div class="main-part">
            <div class="footer-list-wrapper">
                <h3 class="footer-heading">
                    Hello World
                </h3>
                <ul class="footer-list">
                    <li class="footer-list-item">
                        <a href="#" class="footer-list-link">
                            hello@bellnet.ca
                        </a>
                    </li>
                    <li class="footer-list-item">
                        <a href="#" class="footer-list-link">
                            123 Somewhere Ave.
                        </a>
                    </li>
                    <li class="footer-list-item">
                        <div class="footer-list-link">
                            123-555-5555 ex 1234
                        </div>
                    </li>
                </ul>
            </div>
            <div class="footer-list-wrapper">
                <h3 class="footer-heading">
                    Explore
                </h3>
                <ul class="footer-list">
                    <li class="footer-list-item">
                        <a href="#" class="footer-list-link">
                            Home
                        </a>
                    </li>
                    <li class="footer-list-item">
                        <a href="#" class="footer-list-link">
                            News
                        </a>
                    </li>
                    <li class="footer-list-item">
                        <a href="#" class="footer-list-link">
                            Archive
                        </a>
                    </li>
                    <li class="footer-list-item">
                        <a href="#" class="footer-list-link">
                            Contact Us
                        </a>
                    </li>
                    <li class="footer-list-item">
                        <a href="#" class="footer-list-link">
                            Advertise
                        </a>
                    </li>
                    <li class="footer-list-item">
                        <a href="#" class="footer-list-link">
                            News Briefs
                        </a>
                    </li>
                </ul>
            </div>
    
            <div class="logo-wrapper">
                <div class="logo">
                    <img src="images/static/psp-logo.png" class="psp-logo" alt="PSP Logo">
                </div>
               
            </div>
        </div>
    
    
        <div class="creator-part">
            <div class="copyright-text">
                <p>Copyright amp;copy; 2016 Lorem, ipsum.. All rights reserved.</p>
            </div>
        </div>
    
    </footer>
    <!-- end of footer -->

CSS для нижнего колонтитула:

 /* footer */
.footer{
    position: absolute;
    align-self: left;
    /* display: block;
    margin-left: -20px; */
    bottom: 0;
    top: 100%;
    width: 100%;
    height: auto;
    z-index: -10;
} 


.main-part{
    display: flex;
    /* flex-direction: column; */
    justify-content: left;
    background-color: #1c1c1c;
    padding: 40px;
}

.footer-heading{
    font-size: 25px;
    font-weight: 300;
    color: rgb(227, 27, 35);
    margin: 10px 0 30px 0;
}

.footer-list-wrapper{
    padding: 35px;
}

.logo-wrapper{
    padding: 50px;
}

.psp-logo{
    width: 200px;
}

.footer-list{
    list-style: none;
    padding: 0;
}

.footer-list-item{
    margin-bottom: 20px;
}

.footer-list-link{
    font-size: 14px;
    text-decoration: none;
    color: #bbb;
}

.contact p{
    font-size: 15px;
    color: #bbb;
    margin-bottom: 40px;
}

.creator-part{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #111;
    padding: 0 40px;
}

.copyright-text{
    font-size: 13px;
    color: #aaa;
}
/* end of footer */

Ответ №1:

Чтобы разместить нижний колонтитул внизу, вы должны установить положение нижнего колонтитула fixed равным . Я удалил все ненужные css из нижнего колонтитула.

 .footer{
    position: fixed;
    width: 100%;
    bottom: 0
}

Вот ссылка на рабочий пример той же ссылки

Комментарии:

1. Спасибо, это не совсем то, что я ищу. То, что вы предложили, покрывает мой основной контент (все карточки и т. Д.), Но остается на экране при прокрутке. Я хочу, чтобы он исчезал при прокрутке, как мой заголовок… Извините, если я не был ясен в своем вопросе. Я хочу, чтобы он отображался, как только вы доберетесь до нижней части страницы, как нижний колонтитул здесь, в StackOverflow.

2. Хорошо. Пожалуйста, проверьте, что я обновил свой код.

3. Просто поместите свой нижний колонтитул рядом с основным контейнером. Для этого не требуется css

4. Это работает! Я знал, что это будет что-то простое. Значит, я переусердствовал тогда? Попытка оформить нижний колонтитул, когда он не был нужен? Спасибо!

5. Да, это было не нужно.

Ответ №2:

вы должны использовать tag <position : fixed;>

Комментарии:

1. добро пожаловать в SO. пожалуйста, расширьте свой ответ. Я пишу html и должен был прочитать ваш пост три раза, а затем вопрос. предоставление большего контекста, такого как «обновите свою таблицу стилей и добавьте position:fixed элемент X вместо position:absolute». в нынешнем виде ваш ответ не очень хорош. пожалуйста, [отредактируйте} его и улучшите.