CSS の高さの適応性を実現するにはどうすればよいですか? CSSの高さをコンテンツに適応させる簡単な方法-CSSチュートリアル-php.cn

CSS の高さの適応性を実現するにはどうすればよいですか? CSSの高さをコンテンツに適応させる簡単な方法

不言

リリース： 2018-09-10 14:02:01

オリジナル

16787 人が閲覧しました

Web ページを開発するときに、Web ページのコンテンツが最初に設定した高さまたは幅を超える状況が発生する場合があります。この場合、次の記事でその方法を説明します。 CSS の高さの適応性を紹介します。

追記: CSS 幅適応の概要については、次の記事をご覧ください: CSS アダプティブレイアウト: CSS 幅適応を実装するには?

まず、最初に Web ページのセクションをデザインするときは、コンテンツのサイズにちょうど合うように、常に高さの値を指定します。

具体的なコード例を見てみましょう。

<!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>

ログイン後にコピー

効果は次のとおりです:

CSS の高さの適応性を実現するにはどうすればよいですか? CSSの高さをコンテンツに適応させる簡単な方法

高さの値を指定すると、コンテンツを追加するときに次の状況が発生します:

CSS の高さの適応性を実現するにはどうすればよいですか? CSSの高さをコンテンツに適応させる簡単な方法

これは、いわゆる高さの非互換性であり、CSSです。コンテンツに応じて高さを調整することはできません では、コンテンツに応じて CSS の高さを調整するにはどうすればよいでしょうか?

ここでは、height 属性を削除して、padding-bottom 値を与えるだけです。そうすれば、CSSの高さはコンテンツに応じて適応されます。

padding-bottom 属性は、要素の下のパディング (下マージン) を設定します。

具体的な高さ適応実装コードを見てみましょう:

<!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>

ログイン後にコピー

高さ適応効果は次のとおりです:

CSS の高さの適応性を実現するにはどうすればよいですか? CSSの高さをコンテンツに適応させる簡単な方法