تنظیم Div در صفحه

[amirferdowsi]

سلام
من در صفحه ای که میخوام طراحی کنم سه تگ Div قرار دادم ( تصویر شماره 1 ) .
Div 1 و Div 3 همیشه در بالا و پایین صفحه ثابت هستند ولی Div 2 مقدارش بیش از ارتفاع صفحه اصلی میباشد و من میخوام که فقط در Div 2 اسکرول بار نمایش داده شود نه در تمام صفحه . در ضمن من نمیخوام که از Ifaram و FramSet استفاده کنم . ( مانند تصویر شماره 2 )
ممنون میشم من رو در این زمینه راهنمایی بفرمایید .

Css مربوط به Div 1 که دربالای صفحه قرار دارد :


position: fixed;
height: 48px;
width: 100%;
top: 0px;


Css مربوط به Div 3 که در پایین صفحه قرار دارد :


position: fixed;
height: 21px;
bottom: 0px;
width: 100%;


تصویر شماره 1:24777 تصویر شماره 2 : 24778

[as13851365]

خوب برای این کار شما اول باید یک ارتفاعی برای DIV2 انتخاب کنید تا ارتفاعش ثابت باشه بعد مقدار overflow رو برابر scroll در نظر می گیری همین !



height:550px;
overflow:scrollbar;


اگه از لحاظ املایی مقدار ها درست باشند همچین چیزی باید باشه !

[emad_67]

در ادمه صحبت جناب as13851365 (http://barnamenevis.org/forum/member.php?u=35098) باید بگم که مقدار position: fixed برای ie شناخته شده نیست که مشکل ایجاد میکنه. بهتره اونو به absolute تبدیل کنی. همچنین مقدار overflow: scrollbar که گفتن باید scroll باشه که این گزینه باعث میشه اسکرول در راستای x هم ظاهر بشه. بهتره که از overflow: auto استفاده کنی تا در صورت لزوم اسکرول رو در یک راستا ظاهر کنه.

اول اینکه دیو اسکرول نداره و اصلا نمیشه براش یه اسکرول تعیین کنید/
دوم اینکه تنها راه اسکرول تگ فریم هست.
و اینکه اگر اطلاعات داخلش بیاد مقدار height دیو بیشتر میشه و کل صفحه اسکرول می خوره.برای div هم میشه scroll گذاشت و بهترین راه بلرای استفاده نکردن از iframe هست.


body
{
overflow-y: hidden;
}
.content
{
height: 80px;
overflow: auto;
border: 1px solid #000000;
margin-right: 20px;
}
کلاس content رو به یه div نسبت بده و داخلش یه چیزی بنویس تا ارتفاعش زیاد بشه بعد متوجه میشی.
همچین من margin بهش دادم تا دقیقا مشخص بشه که اسکرول مال div هست.
با overflow-y: hidden هم اومدن ارسکرولی رو که روی body در راستای محور y ها میخوره رو حذف کردم. یعنی اگر body ارتاعش زیاد هم بشه اسکرول نشون داده نشه.

[raravaice]

اول اینکه دیو اسکرول نداره و اصلا نمیشه براش یه اسکرول تعیین کنید/
دوم اینکه تنها راه اسکرول تگ فریم هست.
و اینکه اگر اطلاعات داخلش بیاد مقدار height دیو بیشتر میشه و کل صفحه اسکرول می خوره.DIV اسکرول نداره؟!
داره ، دوتا هم داره - عمودی و افقی ;)



overflow:auto;


فقط شرط انجام این کار این هست که طول و عرض div رو به صورت static مشخص کرده باشید.

موفق باشید

[amirferdowsi]

سلام
از توجه و راهنمایی تمامی دوستان ممنونم.
اما یک مشکلی اینجا هست که من میخوام Div 2 فاصله بین Div 1 و Div 3 رو پر کنه و این اندازه در رزولیشینهای مختلف با هم فرق میکنه ، یعنی نباید یک اندازه ثابت مثل 550px رو داشته باشد .

برای این مشکل چه راه حلی رو پیشنهاد میفرمایید ؟

