اذهب إلى المحتوى

السؤال

نشر

السلام عليكم

اثناء تنسيق div  فى الصفحة واعطاء العرض والطول قيمة مطلقة مثلا 70% للعرض والطول 100%

فان العرض يأخذ بالفعل 70% من مساحة عرض الصفحة

لكن المشكلة ان الطول لا يأخذ سوى مساحة المحتوى فقط

اريد كيف اجعل ال div يأخذ المساحة الكلية لطول الصفحة حتى ان لم يكن به اي محتوى

<style type="text/css">
<!--	
.div_main{
width:70%;
height:100%;
}

وسوف تبدوا الصفحة هكذا

p_18780t1jt1.png

Recommended Posts

  • 1
نشر

وعليكم السلام ورحمة الله وبركاته 

مرحباً حمادة: 
يمكنك ذلك عن طريق أن تعطي ال div تنسيق 

.div_main {
	height: 100vh; // أي 100 من طول الشاشة المتاح أي الطول كله 
}
  • سبب أنها لم تعمل مع height: 100% هو أن النسبة المئوية ليست طول حقيقي وإنما هي طول نسبى بمعنى أنه سيأخذ طوله نسبة لطول العنصر الحاوي له ( فلو كان العنصر الحاوي له 100px وكان العنصر 100% سيأخذ أيضاً 100px ولكن لو كان العنصر ليس له أي طول ثابت وفقط يتمدد حسب طول عناصره فلن يأخذ العنصر أي طول لأنه لا توجد قيمة يتم حساب الطول بناءاً عليها ) وكمثال لو العنصر الخاص بك عنصر مباشر داخل ال body فلن يكون له طول إلا إذا أعطيت ال body طول ثابت 
    جرب أن تعطي ال body طول 100vh أو 1000px وسترى النتيجة
  • 1
نشر

وحدة القياس المئوية تعمل بشكل نسبي مع حجم الحاوي الأولي فاذا تغير حجم الحاوي الاولي فالقياس للعناصر الداخلية يتغير ايضا وهذا مثال للتبسيط

<div id="one" style="height:50px">
        <p>100% طول</p>
</div>

<div id="two" style="height:50px">
        <p>100vh طول</p>
</div>
p { display:block; background:#eee; }

#one > p { height:100%; }
#two > p { height:100vh; }

في المثال تلاحظ أن هناك نسختين تقريبا متطابقتين الاختلاف الوحيد هو أن p في div الاول لديها طول 100%  وفي div الثاني لديها 100vh .

ال p الdiv الاول اخذت طول 50px فقط لانه هو الطول النسبي لل div يعني هنا 100%=50px.

ال p الdiv الثاني اخذت طول 100% من طول الbody

Screenshot from 2021-02-21 08-02-50.png

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...