Heim > Artikel > Web-Frontend > Wie erreicht man die Anpassungsfähigkeit der CSS-Höhe? Eine einfache Möglichkeit, die CSS-Höhe an den Inhalt anzupassen
Wie erreicht man die Anpassungsfähigkeit der CSS-Höhe? Eine einfache Möglichkeit, die CSS-Höhe an den Inhalt anzupassen
- 不言Original
- 2018-09-10 14:02:0116848Durchsuche
Bei der Entwicklung von Webseiten kann es vorkommen, dass der Inhalt der Webseite die ursprünglich festgelegte Höhe oder Breite überschreitet. In diesem Fall müssen Sie eine Höhenanpassung oder Breitenanpassung implementieren. Lassen Sie uns vorstellen über die Anpassungsfähigkeit der CSS-Höhe.
PS: Eine Einführung in die CSS-Breitenanpassung finden Sie in diesem Artikel: CSS-Adaptives Layout: Wie implementiert man die CSS-Breitenanpassung?
Wenn wir mit der Gestaltung einiger Webseitenabschnitte beginnen, geben wir ihnen zunächst immer einen Höhenwert, damit sie genau zur Inhaltsgröße passen.
Schauen wir uns einen konkreten Beispielcode an.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style type="text/css">
.con{
height: 100px;
width: 400px;
background-color: #9fcdff;
color: black;
}
</style>
<body>
<div class="con">
<p>php中文网</p>
<p>php中文网</p>
<p>php中文网</p>
</div>
</body>
</html>Der Effekt ist wie folgt:
Geben Sie ihm einen Höhenwert, wenn Sie Inhalte hinzufügen:
Dies ist die sogenannte Höheninkompatibilität, das heißt, die CSS-Höhe kann nicht entsprechend dem Inhalt angepasst werden. Wie erkennen wir also, dass die CSS-Höhe entsprechend angepasst werden kann? der Inhalt?
Es ist eigentlich ganz einfach. Hier müssen wir nur das Höhenattribut entfernen und ihm einen padding-bottom-Wert zuweisen. Dann passt sich die CSS-Höhe dem Inhalt an.
Das padding-bottom-Attribut legt den unteren Abstand (unteren Rand) des Elements fest.
Werfen wir einen Blick auf den spezifischen höhenadaptiven Implementierungscode:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style type="text/css">
.con{
padding-bottom:1cm;
width: 400px;
background-color: red;
color: black;
}
</style>
<body>
<div>
<p>php中文网</p>
<p>php中文网</p>
<p>php中文网</p>
<p>php中文网</p>
<p>php中文网</p>
</div>
</body>
</html>Der höhenadaptive Effekt ist wie folgt:
Anhang: Weitere Informationen zum Attribut „padding-bottom“ finden Sie im CSS-Handbuch, daher werde ich hier nicht auf Details eingehen.
Zusammenfassung: Die obige Methode besteht einfach darin, den Attributwert „padding-bottom“ in CSS festzulegen, um eine Höhenanpassung entsprechend dem Inhalt zu erreichen. Weitere Methoden finden Sie unter PHP Chinesisch. Finden Sie es in der Spalte CSS-Tutorial auf der Website.
Verwandte Empfehlungen:
css, DIV height adaptive_html/css_WEB-ITnose
Das obige ist der detaillierte Inhalt vonWie erreicht man die Anpassungsfähigkeit der CSS-Höhe? Eine einfache Möglichkeit, die CSS-Höhe an den Inhalt anzupassen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!