[amirferdowsi]

سلام
کسی از دوستان در این زمینه اطلاعاتی نداره !؟

[amirferdowsi]

با توجه به تغییر رزولیشن حتما درصد بدید

سلام
دوست عزیز زمانی که به Div 2 درصد میدم ، اسکرول مربوط به اون از بین میره . :ناراحت:
میشه بیشتر توضیح بفرمائید :لبخندساده:

[amirferdowsi]

دوست عزیز اندازه دهی با px یعنی اسکرول خوردن و اندازه دهی با % یعنی نخوردن اسکرول و تغییر سایز عنصر با سایز صفحه مرورگر.
موفق باشید

سلام
پس دوست عزیز اون کنترل پنلی که عکس اون رو من در پست اول قرار دادم ، از چه روشی استفاده کرده !؟ :ناراحت::افسرده:

[raravaice]

عکس دوم مقدار height فیکس هست بدون شک
عکس اول کلا اسکرول نداره

نمونه وب بده، با 4 تا عکس نمیشه حرفی زد که طرف چی کار کرده

موفق باشی

[amirferdowsi]

عکس دوم مقدار height فیکس هست بدون شک
عکس اول کلا اسکرول نداره


سلام
دوست عزیز تصویر دومی که قرار دادم مربوط به کنترل پنلی هست که ارتفاع اون بخش نسبت به رزولیشنهای مختلف تغییر میکنه . پس نمیتونه ارتفاع ثابت داشته باشه !



نمونه وب بده، با 4 تا عکس نمیشه حرفی زد که طرف چی کار کرده


http://maildemo.smartertools.com/
این آدرس نسخه نمایشی از یک میل سرور هستش که من سعی کردم برای بخش مدیریت سایتم یک همچنین کنترل پنلی رو پیاده سازی کنم .
نام کاربری : demo@demo.com کلمه عبور : demo

اینم یک تصویر دیگه از این کنترل پنل که در اون یک Div با اسکرول قرار داده شده ( نمایش متن ایمیل )
25039

[امید امرایی]

سوال شما اونقدر به هم پیچید که بنده درست متوجه نشدم اصل قضیه چی بود اما اگه :

1- شما 3 div دارید، یکی بالا - یکی وسط - یکی پایین
2- ارتفاع div بالا و پایین ثابت
3- ارتفاع div میانی متغیر
4- div میانی دارای اسکرول عمودی ، افقی و یا هر دو باشه.
5- div میانی همواره متصل کننده دو div بالایی و پایینی باشه
6- ***می خواید Cross Browser باشه

باید از ترکیب CSS و Javascript استفاده کنید
یک نمونه رو در ضمیمه براتون قرار می دم

FiireFox, IE, Opera

[ahmad1358]

