Ustawienie footera na samym dole strony

pytanie zadane 30 kwietnia 2021 w HTML i CSS przez Fonteinbloem Użytkownik (660 p.)
edycja 30 kwietnia 2021 przez Fonteinbloem

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>World's countries</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header id="header">
        <div class="logo">
            <img class="logo-img"src="img/world-icon.png" alt="Earth">
            <p class="logo-text">countrypedia</p>
        </div>  
        <nav class="navbar">
            <a href="#">About us</a>
        </nav>
    </header>
    <section id="alphabet"></section>
    <section id="search">
        <input class="search-input" type="text" placeholder="Search for...">
    </section>
    <section id="countries">
        <div class="countries-container">
            <div class="country">
                <div class="country-img">
                    <img src="img/poland.png" alt="Poland">
                </div>
                <div class="country-name">
                    <p>Poland</p>
                </div>
            </div>
            <div class="country">
                <div class="country-img">
                    <img src="img/albania.png" alt="Albania">
                </div>
                <div class="country-name">
                    <p>Albania</p>
                </div>
            </div>
            <div class="country">
                <div class="country-img">
                    <img src="img/russia.png" alt="Russia">
                </div>
                <div class="country-name">
                    <p>Russia</p>
                </div>
            </div>
            <div class="country">
                <div class="country-img">
                    <img src="img/spain.jpg" alt="Spain">
                </div>
                <div class="country-name">
                    <p>Spain</p>
                </div>
            </div>
            <div class="country">
                <div class="country-img">
                    <img src="img/france.jpg" alt="France">
                </div>
                <div class="country-name">
                    <p>France</p>
                </div>
            </div>
            <div class="country">
                <div class="country-img">
                    <img src="img/uk.jpg" alt="United Kingdom">
                </div>
                <div class="country-name">
                    <p>United Kingdom</p>
                </div>
            </div>
            <div class="country">
                <div class="country-img">
                    <img src="img/usa.jpg" alt="United States Of The America">
                </div>
                <div class="country-name">
                    <p>United States of the America, Yeah the awful one</p>
                </div>
            </div>
            <div class="country">
                <div class="country-img">
                    <img src="img/canada.jpg" alt="Canada">
                </div>
                <div class="country-name">
                    <p>Canada</p>
                </div>
            </div>
            <div class="country">
                <div class="country-img">
                    <img src="img/mexico.png" alt="Mexico">
                </div>
                <div class="country-name">
                    <p>Mexico</p>
                </div>
            </div>
            <div class="country">
                <div class="country-img">
                    <img src="img/china.jpg" alt="China">
                </div>
                <div class="country-name">
                    <p>China</p>
                </div>
            </div>
            <div class="country">
                <div class="country-img">
                    <img src="img/brazil.jpg" alt="Brazil">
                </div>
                <div class="country-name">
                    <p>Brazil</p>
                </div>
            </div>
            <div class="country">
                <div class="country-img">
                    <img src="img/portugal.jpg" alt="Portugal">
                </div>
                <div class="country-name">
                    <p>Portugal</p>
                </div>
            </div>
            <div class="country">
                <div class="country-img">
                    <img src="img/qatar.jpg" alt="qatar">
                </div>
                <div class="country-name">
                    <p>Qatar</p>
                </div>
            </div>
        </div>
    </section>
    <footer id="footer">
        <p>Copyright 2021 &copy;</p>
    </footer>
    <script src="main.js"></script>
</body>
</html>

Hej, napisałem stronę, która ma więcej elementów niż mieści się na ekranie i muszę przesuwać suwakiem w dół, aby zobaczyć całość. Chcę zrobić footer, który będzie cały czas na dole ekranu, nie zwracając uwagi jak duży content jest w środku (ponieważ to się zmienia). Próbowałem zrobić to przy pomocy position: relative;, lecz gdy zmienia się zawartość na ekranie i nie zajmuje już całego ekranu, wtedy footer jest dalej pod głównym contentem, lecz nie na samym dole. (chodzi o sytuację, gdy zechcę wyszukać kraje za pomocą alfabetu lub wyszukiwania) Dodaje cały kod strony, ponieważ nie wiem co dokładnie ma na to wpływ. Byłbym niezmiernie wdzięczny za pomoc lub rady jeżeli coś jest źle napisane.

@import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans:wght@400;700&display=swap');

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    background: #323232;
    color: white;
    font-family: 'Merriweather Sans', sans-serif;
}

#header {
    display: flex;
    width: 100%;
    height: 150px;
    border-bottom: 3px solid #525252;
}

.logo {
    display: flex;
    align-items: center;
    flex-basis: 45%;
}

