ما هي الطريقة لتمديد div بشكل طولي على امتداد الصفحة باستخدام height

[مروان]

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

كما يعلم الجميع

إذا أردنا تمديد التصميم بشكل أفقي "بالعرض" ليكون ليمتد بعرض المتصفح مهما كبرت أو صغرت الشاشة، فنستخدم:

<div style="width: 100%;">
</div>

لكن ماذا لو أردت تمديد بشكل طولي من أعلى لأسفل، ما هي الطريقة ؟؟

جربت هذه الطريقة:

<div style="height: 100%;">
</div>

و جربت طرق أخرى كذلك و لكن لم تجد نفعاً !!

هل من طريقة معينة ؟

[owner]

جرب هذا الكود

<div style="min-height: 100%;">
</div>

[مروان]

جرب هذا الكود

لا و الله عزيزي ما ضبطت معاي !!

هل في طريقة أخرى ؟؟!

[تطوير]

امممم جرب التالي :

html, body{height: 100%;
margin: 0;
padding: 0;
}

[BrainStorm]

اهلا يا مروان
انا فاهم قدصك وغلبت ومالقيت حل
انت قصدك عند فتح الموقع على شاشة اكبر او مقاس اكبر يمتد التصميم والمحتوى الذى بداخلة ياخذ مسافة مابين بعضة حتى يملاء كامل المتصفح ؟؟

[Hisham Sadek]

جرب استخدام

    
html, body {
height: auto;
overflow: auto;
}

[مروان]

شكراً شباب على تفاعلكم .. بس للأسف ما ضبطت معاي الأمور اللي وضعتوها !!

BrainStorm
إي كلامك سليم .. نفس الأمر بالضبط

::

طيب أنا راح أشرح لكم شباب إيش اللي عايز أعمله بالضبط ..

عندكم مثلاً هذا الموقع:
Web Hosting Talk - The largest, most influential web hosting community on the Internet

لاحظوا الأطراف المحددة باللون الأحمر:


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

فأنا فكرت أعمل عمودين من div

الأول أعمل له float:right و أخليه متمدد عمودياً على طول الصفحة و تكون فيها جزء الخلفية الأيمن، و الثاني أخليه float:left و أخليه متمدد عمودياً على طول الصفحة و تكون فيها جزء الخلفية الأيسر ..

فبهذه الطريقة مهما توسعت الصفحة أفقياً راح يبقى العمودين على اليمين و الشمال راح تبين على أنها خلفية متمددة !!

المهم بينما أنا أكتب هذه الأسطر العلوية، وجدت فكرة تؤدي الغرض الذي أريد أن أوصل له في النهاية

[Hisham Sadek]

-- تعديل --

قمت بالتجربة و لم أجد أفضل من تلك الطريقة لاستخدامها و مثال لها على الرابط التالي :
Div Demo

[مروان]

أعتقد حسب ما فهمت أنك يمكن القيام بذلك كما قمت باستخدام عمودين div .
بعد ذلك يمكنك إعطاؤهم

background : url ('images/picname.gif') repeat-y ;
width:#px;
height: auto;
overflow: auto;

و بالطبع تحدد الـ width المطلوب للـ div .. و تغيير اسم الصورة للصورتين المستخدمتين كخلفية للعمودين

المفروض أن هذا سيقوم بتمديد الصفحة مهما طالت أو قصرت بشكل طولي في الـ div الذي حددته
أتمنى أن يكون هذا ما تقصده ..

نعم هذا ما قصدته لكن لم يجدي نفعاً

على العموم وجدت طريقة لتنفيذ فكرتي الأساسية، بدون الحاجة لعمل أعمدة ممتدة طولياً

[BrainStorm]

اهلا مروان
وصلت لحل
طيب قولنا اية هيا الطريقة؟؟

[مروان]

و علشان الجميع يستفيد

أنا عملت الحركة السابقة بالطريقة التالية:
تجربة

هذه الطريقة أصلح .. لأنه في الطرق السابقة لما يكون هناك محتويات في البوكس الرئيسي، تبقى المشكلة موجودة و هي عدم التمدد للأسفل ..

لكن بهذه الطريقة تحل المشكلة حسب ما أعتقد

[سالم العليلي]

الحل :
خل العرض : اوتو...

width: auto;

[NLP]

السلام عليكم ,,

في المثال التالي : Div Demo

قم بإضافة هذا الى المين

اي قم بإستبداله بالكامل

#main {
    background: url(http://www.pure-des.net/div-demo/b2.png);
    margin: 0 0 0 -7px;
    padding: 5px 5px 5px 19px;
    min-height: 600px;
}

[عمر الدليمي]

على العموم وجدت طريقة لتنفيذ فكرتي الأساسية، بدون الحاجة لعمل أعمدة ممتدة طولياً

مع إحترامي أخي الحبيب، لن تحتاج لتمديد موقع طولياً. إلا في حالات نادرة مثل عمل التطبيقات الإلكترونية Web 2.0.
أنا ما حبيت أعطيك الحل لأنك الظاهر أصلاً إستغنيت عنه ^^

[مروان]

مع إحترامي أخي الحبيب، لن تحتاج لتمديد موقع طولياً. إلا في حالات نادرة مثل عمل التطبيقات الإلكترونية Web 2.0.
أنا ما حبيت أعطيك الحل لأنك الظاهر أصلاً إستغنيت عنه ^^

الأخ الكريم

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

و لو راجعت الردود بشكل جيد راح تعرف الفكرة التي كنت أريد تنفيذها !!

أشوف أن هناك خطأ في ربط المسألة هذه مع تطبيقات web2.0 .. بصراحة لا أرى لها علاقة .. هل لك تفيدنا بالفكرة ؟؟!