يك مثال كاملا زيبا (http://www.dhtmlgoodies.com/scripts/scrollable_div/scrollable_div.html)

[amirferdowsi]

سلام
من از این کدها در صفحات خودم استفاده کردم ، ولی با iframe مشکل داره.
چون من این صفحه رو داخل صفحه دیگه باز کردم ، در زمان لود اول هیچ مشکلی نداره ولی زمانی که با F11 مرورگر رو تمام صفحه می کنم و دوباره به حالت اول بر می گردونم صفحه دوم بهم میریزه و اسکرول ایجاد شده از خود مرورگر هم پایین تر میره ! :متعجب:
میخواستم بدونم مشکل این صفحات چیه ؟
ممنون میشم راهنمایی بفرمائید :تشویق:

اینم کد صفحات :
25409

[amirferdowsi]

سلام
دوستان ، کسی تا به حال با این مشکل مواجه نشده !؟ :ناراحت:

[amirferdowsi]

خوب چرا دیو رو برابر overflow:scroll نمی زاری که که یه چیزی مثل iframe بشه!


سلام
دوست عزیز در داخل تگ Iframe قراره چندین صفحه مختلف باز بشه ، من که نمی تونم داخل تگ Div صفحاتم رو باز کنم .

چون این صفحه که در داخل اون از Iframe استفاده کردم ، صفحه اصلی یک کنترل پنل هستش که بخشی از اون به منوها و بخش دیگر اون به صفحات مختلف این کنترل پنل مربوط میشه و چاره ای به جز استفاده از Iframe ندارم .

از راهنمایی و توجه شما هم ممنونم . :تشویق:

[amirferdowsi]

سلام
یعنی تا حالا کسی با این مشکل مواجه نشده !؟ :ناراحت: :عصبانی:

[amirferdowsi]

سلام
چرا کسی جواب نمیده !؟ :ناراحت: :گریه:
به خدا کارم گیر همین مشکله . :عصبانی++::عصبانی:
اگه لطف بفرمائید و بنده رو راهنمایی بفرمائید ممنون میشم . :لبخندساده: :تشویق:

[emad_67]

آقا من که نفهمیدم آخر مشکلت چیه؟
توی اون فایلی هم که ضمیمه کرده بودی من مشکلی ندیدم.
دقیقتر توضیح بده.

[amirferdowsi]

آقا من که نفهمیدم آخر مشکلت چیه؟
توی اون فایلی هم که ضمیمه کرده بودی من مشکلی ندیدم.
دقیقتر توضیح بده.

سلام
شما اگر ضمیمه تاپیک شماره 17 رو دریافت کرده باشید ، زمانی که صفحه برای بار اول اجرا میشه هیچ مشکل نیست ، اما زمانی که شما با استفاده از دکمه F11 مرورگر رو تمام صفحه می کنید و مجدد با همان دکمه مرورگر رو به حالت اول بر میگردانید ، اسکرول ایجاد شده در صفحه Sample.htm از محدوده iframe ایجاد شده در صفحه default پایین تر میره . در ضمن این مشکل در IE بوجود میاد .

مشکل من هم همینه . :عصبانی:

ممنون میشم اگر راهنمایی بفرمائید . :لبخندساده: :تشویق:

[emad_67]

سلام
منظورت همین نوار زرد رنگ پایین صفحه هست که بالاتر قرار میگیره؟
من اینو هر کاریش کردم درست نشد، البته دقیقا چیزی که شما میگی برای من بر عکس هست، یعنی وقتی تازه صفحه default رو باز میکنم این مشکل وجود داره و وقتی همین صفحه رو refresh میکنم یا f11 رو میزنم خوب میشه.

[raravaice]

من کد شما رو تغییر دادم به صورت زیر الان توی IE6 و Firefox به خوبی کار میکنه:



function fixAll(){
var Container = document.getElementById('container');
var Upper = document.getElementById('upper');
var Lower = document.getElementById('lower');
var Median = document.getElementById('median');
var clientHeight, medianHeight;
var UpperHeigth = 70;
var LowerHeight = 20;
if (self.innerWidth){
clientHeight = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth){
clientHeight = document.documentElement.clientHeight;
}
else{
clientHeight = document.body.clientHeight;}
Upper.style.height = UpperHeigth + 'px';
Lower.style.height = LowerHeight + 'px';
Container.style.maxHeight = clientHeight + 'px';
Container.style.height = clientHeight + 'px';
//Median.style.maxHeight = (clientHeight - (UpperHeigth + LowerHeight)) + 'px';
Median.style.height = (clientHeight - (UpperHeigth + LowerHeight)) + 'px';
}

window.onresize = function(){fixAll()};


فقط یه موضوع، این صفحه Sample.html شما کلی کد باینری توشه چیکار کردی باهاش!

موفق باشی

[amirferdowsi]

سلام
ممنون از راهنمایی ها و توجه شما دوستان :چشمک::لبخندساده::تشویق:



منظورت همین نوار زرد رنگ پایین صفحه هست که بالاتر قرار میگیره؟


خیر ، منظور من نوار اسکرول عمودی صفحه هست .



من کد شما رو تغییر دادم به صورت زیر الان توی IE6 و Firefox به خوبی کار میکنه


از زحمات شما ممنونم ، ولی در IE 7 هنوز همون مشکل باقی هست . میشه کاری کرد که در این مرورگر هم مشکل برطرف بشه ؟

با تشکر .

[امید امرایی]

بنده که متوجه نشدم مشکل شما کجاست
همون نمونه اولی رو من تو هر مرورگری تست کردم کاملا صحیح نمایش داده می شه
Opera, Firefox, IE6-8, Chrome, Konqueror, Safari !!!
شما دقیقا چه کاری می خواید انجام بدید ؟

[emad_67]

آقا بهتره به عکس از مشکلت بزاری چون منم مشکلی توی اون فایل طبق توضیحاتت ندیدم.

[raravaice]

چیزی که حائز اهمیت هست اینه که در شرایطی که شما داری کاری از دستت ساخته نیست!
به چند مورد اشاره میکنم:

1. همونطور که گفتم طراحیت رو درست کن و کد های باینری زائدی که توی صفحه وجود داره سریعا خارج کن که دردسر سازه.
2.IE7 شما patch قدیم هست چون من IE7 را همین الان نصب کردم و مشکلی وجود نداره ولی با IE7 که از 2 ماه پیش روی سیستم دیگه ای نصب بود به منظور حرف شما به وضوح رسیدم.
3.روی IE7 خودت چند بار به سرعت F11 رو بزن ، از بین میانگین هر 15 با 1 بار به درستی کار میکنه. :)
4.یه alert با مضمون بی معنی توی سورس بزار ، باز هم درست کار میکنه.

