مشكلة ملء الفراغ بـ css ( الارتفاع 100% )

fayz · 14-06-2011, 07:42 PM

السلام عليكم

لدي مشكلة جلست قرابة الثلاث ساعات ولم استطع أن اتجاوزها
وهي كالتالي:
صندوق div وفيه
هيدر div ارتفاعه 150 بكسل
و بقية الصفحة لها div آخر

المشكلة أنني مضطر أن تكون محتوى الصفحة أقل من ارتفاعها
وبذلك لن تظهر خلفية div إلا مع المحتوى أم بقية الصفحة فلاتظهر ولايملء الفراغ

وأريدها أن تملء الفراغ ولكن واجهة مشكلة وهي عند وضع 100% وجدته بالنسبة للصفحة وليس بالنسبة للمبتقي من ارتفاع الصفحة بعد خصم 150 بكسل

هل هناك حل لهذه المشكلة

وأرفقت لها صورة لعلها توضح المقصود

doctor9 · 14-06-2011, 11:15 PM

لو وضعت الاكواد لكان الطريق للحل اسهل

fayz · 15-06-2011, 11:08 AM

تفضل أخي الفاضل

كود HTML:

<style type="text/css">
body {
  margin: 0px;
  padding: 0px;
  font-family: Verdana, Arial, sans-serif;
  color: Black;
   }
.box {  width: 95%; height: 100%; text-align: center; background: red;}
.head {  width: 100%; height: 150px; background: #888888; }
.bod {  width: 100%; height: 100%; background: #eeeeee; }


</style> <div class="box"> <div class="head"  >الرأس</div> <div class="bod"  >المحتوى<br />هنا<br /><br />والخلفية فقط مع المحتوى وأريدها تنزل لأسفل الصفحة</div> </div>

doctor9 · 15-06-2011, 03:56 PM

للاسف توصلت الى نفس الحل يقوم بحساب 100% + 150 بكسل
ولكن في css3 هناك داله calc تقوم بالعمليات الحسابه جربتها ولم اتوصل الى نتيجه ربما تفيدك

ليث الشرس · 11:41 PM

اخوي مافي داعي لاستخدام هذي ..

height: 100%;

واصلن الـ box مادري ليش حاطه .. استخدم هيد و بودي بس .. واذا تحب توسطهم استخدم margin-left:auto; margin-right:auto; ... ويفضل استخدام العرض بالبكسل .. يعني مثلا 950 ولاشي ...

ابتعد عن استخدام width: 100%; height: 100%; ....

--------------------

أعتذرر .. قرأت الموضوع مرة ثانية ...

بامكانك تستخدم الديف التالي بين البودي والهيد ..

<div style="clear:both"></div>

رح يحل نص المشاكل اللي راح تواجهها

MaJoOoDy · 15-06-2011, 11:57 PM

حسب ما فهمته أنك مقيد بسبب المحتوى البسيط .. وأنك تريد أن يظهر ما يحويه صندوق الـdiv الخاص بالمحتوى ...

فكرتي أنك تتكون الصفحة من جزئين ( div ) للهيدر ، و (div) للمحتوى ..
وتقوم بتثبيت ارتفاع الصفحة ، أي أنك تريد أن تجعل جسم الصفحة ممتد إلى نهاية المتصفح دون اعتبار للمحتوى وعدم التقيد بقلته أو كثرته ،،، هل هذا ما قصدته ..؟؟!! O_o

اعط الإرتفاع الكامل ( 100 % ) للوسم body وكذلك للصفحة نفسها للوسم html

html, body {
height: 100%;

أما الحاوية div الخاصة بالمحتوى أعطها أقل قيمة للإرتفاع 100 %
min-height: 100%;

أتمنى أن أكون أفدتك

fayz · 16-06-2011, 02:32 PM

إقتباس:

المشاركة الأصلية بواسطة doctor9

للاسف توصلت الى نفس الحل يقوم بحساب 100% + 150 بكسل
ولكن في css3 هناك داله calc تقوم بالعمليات الحسابه جربتها ولم اتوصل الى نتيجه ربما تفيدك

الله يعطيك العافية شاكر لك مرورك

إقتباس:

المشاركة الأصلية بواسطة ليث الشرس

اخوي مافي داعي لاستخدام هذي ..

height: 100%;

واصلن الـ box مادري ليش حاطه .. استخدم هيد و بودي بس .. واذا تحب توسطهم استخدم margin-left:auto; margin-right:auto; ... ويفضل استخدام العرض بالبكسل .. يعني مثلا 950 ولاشي ...

ابتعد عن استخدام width: 100%; height: 100%; ....

--------------------

أعتذرر .. قرأت الموضوع مرة ثانية ...

بامكانك تستخدم الديف التالي بين البودي والهيد ..

<div style="clear:both"></div>

رح يحل نص المشاكل اللي راح تواجهها

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

إقتباس:

المشاركة الأصلية بواسطة MaJoOoDy

حسب ما فهمته أنك مقيد بسبب المحتوى البسيط .. وأنك تريد أن يظهر ما يحويه صندوق الـdiv الخاص بالمحتوى ...

فكرتي أنك تتكون الصفحة من جزئين ( div ) للهيدر ، و (div) للمحتوى ..
وتقوم بتثبيت ارتفاع الصفحة ، أي أنك تريد أن تجعل جسم الصفحة ممتد إلى نهاية المتصفح دون اعتبار للمحتوى وعدم التقيد بقلته أو كثرته ،،، هل هذا ما قصدته ..؟؟!! O_o

اعط الإرتفاع الكامل ( 100 % ) للوسم body وكذلك للصفحة نفسها للوسم html

html, body {
height: 100%;

أما الحاوية div الخاصة بالمحتوى أعطها أقل قيمة للإرتفاع 100 %
min-height: 100%;

أتمنى أن أكون أفدتك

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

وهذا الكود بعد التجربة

كود HTML:

<style type="text/css">
html,body {
   height: 100%;
   }
 .head {  width: 95%; height: 150px; background: #888888; margin-left:auto; margin-right:auto; }
.bod {  width: 95%; height: 100%; background: #eeeeee; margin-left:auto; margin-right:auto; clear:both; }


</style> <div class="head"  >الرأس</div> <div style="clear:both"></div><div class="bod"  >المحتوى<br />هنا<br /><br />والخلفية فقط مع المحتوى وأريدها تنزل لأسفل الصفحة</div>

massalha · 16-06-2011, 03:04 PM

أذكر أن مشاكل مثل هذه كنت أحلها في الجافا سكريبت ... فمشكلة CSS انها لا تعمل بكل المتصفحات بنفس الشكل ... وخصوصاً البغيض IE6 (الله يرحمه ومليح انه فطس) ...
في هذه الصفحة:
http://layan.us/go/regular-expression-emulator/
يوجد سكريبت يتحكم بحجم ملف الفلاش حسب طول الصفحة - حجم الاعلانات فوق وتحت ... يمكنك استعماله ..
window.onresize

أحمد عبدالمنعم · 16-06-2011, 07:25 PM

http://almsn3.blogspot.com/2008/02/f...using-css.html

http://almsn3.blogspot.com/2008/12/k...at-bottom.html

Blank · 08:31 PM

استخدم

كود HTML:

position:fixed;

في الكلاس head

ابن غياث · 17-06-2011, 01:07 AM

إقتباس:

المشاركة الأصلية بواسطة أحمد عبدالمنعم

http://almsn3.blogspot.com/2008/02/f...using-css.html

http://almsn3.blogspot.com/2008/12/k...at-bottom.html

كنت داخل اضع الروابط لاخونا فايز الله يجزاك كل خير عنا

ليث الشرس · 17-06-2011, 05:11 AM

والله يخوي ودي اساعدك الف مرة بس مشكلة مافهمت عليك شتبي بالضبط ممكن تعطينا رابط الصفحة او مثال او ماشابه ؟

risalh clup · 11:45 PM

اخى قيمه 150px غر صحيحه ..
طالما كاتب تحت 100%
الطريقه الصحيحه انك تكتب الديف الاول 10% مثلا
والثانى 90% المتنبقى وان شاء الله هتشتغل تمام ..

الكود بعد التصحيح

كود HTML:

 <style type="text/css">  body {   margin: 0px;   padding: 0px;   font-family: Verdana, Arial,  sans-serif;   color: Black;    } .box {  width: 95%; height: 100%;  text-align: center; background: red;} .head {  width: 100%; height:  10%px; background: #888888; } .bod {  width: 100%; height: 90%;  background: #eeeeee; }   </style> <div class="box"> <div class="head"  >الرأس</div> <div class="bod"  >المحتوى<br />هنا<br /><br />والخلفية فقط مع المحتوى وأريدها تنزل لأسفل الصفحة</div> </div>

المواضيع المشابهه
الموضوع	كاتب الموضوع	القسم	الردود	آخر مشاركة
صورة من مشكلة الفراغ اعلى الهيدر	فيصل الغامدي	الإصلاح والصيانة	1	27-01-2009 09:45 PM
كيف ألغي الفراغ	phpsoft	الإصلاح والصيانة	1	23-03-2007 06:44 PM
كيف الغي هذا الفراغ ومشكله اخري ؟؟	aldrr	الإصلاح والصيانة	3	15-06-2003 02:11 PM
الفراغ	الغريبة	القسم العام	3	01-06-2000 03:56 PM
اكمل الفراغ....................	alashgan	القسم العام	6	22-02-2000 12:38 PM

أدوات الموضوع
مشاهدة نسخة مطبوعة إرسال هذه الصفحة