.logo-img {
    margin: 5px;
    padding: 10px;
    width: 150px;
    height: 150px;
}

.logo-text {
    text-transform: uppercase;
    font-size: 78px;
    font-weight: 900;
}

.navbar {
    flex-basis: 55%;
    align-self: center;
    display: flex;
    justify-content: center;
}

.navbar a {
    color: white;
    text-decoration: none;
    font-size: 44px;
}

.navbar a:hover {
    color: #888;
    text-decoration: underline;
}

#alphabet {
    display: grid;
    width: 100%;
    height: 80px;
    background: #484848;
    grid-template-columns: repeat(24, 1fr);
    grid-template-rows: 1fr;
    border-bottom: 3px solid #525252;
}

.alphabet-letter {
    text-align: center;
    padding-top: 14px;
    font-size: 40px;
}

.alphabet-letter.selected {
    background: #292929;
    color: green;
}

.alphabet-letter.selected:hover {
    background: #323232;
    color: green;
}

.alphabet-letter:hover {
    background: #535353;
    cursor: pointer;
    color: yellow;
}

#search {
    width: 100%;
    height: 50px;
    margin-top: 25px;;
    text-align: center;
}

.search-input {
    width: 500px;
    height: 50px;
    border-radius: 25px;
    font-size: 30px;
    padding: 12px;
    outline: none;
    text-align: center;
}

#countries {
    width: 100%;
    margin-top: 100px;
}

.countries-container {
    width: 90%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: minmax(275px, 350px);
}

.country {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.country-img img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
}

.country-name {
    height: 75px;
    text-align: center;
    font-size: 28px;
    margin-top: 10px;
}

#footer {
    width: 100%;
    position: relative;
    bottom: 0;
    left: 0;
    height: 100%;
    background: black;
    text-align: center;
    padding-top: 25px;
}

const alphabet = {1:"a", 2:"b", 3:"c", 4:"d", 5:"e", 6:"f", 7:"g", 8:"h", 9:"i", 10:"j", 11:"k", 12:"l", 13:"m",  14:"n", 15:"o", 16:"p", 17:"q", 18:"r", 19:"s", 20:"t", 21:"u", 22:"v", 23:"y", 24:"z"};
const alphabetDiv = document.querySelector('#alphabet');
const input = document.querySelector('.search-input');
let countries = document.querySelectorAll('.country-name');
let isLetterSelected = false;

function createAlphabet() {
    let alphabetContent = '';
    for (i=1; i<=Object.keys(alphabet).length; i++) {
        alphabetContent+=`<div class="alphabet-letter">${(alphabet[i]).toUpperCase()}</div>`;
    }
    alphabetDiv.innerHTML = alphabetContent;
}


document.addEventListener("DOMContentLoaded", createAlphabet);

alphabetDiv.addEventListener('click', ( {target} ) => {
    if (!target.matches('.alphabet-letter')) {
        return;
    } else {
        if (target.classList.contains('selected')) {
            target.classList.remove('selected');
            isLetterSelected = false;
            let firstLetter = '';
            let names = Array.from(countries);
            names.forEach( (el) => {
                if (el.firstElementChild.textContent[0].toUpperCase().indexOf(firstLetter) != -1) {
                    el.closest('.country').style.display = 'flex';
                } else {
                    el.closest('.country').style.display = 'none';            
                }
            })
        } else {
            const alphabet = document.querySelector('#alphabet').children;
            const alphabet2 = Array.from(alphabet);
                alphabet2.forEach( (letter) => {
                if (letter.classList.contains('selected')) {
                    letter.classList.remove('selected');
                }
            })

            target.classList.add('selected');
            let firstLetter = target.textContent.toUpperCase();
            let names = Array.from(countries);
            names.forEach( (el) => {
                if (el.firstElementChild.textContent[0].toUpperCase().indexOf(firstLetter) != -1) {
                    el.closest('.country').style.display = 'flex';
                } else {
                    el.closest('.country').style.display = 'none'; 
                }
            })
        }
}})

function searchCountry(e) {
    const alphabet = document.querySelector('#alphabet').children;
    const alphabet2 = Array.from(alphabet);
    alphabet2.forEach( (letter) => {
        if (letter.classList.contains('selected')) {
            letter.classList.remove('selected');
        }
    })
    isLetterSelected = false;
    
    let names = Array.from(countries);
    names.forEach( (el) => {
        if ((el.firstElementChild.textContent).toLowerCase().indexOf(e.target.value.toLowerCase())!=-1) {
            el.closest('.country').style.display = 'flex';
        } else {
            el.closest('.country').style.display = 'none';
        }
    })
}