علت : توی نسخه ای که شما داری با فشردن کلید F11 رویداد window.onresize دو بار اتفاق افتاده و صفحه بزرگ میشود بار اول قبل از محو شدن windows bar و بار دوم بعد از محو شدن ولی مشکل اینجاست که در هر 2 بار یک مقدار و مقدار کلی صفحه بر میگرده یعنی مانند Firefox ارتفاع title از این میزان کم نمیشه! و با فشردن مجدد F11 رویداد window.onresize در واقع 3 بار اتفاق میافتد که رقم دقیق در بار سوم به دست میاد، که اگر در تابع خود وقفه ای مثل alert ایجاد کنید این اتفاق میافته ولی اگر وقفه ای نداشته باشید فقط 2 بار اتفاق میافته!
البته در اصل باید 2 بار اتفاق بیافته بار اول مقداد مقدار title از کل میزان کم میشه و بار دوم مقدار status bar منتهی قبل از اینکه مقدار status bar کم بشه window.onresize اتفاق میافته برای همین 15px توی محاسبات اشتباه به دست میاد.

و اما راه حل :
همونطور که گفتم این مشکل روی بعضی از IE7 ها اتفاق میافته "چرا شو از مایکروسافت بپرس ;) "
بهترین راه : نوع طراحیت رو عوض کنی.
راحتترین راه : بیخیال این مسئله بشی.
غیر استاندارد ترین راه : از alert یا یه وقفه استفاده کنی.

موفق باشی

[amirferdowsi]

سلام


آقا بهتره به عکس از مشکلت بزاری چون منم مشکلی توی اون فایل طبق توضیحاتت ندیدم.


قبل از تغییر سایز : 25697 بعد از تغییر سایز : 25698

از زحمات و راهنمایی های دوست عزیز raravaice تشکر و قدردانی می کنم . :تشویق:



بهترین راه : نوع طراحیت رو عوض کنی.

آیا شما برای اینکار روش بهتری سراغ دارید ؟
بله : امکان داره بنده رو راهنمایی بفرمائید .
خیر : پس اون سایتی که در پست شماره 14 معرفی کردم از چه روشی برای اینکار استفاده کرده که در تمامی مرورگرها درست اجرا میشه ؟



راحتترین راه : بیخیال این مسئله بشی.

اگه میتونستم به خدا همین کارو میکردم ، الان کل Template این کنترل پنل طراحی شده و لنگ همین بخشه :ناراحت: اگر هم بخوام که بیخیال این قسمت بشم ، کل طرح بهم میخوره :افسرده: من و بقیه دوستان زمانی که به اون کنترل پنل مراجعه کردیم و تصمیم گرفتیم که از چند بخش اون برای کنترل پنلهای خودمون الهام بگیریم ، فکر نمیکردیم که یه بخش به این کوچیکی اینقدر وقت ما رو بگیره و براساس همون شروع کردیم به طراحی کنترل پنل خودمون که به این مشکل برخوردیم . :گریه::گریه:

