Как избавиться от пустого места снизу страницы?

Question

drugolek @drugolek

CSS

Как избавиться от пустого места снизу страницы?

Доброго времени суток. Не могу понять, как мне избавиться от пустого места снизу страницы при увеличении высоты окна. Хочу добиться того, чтобы рамки растягивались до низа страницы и контент выравнивался по центру страницы.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TEST</title>
    <link rel="stylesheet" href="style.css">
    <style>
        html { overflow:  hidden; }
    </style>
</head>
<body>
    <div id="content" class="all">
        <h1 class="divider">TEXT</h1>

        <div class="header">
            <ul class="hr">
                <li><a class="link" href="#">Link</a></li>
                <li><a class="link" href="#">Link</a></li>
                <li><a class="link" href="#">Link</a></li>
            </ul>
        </div>

        <h1 class="middletext">...CONTENT...</h1>
        <h2 class="divider" id="bot">TEXT</h2>
      </div>
</body>
</html>

html{
    background-color: black;
    min-height: 100%;
    background-size: cover;
    font-family: 'Basis Grotesque Pro';
    src: local('Basis Grotesque Pro Medium'), local('Basis-Grotesque-Pro-Medium'),
        url('BasisGrotesquePro-Medium.woff2') format('woff2'),
        url('BasisGrotesquePro-Medium.woff') format('woff'),
        url('BasisGrotesquePro-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    color: white;
}

#content{
    border:3px solid #fff;
    border-width:0 3px;
    display:inline-block;
    margin:25px 0;
    width:100%;
    min-height: 100%;
    list-style:none;
    padding:0;
    -webkit-transition: -webkit-transform 0.3s linear;
    margin-top: 1%;
}
  
.divider {
    font-size:30px;
    margin: -0.65em auto -0.45em;
    overflow: hidden;
    text-align: center;
    line-height: 1.2em;
    min-height: 100%;
  }
.divider:before,
.divider:after {
    content: "";
    vertical-align: top;
    display: inline-block;
    width: 50%;
    height: 0.65em;
    border-bottom: 3px solid #fff;
    margin: 0 2% 0 -55%;
    min-height: 100%;
  }
.divider:after {
    margin: 0 -55% 0 2%;
    min-height: 100%;
    bottom: 0;
  }


h1.middletext{
    font-size: 40px;
    margin-top: 20%;
    margin-bottom: 23%;
    margin-left: auto;
    margin-right: auto;
    width: 6em;
    display: flex;
    min-height: 50%;
  }

.header{
  margin-left: auto;
  margin-right: auto;
  justify-content:center;
  align-items: center;
  display: flex;
  margin-top: 1%;
  } 

ul.hr {
    margin: 0; 
    padding: 4px; 
}

ul.hr li {
    display: inline; 
    margin-right: 5px;
    color: white;
    padding: 3px; 
   }

a.link{
    color:white;
    text-decoration:none;
    font-size: 20px;
}