تنسيق طول وعرض صفحة الويب في css

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

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

.div_main {
	height: 100vh; // أي 100 من طول الشاشة المتاح أي الطول كله 
}

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

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

<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