Ciao, ci sono delle regole sbagliate. Gurda qusto un po' modificato:
codice:
<html>
<head>
<style>


#container {
   max-width: 1024px;
   margin: auto;
   background-color: pink
}
#header {
    min-height:100px;
    font-size: 45px;
    text-align: right;
	background-color: orange
}
#middle {    
    font-size: 400px;
    text-align: center;
	background-color: yellow
}
#footer {
    height: 200px;
    text-align: center;
	background-color: green;
}
</style>
</head>
<body>
<div id="container">
 <div id="header">testo1</div>
 <div id="middle">testo<br />2</div>
 <div id="footer">immagine.jpg</div>
</div>
</body>
</html>
Intanto, la property height 100% non è applicabile, non funziona come la width. Se vuoi far si che sia adattabile/fluida al massimo cosi' come vedi, puoi dare un min-height se ti aspetti un minimo di altezza e far si che si adatti/aumenti se fosse il caso in base al contenuto.
Se forzi un altezza con i px e il contenuto va oltre per via del font-size o contenuto di diverso tipo avrai l'effetto indesiderato.
Ho messo un background-color solo per distinguere meglio i contenitori con le modifiche.
Ora se provi la pagina con simulaore responsive vedrai che il testo centrate ad un certo punto forza la larghezza perchè non e' settato dinamicamente.
Per gestire dimensioni in base al formato device, si possono usare in alcuni casi le percentuali oppure regole ad hoc tipo le media query per definire le varie regole:

https://hackernoon.com/4-techniques-...s-f663791c62f0

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp