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

[fayz]

السلام عليكم

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

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

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

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

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

[doctor9]

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

[fayz]

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

<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]

للاسف توصلت الى نفس الحل يقوم بحساب 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%;


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

[fayz]

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

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

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

height: 100%;

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

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

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

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

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

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

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

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

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

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



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

html, body {
height: 100%;

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


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

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

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

<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]

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

[أحمد عبدالمنعم]

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


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

[Blank]

استخدم

position:fixed;

في الكلاس head

[ابن غياث]

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


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

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

[ليث الشرس]

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

[risalh clup]

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

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

 <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>