<html>

<head>
  <meta charset="UTF-8" />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="./styles.css" />
</head>

<body>
  <h1 class="myTitle"><a href="https://blog.sandbay.it/" target="_blank">Go to Blog SandBay</a></h1>
  <div class="content">
    <h5>A long article</h5>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br>
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br>
      <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    </p>
  </div>
  <footer>
    <p>A footer</p>
  </footer>
</body>

</html>
h1.myTitle {
  background: #236965 url("https://tools.obyte.it/img/idrobyte/logo_sfera.svg")
    no-repeat;
  background-position: 2px 2px;
  margin: 0 0 10px;
  padding: 0 0 0 60px;
  background-size: 45px;
  line-height: 46px !important;
}
h1.myTitle a {
  color: white;
  font-family: Verdana;
  font-size: 20px;
  text-decoration: none;
}
html {
  // min-height: 100%;
  // position: relative;
  height: 100%; /* the height must be 100%, in order to work the trick */
}

/** Footer at bottom */
body {
  position: relative;
  bottom: 0;
  min-height: 100%; /* for first case and third case, when the content is too short */
  padding: 0 0 100px; /* we have an example footer of 100px of height */
  height: auto; /* the height must be auto, in order to work the trick */
}
footer {
  position: absolute;
  bottom: 0;
  height: 100px; /* the fixed height chosen for the footer */
  background-color: #236965;
  left: 0;
  right: 0;
  color: white;
  text-align: center;
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.