HTML, CSS - posouvání divu až za hranice při zmenšování okna

Dobrý den,

prosím vás, mám jednoduchou stránku s obrázkem na pozadí a jedním blokem. Pozadí se při změně velikosti okna přizpůsouje.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" media="all" type="text/css" href="style.css" />
    <title>Test pozadí</title>
  </head>

  <body>
    <div id="pozadi">
      <div id="blok">
          Testovací text
      </div>    
    </div>

  </body>
</html>

html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  background-color: black;
}

#pozadi {
  height: 100%;
  min-height: 600px;
  width: 100%;
  min-width: 1024px;
  background-image: url('bg05.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border: 1px solid transparent;
}

#blok {
  margin: 0 auto;
  width: 700px;
  height: 70px;
  text-align: center;
  color: white;
  background-color: red;

  margin-top: 700px;
}

Červený obdelník "blok" bych chtěl umístit do spodní poloviny obrazovky. Nastavil jsem mu prostě margin-top: 700px;
Problém nastává při změně velikosti okna prohlížeče, když hodně zmenším výšku okna, tak se červený obdelník "blok" posune hrozně dolů.
Zkoušel jsem margin-top zadávat i v procentech, ale dopadlo to stejně.

Poraďte mi prosím, jak ten blok zafixovat na místě, aby se při změně velikosti okna moc nepohyboval.
Děkuji