Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

[Dúvida] Espaçamento entre "main" e "footer".

Referente ao curso HTML e CSS: cabeçalho, footer e variáveis CSS

por Izabela de Paula Magalhaes
| 55.5k xp | 10 posts

imagem com espaçamento entre o main e o footer 

<!DOCTYPE html>
<html lang="pt-br">
<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>Portifolio</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap" rel="stylesheet">
</head>
<body>
    <header class="header">
        <nav class="header__menu">
            <a class="header__menu__link" href="#">Home</a>
            <a class="header__menu__link" href="#">Sobre mim</a>
        </nav>
    </header>
    <main class="presentation">
        <section class="presentation__content">
            <h1 class="presentation__content__title">Esse é o meu portifólio de desenvolvimento Front-End!</h1>
            <p class="presentation__content__text">Olá! Sou Izabela de Paula, estudante em desenvolvimento Front-end. Estou aprendendo HTML5, CSS3 e JavaScript. Vamos conversar?</p>
        <div class="presentation__links">
            <h2 class="presentation__links__subtitle">Acesse minhas redes:</h2>
            <a class="presentation__links__button" href="#"> 
                <img src="assets/github.png" alt="icone do github">
                Github
            </a>
            <a class="presentation__links__button" href="#"> 
                <img src="assets/linkedin.png" alt="icone do LinkedIn">
                LinkedIn
            </a>
        </div>
        </section>
        <img class="photo" src="img/profile.JPG" alt="Foto de perfil da Izabela">    
    </main>
    <footer class="footer">
        <p>Desenvolvido por Izabela de Paula</p>
    </footer>
</body>
</html>

Porque isso pode estar acontecendo?

3 respostas
por Daniel
| 44.1k xp | 5 posts
Junior

Oi izabela, não entendi muito bem a pergunta, mas acredito que esteja se referindo a não ocupação de 100% da tela.

tenta aplicar no seu css 

        html, body{
            width: 100%;
            height: 100%;
        }
        /* Essa parte retira todo espaçamento de margin, padding e border dos elementos */
        * {
            margin: 0px;
            padding: 0px;
            border: 0px;
        }

Posterior a isso já irá ocupar 100% da tela seu HTML, porém para aplicar o footer ao final da página, caso seu conteúdo não ocupe 100%, seria necessário acrescentar postion relative/absolute no conteúdo desejado.

Caso queira ajuda nesse quesito, encaminha o css que vou te auxiliando.

por Izabela de Paula Magalhaes
| 55.5k xp | 10 posts

Tentei fazer todas as instruções mas agora o espaçamento acabou entre o main e o footer e foi para depois do footer! Segue imagens e o CSS:


*{
    margin: 0px;
    padding: 0px;
    border: 0px;
}
html{
    width: 100%;
    height: 100%;
}
body{
    
    background-color: var(--background);
    color: var(--color-text-primary);
    width: 100%;
    height: 100%;
}

.footer{
    padding: 24px;
    background-color: var(--color-title);
    color: var(--background);
    position: absolute;
    width: 100%;
}

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

solução!
por Daniel
| 44.1k xp | 5 posts
Junior

tente aplicar esse código ao seu footer

      .footer {
        padding: 24px 0px 24px 0px;
        background-color: var(--color-title);
        color: var(--background);
        position: absolute;
        bottom: 0px;
        width: 100%;
      }