Fixed header and footer

Navigation
0

I would like to know how I can do a layout like below but getting the header and footer fixed, if the body increases the header and footer are 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>
    
asked by anonymous 02.05.2017 / 15:05

1 answer

1

You can see that the footer is fixed and the header is not, and the value position is absolute and fixed . Then you only have to change the value of the header 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>
    
02.05.2017 / 15:23
Using Media in Android Studio [duplicate] Concatenate string to all page href