1
resposta

Como fazer o conteúdo ocupar a página toda?

Bom dia, estou fazendo uns testes com o curso e criando uma página minha, aí não consigo fazer o conteúdo ocupar a página toda, alguém sabe como resolver?

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Incrições Festival Curta Cerrado</title>

    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="styleinscricoes.css">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
</head>

<body >
    <header>
        <div class="caixa">

            <h1><img src="logo1.png" alt="logo do festival curta cerrado"></h1>

                <nav>
                    <ul class="botao">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="sobreFestival.html">Sobre o Festival</a></li>
                        <li><a href="contato.html">Contato</a></li>
                        <li><a href="regulamento.html">Regulamento</a></li>
                        <li><a href="comissaoAvaliadora.html">Comissão Avaliadora</a></li>
                        <li><a href="inscricoes.html">Inscrições</a></li>
                    </ul>
                </nav>
        </div>
    </header>
    <main class="um">
    <h1 class="tituloprincipal">Inscrições</h1>

        <p class="conteudoinscricao">É com grande prazer que viemos anunciar a nova edição do Festival Curta (C)errado, as incrições já podem ser feitas através do link, 
            <a href="https://forms.gle/5d3Ju7FkcqBL7DeL7" target="blank">https://forms.gle/5d3Ju7FkcqBL7DeL7</a>  , e em breve divulgaremos novas informações!</p>
    </main>

        <footer>
        <img src="logo2.png" alt="logo do festival curta cerrado">
        <p class="copyright">&copy; Copyright Festival Curta Cerrado 2021</p>
    </footer>

</body>
</html>

body { font-family: 'Montserrat', sans-serif; }

body{ background-image: url("fundo1.jpg");

}

.um { height: 100%; }

header{ background-image: url("intervalo.png"); padding: 50px 0; }

.caixa { position: relative; width: 1260px; margin: 0 auto; }

nav { position: absolute; top: 50px; right: 0; }

nav li { display: inline; margin: 0 0 0 10px; }

nav a { text-transform: uppercase; color: #000000; font-weight: : bold; font-size: 25px; text-decoration: none; }

nav a:hover { color: #C78C19; text-decoration: underline; }

.tituloprincipal { padding: 50px; text-align: center; font-size: 30px; font-weight: bold; }

.conteudoinscricao { padding: 50px; text-align: left; font-size: 20px;

}

footer { text-align: center; background: url("intervalo.png"); padding: 40px 0 ; }

.copyright { font-size: 15px; margin: 8px 0 0; }

1 resposta

Olá Marcus! Tudo bem Maninho?!

Cara, não sei se entendi, mas vamos lá:

Quando você fala de conteúdo ocupar a página toda, imaginei o elemento footer colado a margem de baixo do browser.

Então eu colocaria no arquivo syte.css:

footer { position: fixed; bottom: 0; left: 40px; }

Não sei se é este o efeito que você deseja, mas espero que possa ter ajudado.

obs.: no meu teste, usei apenas as referencias textuais, pois não tenho as imagens; com as imagens "renderizadas", talvez precise de outras configurações.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software