Текст внизу некоторых страниц моего сайта обрезается. Я заметил эту проблему в Chrome, Firefox и на мобильных устройствах с Safari, поэтому я почти уверен, что проблема в моем коде.
Снимки экрана: 
Вот минимальный рабочий пример:
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
height: 100%;
font-family: sans-serif;
font-size: 18px;
overflow: hidden;
}
blockquote {
font-size: 12px;
padding: 20px;
font-family: "Courier", serif, monospace;
width: 50%;
}
.main h1 {
color: #555;
font-size: 30px;
margin: 15px 0px;
text-align: left;
}
.main h2 {
color: dodgerblue;
font-size: 24px;
text-align: left;
}
.main h3 {
color: black;
font-style: italic;
font-size: 20px;
text-align: left;
}
.menu {
padding-top: 15px;
border-right: 3px solid #555;
height: 100%;
width: 263px;
float:left;
background-color: #555;
}
.main {
padding-right: 100px;
padding-left: 100px;
padding-top: 50px;
padding-bottom: 100px;
margin-left: 263px;
height: 100%;
overflow: auto;
text-align: justify;
}
.main a {
color: dodgerblue;
font-weight: bold;
text-decoration: none;
}
.main a:hover {
text-decoration: underline;
}
.item {
background-color: white;
border: 2px solid #555;
padding: 15px;
width: auto;
margin-bottom: 35px;
line-height: 1.6;
}
.description {
border-left: 4px solid dodgerblue;
text-align: justify;
font-size: 16px;
margin-left: 20px;
width: 75%;
padding: 20px;
background-color: #CAE6EF;
color: black;
}
hr {
border: 1px dashed black;
margin: 10px 0;
}
.row:after {
content: "";
display: table;
clear: both;
}
ul {
list-style-type: none;
margin: 0;
padding: 8px;
width: 200px;
background-color: #f1f1f1;
border: 2px dotted #f1f1f1;
border-width: thick;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li {
text-align: center;
border-bottom: 0px solid #555;
}
li:last-child {
border-bottom: none;
}
li a.active {
background-color: #555;
color: white;
}
li a:hover:not(.active) {
background-color: dodgerblue;
color: white;
}
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="menu">
<center>
<BR><BR>
<?php $x=$_GET['x'];if (empty($x)) { $x="about"; } ?>
<ul>
<li><a class="<?php echo ($x == 'about')?'active':'';?>" href="?x=about">ABOUT</a></li>
<li><a class="<?php echo ($x == 'news')?'active':'';?>" href="?x=news">NEWS</a></li>
<li><a class="<?php echo ($x == 'books')?'active':'';?>" href="?x=books">BOOKS</a></li>
<li><a class="<?php echo ($x == 'projects')?'active':'';?>" href="?x=projects">PROJECTS</a></li>
<li><a class="<?php echo ($x == 'articles')?'active':'';?>" href="?x=articles">ARTICLES</a></li>
<li><a class="<?php echo ($x == 'pres')?'active':'';?>" href="?x=pres">PRESENTATIONS</a></li>
<li><a class="<?php echo ($x == 'trans')?'active':'';?>" href="?x=trans">TRANSLATIONS</a></li>
</ul>
<BR><BR><BR>
</center>
</div>
<div class="main">
<?php $content=file_get_contents($x . ".html");echo $content; ?>
</div>
</body>
</html>
Код с одной из обрезанных страниц:
<h1>Translations</h1>
Translations without full citations are unpublished.
<BR>
<BR>
<h2 style="color:sandybrown">French</h2>
<BR>
<a href="http://barricadejournal.org/vol2issue1/only-one-solution/" target="_blank">"Only One Solution: To Remain Together!"</a>, <i>Barricade: A Journal of Antifascism & Translation</i>, Vol. 1, No. 2, 2019<BR>
<BR>
<a href="http://jffp.pitt.edu/ojs/index.php/jffp/article/view/835" target="_blank">"Logic of the Egotistical Sentence: A Reading of Descartes"</a>, <i>Journal of French and Francophone Philosophy</i>, Vol. 26, No. 1, 2018<BR>
<BR>
<a href="translations/Rachilde_The-Tooth.pdf" target="_blank">"The Tooth"</a> by Rachilde<BR>
<BR>
<a href="translations/Georges-Canguilhem_Descartes-and-Technique.pdf" target="_blank">"Descartes and Technique"</a> by Georges Canguilhem<BR>
<BR>
<a href="translations/Jacques-Derrida-on-Rimbaud.pdf" target="_blank">Derrida on Rimbaud</a><BR>
<BR>
<h2 style="color:sandybrown">Spanish</h2>
<BR>
<a href="translations/Heriberto-Yepez_The-Postborderzone.pdf" target="_blank">"The Post-Borderzone"</a> by Heriberto Yépez<BR>
<BR>
<a href="https://muse.jhu.edu/article/603053" target="_blank">"‘Against Telephysics’ from Contra la television"</a>, <i>Postmodern Culture</i>, Vol. 25, No. 1, 2014<BR>
<BR>
"A Virtual Post-Anarchist Roundtable: An Interview with Jürgin Mümken, Anton Fernendaz de Rota, and Süreyyya Evren [Part 2]", <i>Anarchist Developments in Cultural Studies</i>, 2011<BR>
<BR>
<a href="https://www.nodo50.org/ellibertario/english/Anarchist%20School-JML-2009.txt" target="_blank">"The Anarchist School: Education for Equality - J. Martín Luengo"</a>, <i>El Libertario</i>, 2009
<BR><BR><BR>
Я пытался добавить больше <br> тегов в конце содержимого, а также добавить padding-bottom и margin-bottom, но ни одна из этих попыток не предпринималась изменение вообще. Я заметил, что отсутствует нижняя стрелка полосы прокрутки (см. Изображения). Кажется, это как-то связано с проблемой, но я не могу понять, почему это так.