The page consists of 2 blocks.

The bottom block (blue) in the figure should be fixed.
The upper block (red) in the figure adjusts to the height of the browser window.

Tell me how to implement without js, while the page should not scroll.

<div class="content"> <div class="main"></div> <div class="action-block"> <div class="action-step"></div> <div class="footer"></div> </div> </div>

In this case, the action-block is a blue block, and the footer will be inside it.

enter image description here

3 answers 3

Padding overlay

 html, body { height: 100%; width: 100%; margin: 0; } body { padding-bottom: 7em; box-sizing: border-box; } main { height: 100%; background: red; opacity: .5; } footer { height: 7em; background: blue; opacity: .5; } 
 <main></main> <footer></footer>

Apply calc to calculate height

 html, body { height: 100%; width: 100%; margin: 0; } main { height: calc(100% - 7em); background: red; opacity: .5; } footer { height: 7em; background: blue; opacity: .5; } 
 <main></main> <footer></footer>

Use flexbox

 html, body { height: 100%; width: 100%; margin: 0; } body { display: flex; flex-direction: column; } main { flex: 1 0 0px; background: red; opacity: .5; } footer { flex: 0 0 7em; background: blue; opacity: .5; } 
 <main></main> <footer></footer>

Use absolute positioning

 main { position: absolute; left: 0; top: 0; right: 0; bottom: 7em; background: red; opacity: .5; } footer { position: absolute; left: 0; right: 0; bottom: 0; height: 7em; background: blue; opacity: .5; } 
 <main></main> <footer></footer>

    Expand the entire page to see the result.
    It remains to specify the desired width of your footer.

     .main { background: tomato; height: calc(100vh - 250px); } .action-block { background: teal; width: 100%; height: 250px; position: fixed; bottom: 0px; } 
     <div class="content"> <div class="main"></div> <div class="action-block"> <div class="action-step"></div> <div class="footer"></div> </div> </div>

    PS parameter 100vh is relatively new, therefore not all browsers will work

    • one
      coming up with crutches calculating what kind of nonsense guys flex someone canceled? It is time to curb his power - Vasily Barbashev

     html, body { margin: 0; padding: 0; height: 100%; width: 100%; } .content { height: 100%; width: 100%; position: relative; } .main { position: absolute; left: 0; top: 0; right: 0; bottom: 250px; background-color: red; } .action-block { position: absolute; left: 0; right: 0; bottom: 0; height: 250px; background-color: blue; } 
     <div class="content"> <div class="main"> </div> <div class="action-block"> </div> </div>

    Rubber two-column (easy to convert to two-line) layout