0

Gostaria de saber como posso fazer um layout como o abaixo porém ficando fixado o header e o footer, caso o body aumente o header e o footer fiquem fixados.

*{
    padding: 0;
    margin: 0;
    text-decoration: none;
}

#container {
    height: 100%;
    width: 100%;
    background: green;
    position: absolute;
}
#header{
    height: 50px;
    width: 100%;
    background: red; 
    position: fixed; 
   
}


#footer {
    height: 50px;
    width: 100%;
    background: red;  
    position: absolute;  
}


#body {
    height: 92.5%;
    width: 100%;
    background: blue;
}
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="container">
    <div id="header">
      
    </div>
    <div id="body">
      
    </div>
    <div id="footer">
      
    </div>
</div>
</body>
</html>

2
  • Não entendi sua pergunta... Poderia explicar melhor?
    – bonifacio
    Commented 2/05/2017 às 13:23
  • quero colocar um conteudo na classe body mas nao quero que o header e o footer desapareceram fiquem sempre fixos.
    – user74803
    Commented 3/05/2017 às 12:21

1 Resposta 1

1

Pode-se perceber que o footer está fixo e o header não, e o valor position é respectivamente absolute e fixed. Então, é necessário somente trocar o valor de do header da seguinte forma:

#header{
    height: 50px;
    width: 100%;
    background: red; 
    position: absolute;   
}

*{
    padding: 0;
    margin: 0;
    text-decoration: none;
}

#container {
    height: 100%;
    width: 100%;
    background: green;
    position: absolute;
}
#header{
    height: 50px;
    width: 100%;
    background: red; 
    position: absolute; 
   
}


#footer {
    height: 50px;
    width: 100%;
    background: red;  
    position: absolute;  
}


#body {
    height: 92.5%;
    width: 100%;
    background: blue;
}
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="container">
    <div id="header">
      
    </div>
    <div id="body">
      
    </div>
    <div id="footer">
      
    </div>
</div>
</body>
</html>

Você deve fazer log-in para responder a esta pergunta.