Heim > Artikel > Web-Frontend > CSS bewirkt, dass der Seiteninhalt nicht hoch genug ist und die Fußzeile immer am unteren Rand der Seite steht
CSS bewirkt, dass der Seiteninhalt nicht hoch genug ist und die Fußzeile immer am unteren Rand der Seite steht
- 青灯夜游nach vorne
- 2018-10-11 17:47:162318Durchsuche
In diesem Artikel erfahren Sie, wie Sie mithilfe von CSS den Effekt erzielen, dass der Seiteninhalt nicht hoch genug ist und sich die Fußzeile immer am Ende der Seite befindet. Freunde in Not können darauf verweisen . Ich hoffe, es wird Ihnen hilfreich sein.
Ich glaube, dass viele Front-End-Ingenieure beim Entwickeln von Seiten auf diese Situation stoßen werden: Wenn die Höhe der gesamten Seite nicht ausreicht, um einen Bildschirm des Bildschirms einzunehmen, und die Fußzeile nicht am unteren Rand des Bildschirms liegt Seite, es wird meiner Meinung nach etwas unansehnlich für den Benutzer sein. Um die Fußzeile immer am Ende der Seite zu halten, können wir Folgendes verwenden:
1.min-height, um die Höhe der Mitte zu steuern Inhaltsbereich, sodass die Seitenhöhe einen Bildschirm der Anzeige ausfüllen kann, große Website-Seiten jedoch relativ groß sind. In vielen Fällen wird die Fußzeile modular hinzugefügt und die Höhe jeder Seite ist unterschiedlich. Es ist unmöglich, die Mindesthöhe festzulegen - Die Höhe des Inhaltsbereichs in der Mitte jeder Seite und die Größe des Bildschirms des Benutzers sind unterschiedlich. Daher ist es unmöglich, genau zu sein, dass die Höhe der Mindesthöhe nicht garantiert werden kann, dass der Benutzer die Fußzeile der Seite sieht Die Seite befindet sich nicht unten oder die Bildlaufleiste wird nicht auf der Seite angezeigt.
2. Die Fußzeile wird unten angezeigt. Wenn die Seite jedoch über eine Bildlaufleiste verfügt und die Seite scrollt, wird die Fußzeile über dem Inhaltsbereich angezeigt. Möglicherweise ist keiner der oben genannten Effekte der gewünschte Effekt.
Sie können die folgende Beispielmethode verwenden, um Ihr Problem zu lösen:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>猿来是勇者</title>
</head>
<!--方法一-->
<style>
*{margin: 0; padding: 0;}
html,body{height:100%;}
#container{position:relative; width:100%; min-height:100%;padding-bottom: 100px; box-sizing: border-box;}
header{width: 100%; height: 200px; background: #999;}
.main{width: 100%; height: 200px; background: orange;float:left;}
footer{width: 100%; height:100px; /* footer的高度一定要是固定值*/ position:absolute; bottom:0px; left:0px; background: #333;} </style>
<body>
<p id="container">
<header>HEADER</header>
<section class="main">MAIN</section >
<footer>FOOTER</footer>
</p>
</body>
<!--方法二-->
<!--<style>
*{margin: 0; padding: 0;}
html,body{height: 100%;}
#container{display: flex; flex-direction: column; height: 100%;}
header{background: #999; flex: 0 0 auto;height:100px;}
.main{flex: 1 0 auto;}
.bg{background:orange;height:200px;}
footer{background: #333; flex: 0 0 auto;height:100px;} </style>
<body>
<p id="container">
<header>HEADER</header>
<section class="main">
<p class="bg">MAIN</p>
</section>
<footer>FOOTER</footer>
</p>
</body>-->
</html>
Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er zum Lernen aller beiträgt. Weitere verwandte Tutorials finden Sie unter CSS-Video-Tutorial !
Das obige ist der detaillierte Inhalt vonCSS bewirkt, dass der Seiteninhalt nicht hoch genug ist und die Fußzeile immer am unteren Rand der Seite steht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!