更具体地讲，我希望内容部分（带有白色背景的部分）填充错误的空间，因此页眉和页脚具有其自己的固定大小，内容部分与填充/调整整个高度所需的大小一样大
HTML：
<!DOCTYPE html>
<html>
<head>
<title>Startseite - Malermeister Gen</title>
<link rel="stylesheet" href="css/index.css">
<script src="js/script.js"></script>
<link rel="shortcut icon" type="image/png" href="img/favicon.ico">
<meta http-equiv="Content-Language" content="de">
<meta http-equiv="last-modified" content="21.10.2018 08:22:20"> <!-- Edit: Nach Abschluss der Arbeit aktualisieren! -->
<meta charset="UTF-8">
<meta name="author" content="Til Jungbluth">
<meta name="description" content="Hier wird eine Beschreibung stehen..."> <!-- Edit: Beschreibung hinzufuegen! -->
<!-- <meta name="keywords" content="Malerorth, GmbH, Maler, Orth, Malermeister, Westerwald, Seck"> <!-- Edit: Ergaenzen! -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="wrapper">
<div id="headerWrapper">
<header id="header">
<a href="index.html"><img id="headerLogo" src="img/Logo Malerinnung.jpg" alt=""></a>
<h1 id="headerHeading">Malermeister Gen</h1>
<p id="headerSlogan"><span id="gestaltung">Gestaltung</span> - <span id="schoenheit">Schöhnheit</span> - <span id="schutz">Schutz</span></p>
</header>
<nav id="headerNav">
<a href="index.html" class="headerNavLinks" id="headerNavLinkActive">Home</a>
<a href="unser_team.html" class="headerNavLinks">Unser Team</a>
<a href="kontakt.html" class="headerNavLinks">Kontakt</a>
</nav>
</div>
<div id="contentWrapper">
<h2 id="contentHeading">Lorem ipsum dolor sit amet</h2>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mattis ligula ac dui rhoncus finibus. Duis sit amet sollicitudin lorem, id interdum nisi. Curabitur tincidunt odio vitae elit hendrerit, sit amet pellentesque nibh faucibus. Ut in molestie lectus, sed faucibus dui. Phasellus auctor finibus erat, eget iaculis nunc euismod in. Suspendisse rhoncus erat volutpat neque varius, a sodales ante pharetra. Sed ullamcorper dictum eros non porta. Nulla viverra enim id odio eleifend, eu malesuada est mollis.</p>
<p>Phasellus nec egestas dolor, a blandit nibh. Fusce sit amet volutpat turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla bibendum nunc erat, et finibus erat scelerisque sed. Praesent eget dolor dolor. Praesent sit amet nisi est. Vivamus augue purus, dapibus vitae velit et, ultricies commodo diam. Proin in justo sed mi molestie malesuada a eget enim. Donec venenatis posuere nisi. Fusce felis metus, scelerisque ut lacus ut, hendrerit porta magna.</p>
<p>Nullam dictum varius mi sit amet gravida. Sed tortor metus, bibendum et sem quis, aliquet lacinia dolor. Suspendisse eu enim eget metus tristique laoreet sit amet vel ligula. Sed risus diam, elementum ac est a, mollis porta lacus. Nullam in erat elementum, venenatis purus et, iaculis odio. Aenean et orci viverra, aliquet elit vel, blandit ipsum. Aenean id velit id tellus faucibus pretium et eu ipsum. Fusce ac libero ultricies, vestibulum eros vel, aliquam lectus. Nullam est magna, vestibulum rutrum enim a, ultricies auctor ipsum. Nunc consectetur, sem at facilisis lacinia, nibh libero pulvinar elit, et convallis massa ligula in libero. Etiam finibus imperdiet odio vel tristique. Vestibulum ornare nibh at justo dictum accumsan. Donec non sapien risus. Suspendisse sed ante vitae neque sollicitudin posuere. Fusce mollis dapibus rutrum.</p>
<p>Etiam vel odio est. Nulla quis urna bibendum, tincidunt est id, laoreet nulla. Nunc consequat, ante at blandit rutrum, nisl odio vestibulum est, ut aliquam ligula ligula in nulla. Quisque rutrum, lorem in posuere fringilla, lorem libero bibendum metus, vel aliquet ex urna sed sem. Donec quis nisi arcu. Nunc magna odio, mollis auctor tortor nec, tincidunt ornare magna. Aenean sagittis enim et libero condimentum, at pellentesque risus hendrerit. Quisque eget purus in dui semper dignissim blandit non dui. Etiam mollis vehicula nulla lacinia pretium. Ut cursus, libero eu vehicula dapibus, massa nisi venenatis ex, nec fermentum mi lacus in leo. Nunc massa orci, vestibulum in pellentesque vitae, suscipit at augue. Vestibulum tempus arcu at fermentum aliquet. Duis feugiat, lacus eu accumsan viverra, eros nisi sodales libero, non pulvinar ante erat id lorem. Phasellus mauris orci, condimentum in eros non, aliquam egestas erat. Etiam neque libero, imperdiet vitae lobortis id, ultrices efficitur ante.</p>
</div>
</div>
<footer id="footer">
<p id="footerP">© Malermeister Gen GmbH |
<a href="kontakt.html" class="footerNavLinks">Kontakt</a> |
<a href="impressum.html" class="footerNavLinks">Impressum</a>
</p>
<button onclick="topFunction()" id="scrollBackToTop" title="Go to top">Zum Seitenanfang</button>
</footer>
</div>
</body>
</html>
CSS：
body{
background: linear-gradient(to right, rgb(0, 51, 145) 0%, rgb(241, 185, 0) 50%, rgb(212, 24, 0) 100%);
margin: 0;
font-size: 14px;
}
#header{
height: 4.3em; /*Actual height is 4.1em. There was a space between #header and #headerNav, whyever...*/
margin: 0 0 -0.2em 0; /*In this way they overlap, so there's no unwanted space between.*/
padding: 0.6em;
background: darkgrey;
}
#headerLogo{
float: left;
height: 100%;
}
#headerHeading{
margin: 0 0 0 0.4em;
display: inline-block;
}
#headerSlogan{
display: block;
margin: 0.2em 0.2em 0 0;
float: right;
font-size: 1.25em;
}
#gestaltung{
color: rgb(0, 51, 145);
}
#schoenheit{
color: rgb(241, 185, 0);
}
#schutz{
color: rgb(212, 24, 0);
}
#headerNav{
height: 1.9em; /*Actual height is 1.7em. There was a space between #headerWrapper and #contentWrapper, whyever...*/
margin: 0 0 -0.2em 0;
padding: 0.5em 0 0.23em 0;
display: block;
text-align: center;
background: lightgrey;
}
.headerNavLinks{
margin: 0 0.4em;
padding: 0 0.6em;
text-decoration: none;
font-size: 1.25em;
border: 0.0625em solid black;
border-radius: 10%;
}
.headerNavLinks:hover{
background: black;
color: white;
}
#headerNavActive{
border: 0.0625em solid green;
border-radius: 10%;
}
#contentWrapper{
background: white;
padding: 0.6em;
}
#contentHeading{
margin: 0;
}
#content{
}
#content p:last-child{
margin: 1em 0 0 0;
}
#footer{
background: darkgrey;
padding: 0.6em;
}
#footerP{
margin: 0 0 0.4em 0;
text-align: center;
}
#scrollBackToTop{
background: lightgrey;
display: block;
margin: 0 auto;
}
@media only screen and (min-width: 480px){
body{
font-size: 15px;
}
}
@media only screen and (min-width: 545px){
body{
font-size: 16px;
}
#headerHeading{
margin: 0;
display: block;
}
#headerLogo{
margin: 0 0.8em 0 0;
}
}
@media only screen and (min-width: 650px){
body{
font-size: 17px;
}
}
@media only screen and (min-width: 768px){
body{
font-size: 18px;
}
#headerLogo{
margin: 0 1.2em 0 0;
}
#headerSlogan{
margin: 0.2em 0.2em 0 0;
}
}
@media only screen and (min-width: 1024px){
#wrapper{
width: 768px;
margin: auto;
}
}
@media only screen and (min-width: 1676px){ /* Just tried to make the content fit the height...*/
html{
max-height: 52.38em;
}
body{
max-height: 52.38em;
}
}
@media only screen and (min-width: 2560px){
#wrapper{
height: 100%;
}
}
答案 0 :(得分：0)
body {
height: 100vh; //sets the height of the website to fit the screen.(even if the content is too less)
overflow-y:auto; // allows vertical scroll if the content is more.
}