• 0

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

انا اتعلم الـ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;
}

 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 1

هذا بسبب أن النسبة المئوية لـ 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>

 

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن