Meine Seite ist in 3 Teile unterteilt. Das headerdas mainund das footer.
Die headerist an der Oberseite befestigt und ist 109pxmit seiner 6pxRandhöhe , so dass die maineine hat 109pxRand nach oben.
Ich möchte main, dass sich die Seite über die gesamte Seite unterhalb der Kopfzeile und bis zur Fußzeile erstreckt. Wenn kein Inhalt verfügbar ist, der zum Herunterdrücken verfügbar ist, sollte sie am unteren Bildschirmrand angezeigt werden.
Das footerist 86pxhoch, weil es ist 80pxund 6pxfür eine Grenze an der Spitze. Das footergeht nach unten und das mainerstreckt sich, aber wenn die Seite länger als die Seite footerist, wird sie nicht nach unten gedrückt.
Was kann ich tun, um das footerauf dem Boden zu halten , wenn der Inhalt des mainerhöht wird?
html {
height: 100%;
box-sizing: border-box;
}
body {
background-color: #f5f5f5;
margin: 0;
padding: 0;
position: relative;
height: 100%;
}
/* ---------------------------------------------------------------- */
main {
padding-top: 120px;
/* eigendlich 109px */
padding-bottom: 150px;
/* eigendlich 86px */
text-align: center;
}
#all {
height: 100%;
}
#header {
background-color: #25211e;
border-bottom: 6px solid #1d1a18;
text-align: center;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 103px;
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: #c1b497;
font-size: 45px;
display: inline-block;
margin-bottom: 10px;
margin-top: 15px;
}
#footer {
background-color: #25211e;
border-top: 6px solid #1d1a18;
text-align: center;
position: absolute;
right: 0;
bottom: 0;
left: 0;
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>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Page</title>
<script src="script.js"></script>
</head>
<body>
<div id="all">
<header id="header">
<h1 id="heading">My Page</h1>
</header>
<main id="main">
<h2>Content</h2>
<h2>Content</h2>
<h2>Content</h2>
<h2>Content</h2>
<h2>Content</h2>
<h2>Content</h2>
<h2>Content</h2>
<h2>Content</h2>
<h2>Content</h2>
<h2>Content</h2>
<h2>Content</h2>
<h2>Content</h2>
<h2>Content</h2>
<h2>Content</h2>
<h2>Content</h2>
<h2>Content</h2>
<h2>Content</h2>
<h2>Content</h2>
<h2>Content</h2>
<h2>Content</h2>
</main>
<footer id="footer">
<p id="credit">FOOTER</p>
</footer>
</div>
</body>
</html>Entfernen Sie alle eingestellten Höhen außer Kopf- und Fußzeile, entfernen Sie die absolute Position aus der Fußzeile und verwenden Sie Ansichtsfenstereinheiten vhfür die Höhe in mainKombination mit CSS Calc, und schon kann es losgehen.
Ich habe auch hinzugefügt overflow: hidden, mainum den durch das verursachten kollabierenden Rand auszugleichen h1, und box-sizing: border-boxso wird die Polsterung in die eingestellte Breite einbezogen.
html, body {
margin: 0;
}
body {
background-color: #f5f5f5;
}
/* ---------------------------------------------------------------- */
main {
min-height: calc(100vh - 86px);
padding-top: 109px;
text-align: center;
box-sizing: border-box;
overflow: hidden;
}
#header {
background-color: #25211e;
border-bottom: 6px solid #1d1a18;
text-align: center;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 103px;
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: #c1b497;
font-size: 45px;
display: inline-block;
margin-bottom: 10px;
margin-top: 15px;
}
#footer {
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;
}<div id="all">
<header id="header">
<h1 id="heading">My Page</h1>
</header>
<main id="main">
<h2>Content</h2>
<h2>Content</h2>
<h2>Content</h2>
<h2>Content</h2>
<h2>Content</h2>
<h2>Content</h2>
<h2>Content</h2>
<h2>Content</h2>
</main>
<footer id="footer">
<p id="credit">FOOTER</p>
</footer>
</div>Dieser Artikel stammt aus dem Internet. Bitte geben Sie beim Nachdruck die Quelle an.
Bei Verstößen wenden Sie sich bitte [email protected] Löschen.
Lass mich ein paar Worte sagen