Fixed footer and header

Asked

Viewed 620 times

0

I wonder how I can make a layout like the below but getting fixed the header and footer, if the body increases the header and footer stay fixed.

*{
    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>

header footer

  • I don’t understand your question... I could explain it better?

  • I want to put a content in the body class but I don’t want the header and footer to be always fixed.

1 answer

1


You can see that the footer is fixed and the header is not, and the value position is respectively absolute and fixed. Then, you only need to change the header value as follows:

#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>

Browser other questions tagged header footer

You are not signed in. Login or sign up in order to post.