HTML 截断部分答案

【问题标题】：HTML cut-off sectionHTML 截断部分
【发布时间】：2020-11-03 07:44:40
【问题描述】：

在我的网站上，页面底部被截断。我在网上找到的解决方案似乎不起作用。下面我包括有问题的html部分。

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>

【问题讨论】：

你为什么使用位置：固定？

标签： html css

【解决方案1】：

您需要删除float:left并添加top:0;bottom:0，以便容器从上到下拉伸并添加overflow:auto以添加滚动条（如果需要）。

类似问题：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>

【讨论】：