طراحی صفحه ای که اسکرول نشه!

[مهدی رحیم زاده]

با سلام
می خواستم بدونم که چطور میشه صفحه ای رو طراحی کرد که به لحاظ طولی هم کل قاب رو پر کنه و اسکرول هم نشه؟
با تشکر

[majnun]

خب یک باید برای عرض دهی از % استفاده کنید

[مهدی رحیم زاده]

خب یک باید برای عرض دهی از % استفاده کنید
منظورم هم طوله و هم عرض

[Keramatifar]

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

[aminghaderi]

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

[مهدی رحیم زاده]

میشه یک نمونه برای بنده هم اینجا بزارید؟
مشکل من هم دقیقا روی Height

[Keramatifar]

لطفا به این مثال توجه کنید:


var ResHeight = screen.availHeight;
var MyElement = document.getElementById('MainDiv');
MyElement.style.height = ResHeight;

در خط اول کد، بر اساس رزولوشن مونیتور کاربر، Height قابل استفاده توسط Browser رو بدست میاریم و در متغیر ResHeight نگهداری می کنیم. (اگر بجای availHeight از Height استفاده کنید کل Height صفحه نمایش بدست می آید که برای کار شما مناسب نیست)
در خط دوم المنت مورد نظر (که در اینجا یک المنت Div فرضی با شناسه MainDiv می باشد) را بدست می آوریم.
در خط سوم Style مربوط به Height المنت مورد نظر را برابر ResHeight قرار می دهیم.
موفق باشید

[aminghaderi]

میشه یک نمونه برای بنده هم اینجا بزارید؟
مشکل من هم دقیقا روی Height


function ShowHideElement11()
{
if(document.getElementById('Element_10').checked== true)
document.getElementById('FreezeElement11').style.d isplay ='none';
else
{
document.getElementById('FreezeElement11').innerHT ML="";
document.getElementById('FreezeElement11').style.l eft=document.getElementById('Element_11_Div').offs etLeft.toString()+"px";
document.getElementById('FreezeElement11').style.t op=document.getElementById('Element_11_Div').offse tTop.toString()+"px";
document.getElementById('FreezeElement11').style.w idth=document.getElementById('Element_11_Div').off setWidth.toString()+"px";
document.getElementById('FreezeElement11').style.h eight=document.getElementById('Element_11_Div').of fsetHeight.toString()+"px";
document.getElementById('FreezeElement11').style.b ackgroundImage="url(../XPanelImg/background.png)";
var nAgt = navigator.userAgent;
var verOffset,ix,fullVersion;
if ((verOffset=nAgt.indexOf("MSIE"))!=-1)
{
fullVersion=nAgt.substring(verOffset+5);
if ((ix=fullVersion.indexOf(";"))!=-1) fullVersion=fullVersion.substring(0,ix);
if ((ix=fullVersion.indexOf(" "))!=-1) fullVersion=fullVersion.substring(0,ix);
if (fullVersion==6.0)
document.getElementById('FreezeElement11').style.f ilter=
'progid:DXImageTransform.Microsoft.alpha(opacity=8 0)';
}
document.getElementById('FreezeElement11').style.d isplay ='inline';
}
}

فقط توضیح زیاد نمی تونم بدم ، چون حافظه من یکم چه عرض کنم ، خیلی کنده ، و زیاد یادم نمی یاد ، چکار کردم ولی می دونم خودم برای یه پروژه ای نوشتم ، و کار تابع هم ایجاد یه لایه خاکستری تیره بروی سایت هست که زمانیکه با اجکس Response و Request ارسال و درخواست می کردم ، این تابع رو فراخونی می کردم تا کاربر منتظر بماند ، البته + یه "لطفا کمی صبر کنید!".
توضیح خواستید بدم.

موفق باشید.

[iranme]

لطفا به این مثال توجه کنید:


var ResHeight = screen.availHeight;
var MyElement = document.getElementById('MainDiv');
MyElement.style.height = ResHeight;
در خط اول کد، بر اساس رزولوشن مونیتور کاربر، Height قابل استفاده توسط Browser رو بدست میاریم و در متغیر ResHeight نگهداری می کنیم. (اگر بجای availHeight از Height استفاده کنید کل Height صفحه نمایش بدست می آید که برای کار شما مناسب نیست)
در خط دوم المنت مورد نظر (که در اینجا یک المنت Div فرضی با شناسه MainDiv می باشد) را بدست می آوریم.
در خط سوم Style مربوط به Height المنت مورد نظر را برابر ResHeight قرار می دهیم.
موفق باشید

میشه بیشتر توضیح بدید! برای من کار نمیکنه.
البته کاری که من میخوام انجام بدم یکم متفاوت هست. میخوام یک دایو دقیقا در وسط صفحه قرار بگیرد. میتونم از همین کد استفاده بکنم دیگه؟ یا راه ساده تری هم هست؟

[iranme]

کسی نیست من رو راهنمایی کنه؟

[Mohandes2009]

منظورم هم طوله و هم عرض
نه دیگه فقط عرض!

[Mohandes2009]

میشه بیشتر توضیح بدید! برای من کار نمیکنه.
البته کاری که من میخوام انجام بدم یکم متفاوت هست. میخوام یک دایو دقیقا در وسط صفحه قرار بگیرد. میتونم از همین کد استفاده بکنم دیگه؟ یا راه ساده تری هم هست؟
برای اینکه div در وسط قرار بگیره aligen اون را center بکن

[Arthas1990]

اينو چك كن . من اينطوري يك المنت رو وسط صفحه قرار ميدم



height:30%
margin_top=35%
margin_bottom=35%



اينارو به CSS المنتت اضافه كن و بعدش َtext_align مربوط به المنت پرنت يا همون المنتي كه اين دايو توشه مثلا body رو برابر با center كن

body
}
text_align:center
{


البته ; فراموش نشه

موفق باشي
واميدوارم جواب بده :)

[Arthas1990]

اينو چك كن . من اينطوري يك المنت رو وسط صفحه قرار ميدم



height:30%
margin_top=35%
margin_bottom=35%



اينارو به CSS المنتت اضافه كن و بعدش َtext_align مربوط به المنت پرنت يا همون المنتي كه اين دايو توشه مثلا body رو برابر با center كن

body
}
text_align:center
{


البته ; فراموش نشه

موفق باشي
واميدوارم جواب بده :)





راستي _ رو - كن
و = رو : كن

[iranme]

اينو چك كن . من اينطوري يك المنت رو وسط صفحه قرار ميدم



height:30%
margin_top=35%
margin_bottom=35%



اينارو به CSS المنتت اضافه كن و بعدش َtext_align مربوط به المنت پرنت يا همون المنتي كه اين دايو توشه مثلا body رو برابر با center كن

body
}
text_align:center
{


البته ; فراموش نشه

موفق باشي
واميدوارم جواب بده :)





این روشی که شما گفتید به ظاهر درسته ولی اگه بخوام ارتفاع div رو مقدار دقیق بدم چی؟ مثلا 100px باشه! اون وقت بالا پایین رو چطوری تنظیم کنم که برابر باشه!؟

[iranme]

راه حلی نیست؟ من نتونستم مشکلم را حل کنم!