ساخت div تمام صفحه با css در وردپرس (fullscreen div)

برای تمام صفحه کردن یک div یا ردیف و span یا ستون و حتی section در طراحی سایت با وردپرس از چه راهکاری باید استفاده کرد؟ کد css برای تمام صفحه کردن یک تصویر، background یا div در المنتور و یا کامپوزر باید چه کار کرد؟ آیا می توان یک div تمام صفحه در html به صورت fullscreen ایجاد کرد؟ ساخت div تمام صفحه با css و قابلیت viewport را در ادامه بررسی می کنیم:

آموزش viewport برای ایجاد div تمام صفحه

برای ساخت یک div تمام صفحه که در تمامی مرورگر ها، صفحات دسکتاپ، گوشی و… به صورت رسپانسیو تمام صفحه را در بر بگیرد باید از واحد های ویوپورت واحد viewport برای مقدار دهی height و width استفاده کنید. به کد های css زیر دقت کنید:

div { width:100vw }

در این کد ما تعیین کردیم که عرض div برابر با تمام صفحه مرورگر قرار بگیرد.

کد ساخت div تمام صفحه با css

با کد زیر ما div را به صورت تمام صفحه ایجاد کردیم و قابلیت اسکرول یا نمایش باکس اسکرول را غیر فعال کردیم

.fullscreen { height: 100vh; overflow: hidden;}

آموزش ساخت div تمام صفحه در المنتور و کامپوزر

1. ابتدا باید یک div یا ردیف ایجاد کنید.
2. در بخش تنظیماات پیشرفته به ردیف ایجاد شده کلاس یا id بدهید.
3. سپس در بخش css های سفارشی به کلاس style زیر را بدهید.

height:100vh; 

بر فرض مثال شما میخواهید یک div با پس زمینه قرمز بسازید:

.fullscreen { 
height: 100vh;
width:100vw;
overflow: hidden; }

نکته در اندازه دهی به div:

توجه داشته باشید که برای تنظیم طول و عرض div می توانید از مقدار دهی درصد یا (%) هم استفاده نمائید. اما ممکن است گاهی در مرورگر های قدیمی یا متفرقه دچار خطا ها و مشکلاتی باشد. در ادامه روش های اندازه دهی به div در css را به شما آموزش می دهیم. به صورت زیر هم می توانید برای طراحی div full screen اقدام کنید:

div {
/* تنظیم طول صفحه یا در مرورگر های قدیمی.
 */
 height: 100%; width: 100%;
 /* تنظیم طول ردیف یا صفحه با مقدار دهی ویوپورت و رسپانسیو. */ 

height: 100vh; 
/* تنظیم طول ردیف یا صفحه با مقدار دهی ویوپورت و رسپانسیو */ 
width: 100vw;
 /* حذف مارجین و فاصله ها در همه مرورگر ها */ 
margin: 0; }

برای دریافت مشاوره و خدمات طراحی سایت و سئو با شماره 09033012748 تماس بگیرید.