input.addEventListener('keyup', searchCountry);

3 odpowiedzi

odpowiedź 30 kwietnia 2021 przez rafal.budzis Szeryf (85,260 p.)

Dodaj position: sticky; a następnie dla całej strony ustaw min-height:100vh aby ją rozciągnąć jeśli treści będzie za mało :)

komentarz 1 maja 2021 przez Fonteinbloem Użytkownik (660 p.)

Niestety nadal nie działa:/

odpowiedź 1 maja 2021 przez pablop76 VIP (123,120 p.)

odpowiedź 1 maja 2021 przez niezalogowany

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>World's countries</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header id="header">
        <div class="logo">
            <img class="logo-img"src="img/world-icon.png" alt="Earth">
            <p class="logo-text">countrypedia</p>
        </div>  
        <nav class="navbar">
            <a href="#">About us</a>
        </nav>
    </header>
    <section id="alphabet"></section>
    <section id="search">
        <input class="search-input" type="text" placeholder="Search for...">
    </section>
    <section id="countries">
        <div class="countries-container">
            <div class="country">
                <div class="country-img">
                    <img src="img/poland.png" alt="Poland">
                </div>
                <div class="country-name">
                    <p>Poland</p>
                </div>
            </div>
            <div class="country">
                <div class="country-img">
                    <img src="img/albania.png" alt="Albania">
                </div>
                <div class="country-name">
                    <p>Albania</p>
                </div>
            </div>
            <div class="country">
                <div class="country-img">
                    <img src="img/russia.png" alt="Russia">
                </div>
                <div class="country-name">
                    <p>Russia</p>
                </div>
            </div>
            <div class="country">
                <div class="country-img">
                    <img src="img/spain.jpg" alt="Spain">
                </div>
                <div class="country-name">
                    <p>Spain</p>
                </div>
            </div>
            <div class="country">
                <div class="country-img">
                    <img src="img/france.jpg" alt="France">
                </div>
                <div class="country-name">
                    <p>France</p>
                </div>
            </div>
            <div class="country">
                <div class="country-img">
                    <img src="img/uk.jpg" alt="United Kingdom">
                </div>
                <div class="country-name">
                    <p>United Kingdom</p>
                </div>
            </div>
            <div class="country">
                <div class="country-img">
                    <img src="img/usa.jpg" alt="United States Of The America">
                </div>
                <div class="country-name">
                    <p>United States of the America, Yeah the awful one</p>
                </div>
            </div>
            <div class="country">
                <div class="country-img">
                    <img src="img/canada.jpg" alt="Canada">
                </div>
                <div class="country-name">
                    <p>Canada</p>
                </div>
            </div>
            <div class="country">
                <div class="country-img">
                    <img src="img/mexico.png" alt="Mexico">
                </div>
                <div class="country-name">
                    <p>Mexico</p>
                </div>
            </div>
            <div class="country">
                <div class="country-img">
                    <img src="img/china.jpg" alt="China">
                </div>
                <div class="country-name">
                    <p>China</p>
                </div>
            </div>
            <div class="country">
                <div class="country-img">
                    <img src="img/brazil.jpg" alt="Brazil">
                </div>
                <div class="country-name">
                    <p>Brazil</p>
                </div>
            </div>
            <div class="country">
                <div class="country-img">
                    <img src="img/portugal.jpg" alt="Portugal">
                </div>
                <div class="country-name">
                    <p>Portugal</p>
                </div>
            </div>
            <div class="country">
                <div class="country-img">
                    <img src="img/qatar.jpg" alt="qatar">
                </div>
                <div class="country-name">
                    <p>Qatar</p>
                </div>
            </div>
        </div>
    </section>
    <footer id="footer">
        <p>Copyright 2021 &copy;</p>
    </footer>
    <script src="main.js"></script>
</body>
</html>

Html bez zmian.

@import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans:wght@400;700&display=swap');
 
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
 
body {
    background: #323232;
    color: white;
    font-family: 'Merriweather Sans', sans-serif;
}
 
#header {
    display: flex;
    width: 100%;
    height: 150px;
    border-bottom: 3px solid #525252;
}
 
.logo {
    display: flex;
    align-items: center;
    flex-basis: 45%;
}
 
.logo-img {
    margin: 5px;
    padding: 10px;
    width: 150px;
    height: 150px;
}
 
.logo-text {
    text-transform: uppercase;
    font-size: 78px;
    font-weight: 900;
}
 
.navbar {
    flex-basis: 55%;
    align-self: center;
    display: flex;
    justify-content: center;
}
 
.navbar a {
    color: white;
    text-decoration: none;
    font-size: 44px;
}
 
.navbar a:hover {
    color: #888;
    text-decoration: underline;
}
 
#alphabet {
    display: grid;
    width: 100%;
    height: 80px;
    background: #484848;
    grid-template-columns: repeat(24, 1fr);
    grid-template-rows: 1fr;
    border-bottom: 3px solid #525252;
}
 
.alphabet-letter {
    text-align: center;
    padding-top: 14px;
    font-size: 40px;
}
 
.alphabet-letter.selected {
    background: #292929;
    color: green;
}
 
.alphabet-letter.selected:hover {
    background: #323232;
    color: green;
}
 
.alphabet-letter:hover {
    background: #535353;
    cursor: pointer;
    color: yellow;
}
 
#search {
    width: 100%;
    height: 50px;
    margin-top: 25px;;
    text-align: center;
}
 
.search-input {
    width: 500px;
    height: 50px;
    border-radius: 25px;
    font-size: 30px;
    padding: 12px;
    outline: none;
    text-align: center;
}
 
#countries {
    width: 100%;
    margin-top: 100px;
    min-height: 100vh;
}
 
.countries-container {
    width: 90%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: minmax(275px, 350px);
}
 
.country {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
 
.country-img img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
}
 
.country-name {
    height: 75px;
    text-align: center;
    font-size: 28px;
    margin-top: 10px;
}
 
#footer {
    width: 100%;
    position: relative;
    bottom: 0;
    left: 0;
    height: 100%;
    background: black;
    text-align: center;
    padding-top: 25px;
}

Css zmiana nr 1 Slektor #countries wartość : min-height: 100vh;

const alphabet = {1:"a", 2:"b", 3:"c", 4:"d", 5:"e", 6:"f", 7:"g", 8:"h", 9:"i", 10:"j", 11:"k", 12:"l", 13:"m",  14:"n", 15:"o", 16:"p", 17:"q", 18:"r", 19:"s", 20:"t", 21:"u", 22:"v", 23:"y", 24:"z"};
const alphabetDiv = document.querySelector('#alphabet');
const input = document.querySelector('.search-input');
let countries = document.querySelectorAll('.country-name');
let isLetterSelected = false;
 
function createAlphabet() {
    let alphabetContent = '';
    for (i=1; i<=Object.keys(alphabet).length; i++) {
        alphabetContent+=`<div class="alphabet-letter">${(alphabet[i]).toUpperCase()}</div>`;
    }
    alphabetDiv.innerHTML = alphabetContent;
}
 
 
document.addEventListener("DOMContentLoaded", createAlphabet);
 
alphabetDiv.addEventListener('click', ( {target} ) => {
    if (!target.matches('.alphabet-letter')) {
        return;
    } else {
        if (target.classList.contains('selected')) {
            target.classList.remove('selected');
            isLetterSelected = false;
            let firstLetter = '';
            let names = Array.from(countries);
            names.forEach( (el) => {
                if (el.firstElementChild.textContent[0].toUpperCase().indexOf(firstLetter) != -1) {
                    el.closest('.country').style.display = 'flex';
                } else {
                    el.closest('.country').style.display = 'none';            
                }
            })
        } else {
            const alphabet = document.querySelector('#alphabet').children;
            const alphabet2 = Array.from(alphabet);
                alphabet2.forEach( (letter) => {
                if (letter.classList.contains('selected')) {
                    letter.classList.remove('selected');
                }
            })
 
            target.classList.add('selected');
            let firstLetter = target.textContent.toUpperCase();
            let names = Array.from(countries);
            names.forEach( (el) => {
                if (el.firstElementChild.textContent[0].toUpperCase().indexOf(firstLetter) != -1) {
                    el.closest('.country').style.display = 'flex';
                } else {
                    el.closest('.country').style.display = 'none'; 
                }
            })
        }
}})
 
function searchCountry(e) {
    const alphabet = document.querySelector('#alphabet').children;
    const alphabet2 = Array.from(alphabet);
    alphabet2.forEach( (letter) => {
        if (letter.classList.contains('selected')) {
            letter.classList.remove('selected');
        }
    })
    isLetterSelected = false;
     
    let names = Array.from(countries);
    names.forEach( (el) => {
        if ((el.firstElementChild.textContent).toLowerCase().indexOf(e.target.value.toLowerCase())!=-1) {
            el.closest('.country').style.display = 'flex';
        } else {
            el.closest('.country').style.display = 'none';
        }
    })
}
 
input.addEventListener('keyup', searchCountry);

JS bez zmian

Pozdrawiam Sedecznie