لماذا لا يعمل height مع الوحدة المئوية في css ؟

Naif Alghamdi3 · 21 مايو 2016

انا اتعلم الـcss حالياً ومازلت مبتدئ

سؤال لماذا لايعمل الـheight property مع % ؟

قمت بتجربة أرقام كبيرة وصغيرة لكن لا يؤثر ذلك على الصفحة أبدًا

وهذا هو الكود

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="main.css">
	<title></title>
</head>
<body>
<div class="naif">
	<p>hi my name is naif</p>
</div>
</body>
</html>

.naif{
	height: 150000%;
	width: 10%;
	background-color: #00f;
	color: #fff;
}

هشام رزق الله · 21 مايو 2016

هذا بسبب أن النسبة المئوية لـ height تعود إلى الكتلة (Block) الأكبر منها لذلك يجب تحديد إرتفاع حجم الكتلة الأكبر منها بالبيكسل قبل أن تقوم بوضع نسبة مئوية.

فمثلا النسبة المئوية 50% لكتلة height:200px فهو 100 بيكسل كما في المثال التالي:

<div   id="a"  style="width: 100px; height: 200px; background-color: orange">
  <div id="aa" style="width: 100px; height: 50%;   background-color: blue"></div>
</div>

لكن نسبة 50% من الحجم الافتراضي height:auto هو 0 بيكسل لذلك لن يزداد الحجم كما في هذا المثال:

<div   id="b"  style="width: 100px;              background-color: orange">
  <div id="bb" style="width: 100px; height: 50%; background-color: blue"></div>
</div>