Das Kernproblem, warum dein Layout nicht so funktioniert, wie es soll, ist, dass Du dieses
Code
<div class="all">drin hast. Diesem hättest Du display:flex geben müssen.
Außerdem fehlt der Doctype.
Code
<div class="body">ist etwas verwirrend. Ich empfehle, statt dessen das main-Tag zu verwenden, das semantisch dafür vorgesehen ist.
Dann würde das HTML so aussehen:
HTML
<!doctype html>
<html>
<head>
<link href="../css/themen-home.css" rel="stylesheet">
<meta charset="UTF-8">
<title>Skytastic.eu- Forum Test1</title>
<link href="../css/header.css" rel="stylesheet">
<link href="../css/footer.css" rel="stylesheet">
</head>
<body>
<header>
<div class="header">
<div class="navigate">
<a href="../anmelden.php">
<button class="navs">Anmelden</button>
</a>
<a href="../registrieren.php">
<button class="navs">Registrieren</button>
</a>
</div>
<div class="navigate">
<a href="../">
<button class="navs">Start</button>
</a>
<form action="../beitrag-erstellen.php" method="post">
<input name="thema" type="hidden" value="Test1">
<button name="gesendet" class="navs1" type="submit">Beitrag erstellen</button>
</form>
<a href="">
<button class="navs"></button>
</a>
<a href="">
<button class="navs"></button>
</a>
<a href="">
<button class="navs"></button>
</a>
<a href="../../">
<button class="navs">Website</button>
</a>
</div>
</div>
<h1>Skytastic.eu - Forum - Test1</h1>
</header>
<main>
<h1>Es wurde bisher kein Beitrag in diesem Thema erstellt.</h1>
</main>
<footer>
<p>Erstellt von Hoppeltiger</p>
<p>Discord:
<a href="https://discord.gg/Mk4BBe">https://discord.gg/Mk4BBe</a>
</p>
<p>
<a href="../adminpannel.php">Adminpannel</a>
</p>
</footer>
</body>
</html>und das CSS so:
Code
body {
margin: 0;
padding: 0;
background-image: url("images/dia2.jpg");
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.sbutton {
border: 2px solid #595a5b;
padding: 10px 20px;
outline: none;
cursor: pointer;
transition-duration: 0.4s;
text-transform: uppercase;
border-radius: 15px;
margin-bottom: 20px;
margin-left: 20px;
text-align: center;
opacity: 0.75;
}
.sbutton:hover {
background-color: #595a5b;
color: white;
}
a {
color: black;
text-decoration: none;
}
.beitraege {
margin-top: 15px;
margin-bottom: 15px;
}
.beitraege h1 {
line-height: 0;
}
.p_dat {
text-align: right;
font-size: 1em;
}
.p {
font-size: 1em;
}
.p {
line-height: 0;
}
.einr {
display: flex;
justify-content: space-between;
}
hr {
border-color: rgba(192, 192, 192, 1);
}
header {
flex: 0 0 auto;
}
main {
padding: 15px;
background-color: rgba(255, 255, 255, 0.75);
flex: 1 1 auto;
}
footer {
flex: 0 0 auto;
}
@media(min-width: 700px) {
main {
width: 45%;
margin: 0 auto;
padding-bottom: 64px;
}
}und das Layout müsste das sein, was Du dir vorstellst:
Header oben, Footer unten und der grau hinterlegte Inhalt füllt den Raum dazwischen aus.
Aber wir haben es ja zuvor mit dem Hinweis auf Stackoverflow versucht, wo es ein fertiges Beispiel gibt, aber der TO konnte es nicht auf seine Seite übertragen.