Como fazer uma tag section ocupar toda a tela?

Front-end CSS
, ,
#1

Olá,

Gostaria de saber como posso fazer para que a section ocupe toda a tela inicial do site.

Meu código CSS está desta forma:

#sectionPrincipal{
    background-image: url(imgs/8379.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 100%;
}

E o código html está assim:

<section id="sectionPrincipal">
	<div class="container">
		<div class="row">
			<div class="col-12">
				<h1>Lorem Ipsum</h1>
				<h1>"Neque porro quisquam"</h1>
			</div>
		</div>
			<div class="row">
			<div class="col-12">
				<button type="button" class="botao-login">
					Efetuar login
				</button>
			</div>
		</div>
	</div>
</section>

O problema é que a section acaba no meio da tela, e por isso o background acaba no meio da tela também.

Como posso fazer pra section cobrir toda a tela, em qualquer tamanho de tela?

#2

Vocêpode usar 100vh no atributo height.

height: 100vh;

Se você tiver um header de 50px e um footer de 40px, você pode fazer assim:

height: calc(100vh - 90px);
1 curtida
#3

Muito obrigado pela ajuda, amigo :slight_smile:

Resolveu o problema :smiley:

#4

Que bom que deu certo :grin:
Abraço