راکت

مشکل در css

1 پاسخ

سلام به همگی وقتتون بخیر باشه
من تو یه پروژه که برای خودم زدم با استفاده از html,css,flexbox,cssgrid پروژه رو ساختم و برای جاگیری دقیق از پوزیشن رلیتیو استفاده کردم و تاپ و رایت دادم و... ولی الان اسکرول اضافی وجود داره یعنی اسکرول هست ولی صفحه سفید اضافی اون پایین هست
چیکار کنمک این اسکرول اضافی به وجود نیاد؟
تشکر

مهدی
مهدی
@Mahdi.saghafi
ثبت پرسش جدید

پاسخ‌ها

1
سجاد حسین زاده
سجاد حسین زاده
@sajjadhosseinzadeh

تخصص: Full-Stack Developer

سلام مهدی
ببین معمولا عنصر‌هایی که از صفحه بیرون میزنن اینا هستن:

  1. اول بررسی کن که هیچ عنصری position: absolute یا position: relative با top, right, left, یا bottom منفی نداشته باشه که باعث بشه محتوا از محدوده body خارج بشه.
    بهتره از overflow: hidden; روی body یا html استفاده کنی تا از ایجاد اسکرول اضافی جلوگیری بشه.
  1. استفاده از width: 100vw
    اگه جایی از width: 100vw; استفاده کردی، احتمال داره که باعث ایجاد اسکرول افقی بشه، چون 100vw عرض کل ویوپورت رو بدون در نظر گرفتن scrollbar میگیره.
    به جای 100vw از width: 100% استفاده کن.

  2. وجود margin اضافی در آخرین المان صفحه
    بعضی وقت‌ها المان‌های آخر صفحه margin-bottom زیادی دارن و باعث ایجاد فضای سفید میشن.
    می‌تونی مقدار margin-bottom آخرین المان رو 0 بذاری.

  3. استفاده از min-height روی html یا body
    بعضی مواقع min-height: 100vh; روی body باعث ایجاد فضای اضافی پایین صفحه میشه، به‌خصوص اگه همراه با flexbox استفاده شده باشه.

این کد رو به پروژه خودت اضافه کن و مجدد بررسی کن

  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  overflow-x: hidden;
  max-width: 100%;
}

شاید پاسخ شما همین‌جا باشد

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام