Du hast vermutlich das HTML- und BODY-Element nicht in der Höhe definiert?
Ich denke, Dir fehlt sowas in der Art:
HTML, BODY { min-height:100%; }Dass das CSS war, ist Dir aber klar... 
Achsooooo, ja das hättest du dazu sagen sollen! 
Nein Spaß beseite, das war mir schon klar, die width hatte ich ja auch dort definiert, war also naheliegend. 
Trotzdem bleibt mein Problem leider bestehen dass mein "main" div plötzlich im Header (Mit Navigation ect.(der auch richtig formatiert bleibt) hängt.
Nachtrag:
Sämtliche Abstände mach unten sind als px definiert gewesen, ändere ich sie aber jetzt in % um, reagieren sie wieder nicht.
Hallo
Ohne Link zu deiner Seite können wir dir kaum konkret helfen. Deshalb allgemein:
Höhenangaben sollten in HTML / CSS so weit wie möglich vermieden werden, da sie immer wieder zu Problemen führen. Grundsatz: Die Höhe von Elementen wird durch ihren Inhalt bestimmt.
Prozentangaben sind dann noch mal zusätzlich problembehaftet, da es viele unterschiedliche Grundlagen gibt, auf die die Prozentangaben sich beziehen. Es kommt sogar vor dass sich height-Angaben in Prozent auf die Breite beziehen. Deshalb mal zwei Links zu deiner Info:
https://developer.mozilla.org/de/docs/Web/CSS/padding-top
und
http://www.thestyleworks.de/basics/percentage.shtml
Gruss
MrMurphy
Jasperz, wenn du willst kann ich mal drauf schauen. Dafür benötige ich aber mal einen Link. Generell der Quelle: http://www.thestyleworks.de/basics/percentage.shtml würde ich nicht mehr soviel beachtung schenken. Der andere Link: https://developer.mozilla.org/de/docs/Web/CSS/padding-top hingegen ist gold richtig. Den Mozilla Dev ist die offizielle Dokumentation was JS, CSS und HTML angeht. Deswegen wenn du wissen willst wie was genau geht berufe dich immer auf diese Seite. Desweitern gibt es in CSS und HTML manchmal Tags / Eigenschaften die man mit Vorsicht nutzen sollte. Zb ist ein wunderschönes Verhalten was auch prozentualle Höhen sehr gut macht die Flexbox. Ob man diese auch verwenden kann bekommt man hier raus: http://caniuse.com/ .
Deine absoluten Positionierungen sind überflüssig. Habe dir mal deine Seite mit FLEXBOX umgestellt.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
html , body {
height:100%;
}
body {
margin:0;
padding:0;
display:flex;
flex-direction: column;
font-size: 25px;
color:#fff;
background: url(../Media/BMW_Munchen.jpg) no-repeat center #008 fixed;
background-size:cover;
}
header,footer {
padding:0 10px;
flex:none;
}
header img {
width:4%;
}
main {
display:flex;
flex:auto;
align-items: center;
justify-content:center;
}
main article {
padding:10px;
color:#fff;
text-align:center;
}
main h1:after {
content:"";
margin-top:2rem;
width:50%;
display:inline-block;
border-bottom:1px solid #fff;
}
</style>
</head>
<body>
<header>
<a href="index.html"><img src="Media/JH_Logo1.png"></a>
</header>
<main>
<article>
<h1>COMING SOON</h1>
<p id="demo">245d 4h 36m 57s </p>
</article>
</main>
<footer>
<p>Footer</p>
</footer>
<script>
// Set the date we're counting down to
var countDownDate = new Date("Jan 1, 2018 00:00:00").getTime();
// Update the count down every 1 second
var countdownfunction = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Output the result in an element with id="demo"
document.getElementById("demo").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(countdownfunction);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
</script>
</body>
</html>