این بخش در مورد ویژگی height در CSS صحبت می‌کند که اندازه ارتفاع حوزه محتوای یک عنصر را تنظیم می‌کند. در صورتی که مقدار box-sizing به border-box تنظیم شده باشد، ویژگی height ارتفاع حوزه حاشیه (border area) را تعیین می‌کند.
مقداری که توسط ویژگی height مشخص می‌شود، توسط مقادیر تعریف شده توسط ویژگی‌های min-height و max-height بازنویسی می‌شود.
مقادیر ممکن:
- length: مقدار طول مشخصی مانند پیکسل (px)، سانتیمتر (cm)، اینچ (in)، و غیره.
- percentage: درصدی از ارتفاع عنصر محتوا را تشکیل می‌دهد.
- auto: مرورگر به طور خودکار ارتفاع را بر اساس محتوا محاسبه می‌کند. این مقدار پیش‌فرض است.
- max-content: ارتفاع ترجیحی داخلی (intrinsic preferred height) را تعیین می‌کند.
- min-content: ارتفاع حداقلی داخلی (intrinsic minimum height) را تعیین می‌کند.
- fit-content: فضای موجود توسط جعبه استفاده می‌شود، اما هرگز از max-content تجاوز نمی‌کند.
- fit-content (<length-percentage>): فرمول fit-content استفاده می‌شود، به عبارت دیگر، min(max-content, max(min-content, <length-percentage>)).
- clamp(): انتخاب مقدار میانی در محدوده‌ای از مقادیر را مشخص می‌کند که بین حداقل و حداکثر ارتفاع تعیین شده است.
مقادیر منفی مانند height: -200px پذیرفته نمی‌شوند.
این ویژگی به تمام عناصر HTML به جز عناصر شناور غیر جایگزین، ستون‌های جدول و گروه‌های ستون اعمال می‌شود.
سینتکس DOM:
object.style.height = "100px";Length Unit
این قسمت یک نمونه کد HTML و CSS است که نحوه استفاده از واحدهای طول برای تنظیم ارتفاع یک عنصر div را نشان می‌دهد.
در این کد، دو عنصر div تعریف شده است که با استفاده از CSS تنظیماتی برای ارتفاع خود دارند.
-
ابتدا، یک عنصر div با کلاس “a” تعریف شده است. ارتفاع این عنصر با استفاده از واحد پیکسل (px) به 100 پیکسل تنظیم شده است.
-
سپس، یک عنصر div با کلاس “b” تعریف شده است. ارتفاع این عنصر با استفاده از واحد اینچ (in) به 2.5 اینچ تنظیم شده است.
بنابراین، این کد با استفاده از واحدهای طول مختلف، ارتفاع دو عنصر div را مشخص کرده است، یکی با واحد پیکسل و دیگری با واحد اینچ.
<html>
<head>
<style>
div {
border: 1px solid black;
margin-bottom: 5px;
}
div.a {
height: 100px;
background-color: rgb(230, 230, 203);
}
div.b {
height: 2.5in;
background-color: rgb(230, 230, 203);
}
</style>
</head>
<body>
<div class="a">This div element has a height of 100px.</div>
<div class="b">This div element has a height of 2.5 inches.</div>
</body>
</html>Percentage value
این بخش یک نمونه کد HTML و CSS را نشان می‌دهد که نحوه استفاده از مقادیر درصدی برای تنظیم ارتفاع یک عنصر div را نشان می‌دهد.
-
در این کد، دو عنصر div تعریف شده است که با CSS تنظیماتی برای ارتفاع خود دارند.
-
ابتدا، یک عنصر div با کلاس “a” تعریف شده است. ارتفاع این عنصر با استفاده از مقدار 80٪ تنظیم شده است. این بدان معناست که ارتفاع این عنصر 80٪ از ارتفاع عنصری است که در آن قرار دارد. به عبارت دیگر، ارتفاع آن با توجه به ارتفاع عنصر مادر محاسبه می‌شود.
-
سپس، یک عنصر div با کلاس “b” تعریف شده است. اما این بار ارتفاع با مقدار 120٪ تنظیم شده است. این مقدار نامعقول است، زیرا به معنای آن است که ارتفاع این عنصر بیشتر از ارتفاع عنصر مادر است. این امر ممکن است باعث ایجاد اشکال در طراحی وبسایت شود و به عملکرد صفحه نیز آسیب بزند.
بنابراین، استفاده از مقادیر درصدی برای تنظیم ارتفاع یک عنصر، به ویژه زمانی که مقدار آن بیشتر از 100٪ است، نیازمند دقت بیشتر و درک دقیق‌تری از ساختار و ترتیب عناصر HTML است.
<html>
<head>
<style>
div {
border: 1px solid black;
margin-bottom: 5px;
}
div.a {
height: 80%;
background-color: rgb(230, 230, 203);
}
div.b {
height: 120%;
background-color: rgb(236, 190, 190);
}
</style>
</head>
<body>
<div class="a">This div element has a height of 80%.</div>
<div class="b">This div element has a height of 120%.</div>
</body>
</html>auto value
در این بخش، یک نمونه کد HTML و CSS ارائه شده است که نحوه استفاده از مقدار auto برای تنظیم ارتفاع یک عنصر div را نشان می‌دهد.
در کد ارائه شده، یک عنصر div با کلاس “auto” تعریف شده است. این عنصر div دارای تنظیماتی برای ارتفاع به عنوان auto است.
-
در CSS، ارتفاع عنصر div با استفاده از خاصیت height تعیین شده است که به مقدار auto تنظیم شده است. این بدان معناست که ارتفاع این عنصر div به طور خودکار بر اساس محتوا محاسبه می‌شود.
-
همچنین، به عنصر div زمینه رنگ زرد داده شده است تا تفاوت بین این عنصر و سایر عناصر مشخص شود.
-
همچنین برای افزودن یک فاصله‌ی خالی پیرامون محتوا، از خاصیت padding با مقدار 20px استفاده شده است.
بنابراین، با استفاده از مقدار auto برای ارتفاع، ارتفاع عنصر div به طور خودکار بر اساس محتوا محاسبه می‌شود و عرض عنصر تا حدی که نیاز دارد تغییر می‌کند.
<html>
<head>
<style>
div.auto {
height: auto;
background-color: yellow;
padding: 20px;
margin-bottom: 5px;
}
</style>
</head>
<body>
<div class="auto">This div element has a height set as auto.</div>
</body>
</html>Using max-content and min-content
در این قسمت، یک نمونه کد HTML و CSS ارائه شده است که نحوه استفاده از مقادیر max-content و min-content برای تنظیم ارتفاع یک عنصر div را نشان می‌دهد.
-
در این کد، دو عنصر div تعریف شده است.
-
برای هر دو عنصر div، یک حاشیه با رنگ متفاوت وضع شده تا تفاوت بین آنها مشخص شود.
-
برای عنصر div با کلاس “c”، ارتفاع با استفاده از مقدار max-content تنظیم شده است. این بدان معناست که ارتفاع این عنصر به حداکثر ارتفاع ممکن بر اساس محتوا تنظیم می‌شود. در مثال ارائه شده، محتوای عنصر div تکرار شده است تا بیشترین ارتفاع ممکن ارزیابی شود.
-
برای عنصر div با کلاس “d”، ارتفاع با استفاده از مقدار min-content تنظیم شده است. این بدان معناست که ارتفاع این عنصر به حداقل ارتفاع ممکن بر اساس محتوا تنظیم می‌شود.
به این ترتیب، با استفاده از مقادیر max-content و min-content، ارتفاع عناصر div به طور دقیق بر اساس محتوای آنها تنظیم می‌شود، بدون نیاز به تعیین یک ارتفاع ثابت.
<html>
<head>
<style>
div {
border: 1px solid black;
margin-bottom: 5px;
}
div.c {
height: max-content;
background-color: bisque;
}
div.d {
height: min-content;
background-color: darkseagreen;
}
</style>
</head>
<body>
<div class="c">This div element has a height as max-content. This div element has a height as max-content.
This div element has a height as max-content. This div element has a height as max-content. This div element has a height as max-content.</div>
<div class="d">This div element has a height of min-content.</div>
</body>
</html>Image
در این بخش، یک نمونه کد HTML و CSS ارائه شده است که نحوه اعمال ارتفاع برای یک تصویر را نشان می‌دهد.
-
در این کد، یک تصویر با استفاده از تگ
<img>تعریف شده است. این تصویر با استفاده از مقدار src به یک فایل تصویری ارجاع می‌دهد و با استفاده از مقدار alt توضیحات جایگزین را مشخص می‌کند. -
در CSS، به تصویر با استفاده از کلاس “.demoImg” اعمال شده است. با استفاده از این کلاس، تنظیماتی برای ارتفاع تصویر اعمال شده است.
-
خاصیت margin-top با مقدار 15px تنظیم شده است تا یک فاصله‌ی بالایی بین تصویر و عناصر دیگر برقرار شود.
-
خاصیت height با مقدار 200px تنظیم شده است تا ارتفاع تصویر به 200 پیکسل تعیین شود.
-
همچنین، خاصیت margin-right با مقدار 0.5in تنظیم شده است که یک فاصله‌ی راستی بین تصویر و عناصر دیگر به اندازه‌ی 0.5 اینچ ایجاد می‌کند.
به این ترتیب، با استفاده از CSS، ارتفاع تصویر به طور دقیق تنظیم شده است و با استفاده از واحدهای px و in این اندازه‌گیری اعمال شده است.
<html>
<head>
<style>
.demoImg {
margin-top: 15px;
height: 200px;
margin-right: 0.5in;
}
</style>
</head>
<body>
<img class="demoImg" src="images/scancode.png" alt="image-height">
</body>
</html>Using clamp()
در این بخش، یک نمونه کد HTML و CSS ارائه شده است که نحوه استفاده از تابع clamp() برای تنظیم ارتفاع و عرض یک عنصر را نشان می‌دهد.
-
در کد ارائه شده، یک عنصر
<p>تعریف شده است که محتوای متنی دارد. -
در CSS، به عنصر
<p>اعمالی اعمال شده است. با استفاده از خاصیت display با مقدار inline-flex، عنصر به عنوان یک المان اینلاین با قابلیت انعطاف فعال می‌شود. -
خاصیت border با مقدار 1px solid black، حاشیه‌ی عنصر را با یک خط و رنگ سیاه تعیین می‌کند.
-
خاصیت background-color با مقدار yellow، رنگ پس‌زمینه عنصر را به زرد تنظیم می‌کند.
-
خاصیت height با استفاده از تابع clamp() تعیین شده است. تابع clamp() به عنوان ورودی سه مقدار می‌گیرد: مقدار حداقل (min)، مقدار پیش‌فرض (default) و مقدار حداکثر (max). در این مثال، ارتفاع عنصر
<p>بین 20 پیکسل و 180 پیکسل تنظیم می‌شود، اما اگر اندازه صفر یا منفی باشد، حداقل مقدار 20 پیکسل و اگر بیشتر از 180 پیکسل باشد، حداکثر مقدار 180 پیکسل در نظر گرفته می‌شود. -
همچنین، خاصیت width نیز با استفاده از تابع clamp() تعیین شده است. این بار اندازه عرض عنصر
<p>بین 50 پیکسل و 200 پیکسل تنظیم می‌شود. -
خاصیت padding با مقدار 1em، فاصله داخلی عنصر را با اندازه 1 برابر با اندازه فونت تعیین می‌کند.
-
خاصیت margin با مقدار 2em، فاصله بیرونی عنصر را با اندازه 2 برابر با اندازه فونت تعیین می‌کند.
با استفاده از تابع clamp()، می‌توان به راحتی ارتفاع و عرض عنصر را تنظیم کرد و مقادیر مشخص شده در محدوده‌ی حداقل و حداکثر را رعایت نمود.
<html>
<head>
<style>
p{
display: inline-flex;
border: 1px solid black;
background-color: yellow;
height: clamp(20px, 100px, 180px);
width: clamp(50px, 100px, 200px);
padding: 1em;
margin: 2em;
}
</style>
<body>
<div>
<p>The clamp function is used for height & width, where the background color is selected for the value between the
min and max ranges of height and width.</p>
</div>
</body>
</html>Related Properties
این بخش شامل لیستی از ویژگی‌های مرتبط با ارتفاع در CSS است که هرکدام مفادیر خاصی را تنظیم می‌کنند. این ویژگی‌ها عبارتند از:
-
max-height: این ویژگی یک سقف بالایی برای ارتفاع عنصر تعیین می‌کند. به این ترتیب، ارتفاع عنصر نمی‌تواند بیشتر از این مقدار باشد.
-
min-height: این ویژگی یک حد پایینی برای ارتفاع عنصر تعیین می‌کند. ارتفاع عنصر حداقل می‌تواند به این مقدار کاهش یابد.
-
min-content: این ویژگی ارتفاع حداقلی داخلی محتوای عنصر را تعیین می‌کند. به عبارت دیگر، ارتفاع کمترین مقداری است که محتوای عنصر می‌تواند داشته باشد.
-
max-content: این ویژگی ارتفاع حداکثری داخلی محتوای عنصر را تعیین می‌کند. این به معنای این است که ارتفاع بیشترین مقداری است که محتوای عنصر می‌تواند داشته باشد.
-
fit-content: این ویژگی محتوای عنصر را به اندازه‌ای تنظیم می‌کند که بسته به اندازه موجود قابل جاگذاری باشد. به عبارت دیگر، عنصر به اندازه محتوا منطبق می‌شود.
-
fit-content(): این تابع یک اندازه داده شده را بر اساس فرمول min(maximum size, max(minimum size, argument)) محدود می‌کند. به این ترتیب، می‌توان با استفاده از این تابع یک اندازه معین را در محدوده‌هایی مشخص شده تنظیم کرد.
با استفاده از این ویژگی‌ها، می‌توان کنترل دقیق‌تری بر روی ارتفاع عناصر در CSS داشت و آنها را به شکلی مناسب برای طراحی و نمایش محتوا تنظیم کرد.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام