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:0116834Durchsuche

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:

Wie erreicht man die Anpassungsfähigkeit der CSS-Höhe? Eine einfache Möglichkeit, die CSS-Höhe an den Inhalt anzupassen

Geben Sie ihm einen Höhenwert, wenn Sie Inhalte hinzufügen:

Wie erreicht man die Anpassungsfähigkeit der CSS-Höhe? Eine einfache Möglichkeit, die CSS-Höhe an den Inhalt anzupassen

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:

Wie erreicht man die Anpassungsfähigkeit der CSS-Höhe? Eine einfache Möglichkeit, die CSS-Höhe an den Inhalt anzupassen

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

div+css links und rechts Die Spalte Die Höhe ist adaptiv und das übergeordnete Div passt sich auch an die Höhe der child_html/css_WEB-ITnose an

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!

php css 内边距 padding

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：CSS-adaptives Layout: Wie implementiert man die CSS-Breitenanpassung?Nächster Artikel：CSS-adaptives Layout: Wie implementiert man die CSS-Breitenanpassung?

In Verbindung stehende Artikel

Mehr sehen