Responsive layout with fixed elements?

Question

css

It is necessary to make sure that the top bar is pressed to the top, the footer, respectively, to the bottom, but the footer and the main content block must be rubber, that is, the footer can grow in height, but the content block must be pressed to it, in turn, the content block can grow and then the main scroll should be enabled.

There is the following markup:

<div class="top-bar"></div>
<div class="content"></div>
<div class="footer"></div>

and styles

.top-bar{
height: 40px;
width: 100%;
position: fixed;
}
.content{
height: 100%;
width: 100%;
}
.footer{
height: auto;
width: 100%;
position: fixed;
}

How to do it?

Answer 1