شاید خیلی وقت ها برای شما هم پیش آمده باشد که قصد داشته باشید ارتفاع صفحه خودتون رو ( height ) بر اساس صفحه نمایش کاربر تنظیم کنید ، درسته ممکنه خیلی ابتدایی باشه ولی هدف از این آموزش برای دوستان عزیزی که تازه شروع به کار کردن هست…
در چه شرایطی ممکنه این حالت پیش بیاد ؟
مثلا قصد دارید که سایتی طراحی کنید که محتوا در وسط صفحه ثابت باشه و یا سایت هایی که ریسپانسیو کار می کنند و…
خوب برای این کار می تونید از یک دستور جاوا استفاده کنید که به راحتی این کار رو براتون انجام میده :
<script>
var ertefae_safhe = $(window).height();
$('#content').css('height' , ertefae_safhe + 'px');
</script>
در این دستور به جای ‘#content می توانید اسم دایوی که قصد دارید ارتفاع بر روی آن اعمال شود را قرار دهید.
برای خود من پیش آمده بود که می خواستم ارتفاع صفحه ای که بر اساس صفحه نمایش کاربر بدست می آید رو ۱۰۰ پیکسل کمتر کنم و بعد در قسمت مورد نظر خودم اعمال کنم ، که برای انجام این کار از کد زیر استفاده می کنید :
<script>
var ertefae_safhe = $(window).height();
ertefae_safhe = ertefae_safhe - 100 ;
$('#content').css('height' , ertefae_safhe + 'px');
</script>
خوب برای بدست آوردن عرض صفحه هم بر اساس صفحه نمایش کاربر دقیقا می توانید از همین قطعه کد استفاده کنید و به جای height از width استفاده کنید…
<script>
var arze_safhe = $(window).width();
$('#content').css('width' , arze_safhe + 'px');
</script>
برای استفاده ، کد مورد نظر خودتون رو قبل از تگ </body> قرار بدهید.
امیدوارم این قطعه کد کاربردی باشه براتون
با تشکر از حسین هاشمی
برچسب ها:
/ ۵
رای ثبت شده
امتیاز خود را ثبت کنید...
احسان
با سلام
بعد از استفاده از این کد دقیقا ارتفاع یا عرض کجا اعمال میشه؟
تیک۴
ارتفال و عرض رو که وارد کنید در قسمت style در کد html شما قرار میگیرد.
برای مثلا #content نیازی نیست که از css ارتفاع و عرض وارد کنید اگر از این دستور استفاده می کنید.
مرضیه
سلام
من میخوام سایت تک صفحه ای ایجاد کنم که اون صفحه کل صفحه نمایش کاربر رو بگیره بدون اینکه اسکرول عمودی بخوره… این روش جواب میده برای این کار؟؟
تیک۴
با سلام و خسته نباشید
میتوانید در CSS خود تگ Body را overflow: hidden; قرار دهید.
سایر قسمتها نیز میتوانید از طریق jQuery کنترل کنید.
با تشکر از همراهی شما