HTML 切断部分

Question

在我的网站上，页面底部被截断。 我在网上找到的解决方案似乎不起作用。 下面我包括有问题的 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>

Answer 1

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

类似的问题： 有一个固定的 position 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>