HTML cut-off section

Question

On my website the bottom of the page gets cut off. The solutions I have found online do not seem to work. Below I include the html section that is problematic.

header{
  width:270px;
  float:left;
  position:fixed;
}

<header>
  <h1>Daniele Caratelli</h1>
  <p>
    Ph.D. candidate in Economics
    <br/>
    Stanford University
    <br/>
    <img src="at.png" width=150 height=17>
  </p>
  <h3><p class="view"><a href="https://danicaratelli.github.io/">Home</a></p></h3>
  <h3><p class="view"><a href="https://danicaratelli.github.io/research.html">Research</a></p></h3>
  <h3><p class="view"><a href="https://danicaratelli.github.io/teaching.html">Teaching</a></p></h3>
  <h3><p class="view"><a href="https://danicaratelli.github.io/research/cv.pdf" target="_blank">CV</a></p></h3>
  <h3><p class="view"><a href="https://danicaratelli.github.io/extra.html">Extra</a></p></h3>
  <h3><p class="view"><a href="https://danicaratelli.github.io/extra.html">Extra</a></p></h3>
  <h3><p class="view"><a href="https://danicaratelli.github.io/extra.html">Extra</a></p></h3>
  <h3><p class="view"><a href="https://danicaratelli.github.io/extra.html">Extra</a></p></h3>
  <h3><p class="view"><a href="https://danicaratelli.github.io/extra.html">Extra</a></p></h3>
  <h3><p class="view"><a href="https://danicaratelli.github.io/extra.html">Extra</a></p></h3>
  <p class="view"><img src="bikepic_circle.png" width=270 height=270></p>
  <a class="github-button" href="https://github.com/danicaratelli" aria-label="@danicaratelli on GitHub">@danicaratelli</a>
</header>

Why are you using position: fixed? – j08691 Jul 14 '20 at 18:08 — j08691, Jul 14 '20 at 18:08

Jakub Muda · Accepted Answer · 2020-07-14T18:00:49.837

You need to remove float:left and add top:0;bottom:0 so that container is stretched from top to bottom and add overflow:auto to add scrollbar if required.

Similar question: Have a fixed position div that needs to scroll if content overflows

header{
  width:270px;
  position:fixed;
  top:0;
  bottom:0;
  overflow:auto;
}

<header>
  <h1>Daniele Caratelli</h1>
  <p>
    Ph.D. candidate in Economics
    <br/>
    Stanford University
    <br/>
    <img src="at.png" width=150 height=17>
  </p>
  <h3><p class="view"><a href="https://danicaratelli.github.io/">Home</a></p></h3>
  <h3><p class="view"><a href="https://danicaratelli.github.io/research.html">Research</a></p></h3>
  <h3><p class="view"><a href="https://danicaratelli.github.io/teaching.html">Teaching</a></p></h3>
  <h3><p class="view"><a href="https://danicaratelli.github.io/research/cv.pdf" target="_blank">CV</a></p></h3>
  <h3><p class="view"><a href="https://danicaratelli.github.io/extra.html">Extra</a></p></h3>
  <h3><p class="view"><a href="https://danicaratelli.github.io/extra.html">Extra</a></p></h3>
  <h3><p class="view"><a href="https://danicaratelli.github.io/extra.html">Extra</a></p></h3>
  <h3><p class="view"><a href="https://danicaratelli.github.io/extra.html">Extra</a></p></h3>
  <h3><p class="view"><a href="https://danicaratelli.github.io/extra.html">Extra</a></p></h3>
  <h3><p class="view"><a href="https://danicaratelli.github.io/extra.html">Extra</a></p></h3>
  <p class="view"><img src="bikepic_circle.png" width=270 height=270></p>
  <a class="github-button" href="https://github.com/danicaratelli" aria-label="@danicaratelli on GitHub">@danicaratelli</a>
</header>

HTML cut-off section

1 Answers1