HTML отрезной участок

Question

На моем сайте обрезается нижняя часть страницы. Решения, которые я нашел в Интернете, похоже, не работают. Ниже я включил проблемный раздел html: c.

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>

Answer 1

Вам нужно удалить float:left и добавить top:0;bottom:0, чтобы контейнер растягивался сверху вниз, и при необходимости добавить overflow:auto, чтобы добавить полосу прокрутки.

Аналогичный вопрос: Исправьте позиция div, которая должна прокручиваться при переполнении содержимого

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>