Hier mal mit Flexbox
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
* {
margin:0;
padding:0;
}
.container {
display:flex;
flex-direction: column;
margin: 5px;
width:420px;
min-height:650px;
border: 1px solid blue;
text-align:center;
}
header,footer {
padding:10px;
flex:none;
}
header h2 {
text-align:center;
color:blue;
}
main {
flex:auto;
background:#eee;
}
footer div {
display:flex;
}
footer button , footer input {
margin:1px;
flex:1;
background: #00AFFF;
color: white;
text-align: center;
cursor: pointer;
height:40px;
border: 1px solid #000;
}
footer button:hover {
background-color: red;
}
footer input {
height:auto;
padding: 5px;
margin:20px;
}
footer p {
margin-top:10px;
padding:5px;
background-color: #ddd;
border:1px solid #0090E0;
}
</style>
</head>
<body>
<div class="container">
<header>
<h2>Arbeitsspeicher Übung 3</h2>
</header>
<main>
hier kann etwas rein
</main>
<footer>
<div>
<button id="btn0" onclick="giveNumber(0)">0</button>
<button id="btn1" onclick="giveNumber(1)">1</button>
<button id="btn2" onclick="giveNumber(2)">2</button>
<button id="btn3" onclick="giveNumber(3)">3</button>
<button id="btn4" onclick="giveNumber(4)">4</button>
<button id="btn5" onclick="giveNumber(5)">5</button>
<button id="btn6" onclick="giveNumber(6)">6</button>
<button id="btn7" onclick="giveNumber(7)">7</button>
<button id="btn8" onclick="giveNumber(8)">8</button>
<button id="btn9" onclick="giveNumber(9)">9</button>
</div>
<div>
<input type="button" value="Start mit Level 1">
<input type="button" value="Nächstes Level">
</div>
<p id="LevelLabel">Level</p>
<p id="TimeLabel">Zeit</p>
</footer>
</body>
</html>