سوالف اندرويد




العودة   سوالف سوفت > سوالف برمجة المواقع وتطويرها > البرمجية القياسية Ajax +XML+ CSS+ JavaScript وغيرها
التسجيل المدوّنات البحث مشاركات اليوم جعل الأقسام مقروءة

الوسوم:

الرد على الموضوع
 
LinkBack أدوات الموضوع
عضو فعال جدا
#1  
مشكلة ملء الفراغ بـ css ( الارتفاع 100% )

السلام عليكم

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

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

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

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

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








معرض المرفقات
إضغط على الصورة لرؤيتها بحجمها الطبيعي

الاسم:  css1.gif‏
الزيارات: 230
الحجم:  8.0 كيلوبايت  
fayz is offline   قديم 14-06-2011, 07:42 PM
الرد مع إقتباس
عضو نشيط
#2  

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






doctor9 is offline   قديم 14-06-2011, 11:15 PM
الرد مع إقتباس
عضو فعال جدا
#3  

تفضل أخي الفاضل
كود 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>






fayz is offline   قديم 15-06-2011, 11:08 AM
الرد مع إقتباس
عضو نشيط
#4  

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






doctor9 is offline   قديم 15-06-2011, 03:56 PM
الرد مع إقتباس
عضو في سوالف
#5  

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

height: 100%;

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

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

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

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

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

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

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






__________________
ليث الخليلي .. موقعي القديم ( خلفيات شاشة - تحويل - الغاز - تفسير احلام - الشرس ).

آخر تعديل بواسطة ليث الشرس في 15-06-2011 الساعة 11:41 PM.
ليث الشرس is offline   قديم 15-06-2011, 11:38 PM
الرد مع إقتباس
عضو نشيط
#6  

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

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



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

html, body {
height: 100%;

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


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






MaJoOoDy is offline   قديم 15-06-2011, 11:57 PM
الرد مع إقتباس
عضو فعال جدا
#7  

إقتباس:
المشاركة الأصلية بواسطة 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>






fayz is offline   قديم 16-06-2011, 02:32 PM
الرد مع إقتباس
عضو فعال
#8  

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






__________________
أحب سوالف ولا احب الجدليين!
اسماء اولاد وبنات http://muslim-names.us
1000 مزاد http://1000mazad.com
موقع نكت سعوديةhttp://arab-jokes.net
massalha is offline   قديم 16-06-2011, 03:04 PM
الرد مع إقتباس
عضو نشيط
#10  

استخدم
كود HTML:
position:fixed;
في الكلاس head






__________________
Contact Me

آخر تعديل بواسطة Blank في 16-06-2011 الساعة 08:31 PM.
Blank is offline   قديم 16-06-2011, 08:30 PM
الرد مع إقتباس
عضو سوبر نشيط
#11  

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






__________________
دروس دروبال | دروبال
ابن غياث is offline   قديم 17-06-2011, 01:07 AM
الرد مع إقتباس
عضو في سوالف
#12  

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






__________________
ليث الخليلي .. موقعي القديم ( خلفيات شاشة - تحويل - الغاز - تفسير احلام - الشرس ).
ليث الشرس is offline   قديم 17-06-2011, 05:11 AM
الرد مع إقتباس
عضو نشيط
#13  

اخى قيمه 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>







آخر تعديل بواسطة risalh clup في 17-06-2011 الساعة 11:45 PM.
risalh clup is offline   قديم 17-06-2011, 11:44 PM
الرد مع إقتباس
الرد على الموضوع



أدوات الموضوع

قوانين المشاركات
لا يمكنك كتابة مواضيع جديدة
لا يمكنك إضافة ردود
لا يمكنك إرسال مرفقات
لا يمكنك تعديل مشاركاتك

كود vB متاح
كود [IMG] متاح
كود HTML غير متاح
Trackbacks are متاح
Pingbacks are متاح
Refbacks are متاح


المواضيع المشابهه
الموضوع كاتب الموضوع القسم الردود آخر مشاركة
صورة من مشكلة الفراغ اعلى الهيدر فيصل الغامدي الإصلاح والصيانة 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


جميع الأوقات بتوقيت غرينتش +3. الوقت الآن هو 03:42 PM.