حالا اگه بشه این مشکل رو برطرف کنیم که خیلی عالی میشه :لبخندساده: و اگر هم نشده هیچ راهی بجز انجام راه حل شما نداریم .:ناراحت::ناراحت:

موفق و پیروز باشید .

[emad_67]

آقا برای من اصلا یه جور دیگست. عکس ها رو ببین:
عکس 01 برای اولین بار هست که باز میکنم و 02 برای بعد از زدن f11 یا refresh صفحه. یعنی f11 رو مزنم تازه میاد سر جاش، از ie7 هم استفاده کردم.
توی ie 6 هم که کلا تعطیله و نه نوار زرد رنگ و نه scroll رو نمایش میده.

[amirferdowsi]

سلام
برای حل این مشکل هیچ راهی وجود نداره !؟ :گریه::ناراحت::افسرده::عصبان� �++:

[امید امرایی]

راه که زیاد وجود داره
یکیش اینه که دیگه بیخیالش بشید .:چشمک: Kidding

[amirferdowsi]

راه که زیاد وجود داره
یکیش اینه که دیگه بیخیالش بشید .:چشمک: Kidding

سلام
دوست عزیز میشه راه علمی تر اون رو بفرمائید .
آخه نمونه اون زیاده ( مثل همونی که معرفی کردم ) .

[emad_67]

دوست عزیز
خیلی از چیزا پیش بینی نشده هست که ممکنه بر اساس ساختار html ئی که مینویسی اون مشکل ایجاد بشه. الان برای مشکل شما هم دلیلی علمی وجود نداره. ممکنه با تغییر ساختار کد html مشکل حل بشه. مثلا به جای table از div استفاده کن.

[amirferdowsi]

مثلا به جای table از div استفاده کن.


سلام
من اینکارو هم کردم ولی باز همین مشکل بوجود می آید .

فکر کنم کل مسیر رو دارم اشتباه میرم :متفکر:
حالا اگه امکان داره من رو راهنمایی کنید که برای طراحی یک کنترل پنل مثل اون نمونه باید از چه روشی استفاده کنم . :تشویق:
آیا انتخاب Iframe برای صفحه اصلی مناسبه ؟
برای ایجاد یک باکس دارای اسکرول عمودی مانند بخش نمایش متن ایمیل باید چیکار کرد ؟

به خدا شرمندم :خجالت::ناراحت: چون این نوع ساختار برای کنترل پنلها ، یک ساختر جدیده و ما برای این طرح خیلی زمان صرف کردیم :افسرده:
ممنون میشم که راهنمایی بفرمائید .

با تشکر .

[amirferdowsi]

سلام
اصلاً کسی از دوستان اون سایت رو دیده !؟
آیا از روش خاصی برای ایجاد اسکرول استفاده کرده ؟
کسی از دوستان میتونه من رو در طراحی این بخش راهنمایی کنه ؟

تازه جالبه بدونید که توی مثالی که توی این تاپیک زده شده ، زمانی که اندازه Iframe رو یک مقدار ثابت قرار میدم ( مثلاً 200px) دیگه این مشکل وجود نداره ، اما نمیشه که اندازه ثابت داشته باشه چون توی رزولیشین های مختلف صفحه بهم میریزه .

[amirferdowsi]

قبلا همه پاسخ ها داده شده.احتمالا مشکل از جایی دیگه است؟؟؟!!!!

سلام
دوست عزیز اگر فکر میکنید که ممکنه مشکل از طرح من باشه ( احتمالشم خیلی زیاده ) ، لطفاً بفرمائید که سایتی که معرفی کردم به چه شکل طراحی رو انجام داده و بنده رو در این زمینه راهنمایی بفرمائید . :خجالت::لبخندساده::تشویق::چش� �ک: