0
Ich habe eine Seite mit einer Kopfzeile und einer Fußzeile. Die Fußzeile wird an den unteren Rand der Seite verschoben, wenn kein Inhalt zum Herunterdrücken verfügbar ist. Das Problem ist, dass ein div mit einem Hintergrundbild nicht den Raum von der Kopfzeile bis zur Fußzeile füllt. Auch seine Eltern main wird nicht die Größe ändern, um die Seite zu füllen. Was kann ich tun?Wie kann ich sicherstellen, dass das Backgorund-Bild den gesamten Bildschirm einnimmt?
html {
height: 100%;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
background-color: #f5f5f5;
margin: 0;
padding: 0;
position: relative;
min-height: 100%;
}
#in {
width: 1000px;
margin-left: auto;
margin-right: auto;
height: 100%;
}
header {
background-color: #131b23;
border-bottom: 6px solid #0f151a;
text-align: center;
left: 0;
top: 0;
width: 100%;
height: 160px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
z-index: 99;
}
#heading {
font-family: "titlefont";
color: #c03221;
font-size: 55px;
display: inline-block;
margin-bottom: -7px;
margin-top: 15px;
}
#subheading {
font-family: "slogantextfont";
font-size: 25px;
margin-top: 0px;
color: #f6ae2d;
margin-bottom: 30px;
}
main {
text-align: center;
background: #f5f5f5 url("https://images.unsplash.com/photo-1510940725340-44c002560b46?dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D") no-repeat center center;
background-size: cover;
}
#title {
margin: 0px;
padding: 0px;
}
footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #25211e;
border-top: 6px solid #1d1a18;
text-align: center;
height: 80px;
z-index: 98;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
#credit {
font-family: "Helvetica";
font-size: 14px;
color: #c1b497;
font-weight: 600;
}<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<header>
<h1 id="heading">My Page</h1>
<h2 id="subheading">BLABLA BLA BLA BLA BLA BLA</h2>
</header>
<main>
<h2 id="title">PICTURE</h2>
<h2 id="title">PICTURE</h2>
<h2 id="title">PICTURE</h2>
</main>
<footer>
<p id="credit">BLABLA BLA BLA BLA BLA BLA</p>
</footer>
</body>
</html>
, aber jetzt hängt ein Teil des Bildes über der Fußzeile – Belonar
die Höhe von main auf calc setzen (100% - 240px); 240px ist die Höhe von Fußzeile + Kopfzeile. –
danke! ist der Rand des Headers 6px und der Fußzeile 6px irrelevant und warum ändert sich die Höhe von Fußzeile und Kopfzeile, wenn ich \t box-sizing: border-box ;? – Belonar