Hoe voorkom ik meeschalen header en footer

Door Jan Kila op 13-06-2022 18:07
2.739 views
In de volgende code schalen de header en de footer mee wanneer ik de viewport verticaal verklein.
Hoe kan ik dat voorkomen?
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  body, html, .page {
  padding: 0;
  margin: 0;
  background-color: aqua;
  box-sizing: border-box;
  height: 100vh;
  }
  .page {
    background-color: aquamarine;
    width: 80%;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    border: 1px solid black
  }
  .header {
    height: 130px;
    /* width: 100%; */
    padding: 0 25px 0;
    background-color: coral;
    border: 1px solid blue;
  }
  .container {
    /* flex: 1 1 auto; */
    display: flex;
    flex-direction: column;
  }
  .bread-crumb {
    height: 35px;
    padding: 0 25px 0;
    background-color: chocolate;
  }
  .inner-container {
    display: flex;
    padding: 0 25px 0;
    flex-direction: row;
    justify-content: space-between;
    background-color: bisque;
    border: 1px solid red;
  }
  .block-left-container{
    width: 63%;
    display: flex;
    flex-direction: column;
    background-color: chartreuse;
    border: 1px solid red;
  }
  .block-left-body {
    height: 80vh;
    background-color: aquamarine;
    border: 1px solid blue;
  }
  .block-left-foot {
    height: 40px;
    background-color: darkgray;
  }
  .block-right {
    width: 34%;
    height: 500px;
    background-color: darkgray;
    border: 1px solid red;
  }
  .footer {
    height: 160px;
    /* width: 100%; */
    padding: 0 25px 0;
    background-color: coral;
    border: 1px solid blue;   
  }
</style>
<body>

  <div class="page">

    <div class="header">
      Headare
    </div>

    <div class="container">
      <div class="bread-crumb">
        bread-crumb
      </div>
      <div class="inner-container">
        <div class="block-left-container">
          <div class="block-left-body">
            block-left-body
          </div>
          <div class="block-left-foot">
            block-left-foot
          </div>
        </div>
        <div class="block-right">
          block-right
        </div>
      </div>
    </div>

    <div class="footer">
      Footare
    </div>

  </div>
  
</body>
</html>