[RESOLVIDO] Como criar o layout responsivo

Front-end
,
#1

Tem muito que eu não mexia com html e css, e como ocorreu de voltar a mexer eu preciso fazer um footer que fique fixo abaixo do conteudo do main, e caso nao tenha conteudo na pagina eu fiz de uma forma aqui e queria saber se esta correta ou precisa fazer alguma alteração para que ela se adeque da forma correta.

html:

<!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">
    <link rel="stylesheet" href="./global.css">
    <link rel="stytesheet" href="./css.css">
    <title>Document</title>
</head>
<header>
    <h2>FIXED</h2>
</header>
<body>
   <main>
    </main>
    <footer>
        <h1>RODAPÉ</h1>
    </footer>
</body>
</html>

css:

  header {
    width: 100%;
    padding: 30px;
    background-color: ivory;
  }

  header h1 {
    font-size: 2rem;
  }

  main {
    min-height: calc(100vh - 90px);
  }

  footer {
    width: 100%;
    position: relative;
    background-color: lawngreen;
    padding: 30px;
  }
#2

Responsividade é ficar adequado a qualquer tamanho de tela.

Não entendi oq vc quer…

Quando nao tiver nada no main é pra o footer ficar escondido, se tiver algo, mostra. É isso?

#3

Seria para o footer acompanhar o tamanho do main no caso

#4

Ficar abaixo do main, é isso? Pq se for, o footer já está acompanhando. Pelo que abri aqui

image
image.png1245×634 8.14 KB

image
image.png1243×931 10.5 KB

#5

Ou vc quer algo assim?

image
image.png1278×993 19.4 KB

#6

Fala mano eu acabei achando a combinação perfeita aqui assim o

header {

    width: 100%;

    padding: 30px;

    background-color: ivory;

  }

  header h1 {

    font-size: 2rem;

  }

  body{

    background-color: lightcoral;

    position: relative;

    padding-bottom: 30px;

    min-height: 100vh;

  }

  main {

    /* min-height: calc(100vh - 90px); */

  }

  footer {

    bottom: 0;

    width: 100%;

    position: absolute;

    /* position: relative; */

    background-color: lawngreen;

    padding: 30px;

  }
#7

Esse aqui ocupa o espaço perfeito da tela sem criar a barra do lado