قراره بهتون تضمین موفقیت در برنامه‌نویسی و کلی آفر ویژه بدیم 😎 (برای شروع کلیک کن 👉)
۰ ثانیه
۰ دقیقه
۰ ساعت
۱ سحر پاشائی
Fixed Full-height Side Nav
جامعه Html & CSS ایجاد شده در ۱۳ دی ۱۴۰۱

سلام. وقت بخیر

تو این مثال:

1-

https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_vertical_fixed

وقتی به body:

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

میدم درست کار می‌کنه اما اگه به * بدم متن محتوا line-height شون انگاری 0 می‌شه می‌چسبن به هم، چرا؟ چی کار باید کرد؟ چون تو سندمون همیشه

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

رو داریم!

2-اگه position:fixed; رو برداریم height:100% اعمال نمی‌شه!!! چرا :)

3-چطور می‌تونیم تو input آیکون بذاریم به عنوان placeholder ؟

یعنی یه آیکون سرچ و متن "سرچ" در کنارش به عنوان placeholder

درود

1- دلیلش اینه که وقتی ستاره میذاریم در اصل میگیم که همه المانهای تو صفحه اون استایل رو بگیرن و برای همین همه المانها پدینگ و مارجین شون 0 میشه و میچسبن به هم! اما وقتی به body میدیم صرفا روی بدنه اصلی صفحه اعمال میشه. راهکار: 1- از ستاره استفاده نکنیم. 2- از ستاره استفاده کنیم اما پدینگ و مارجینش رو صفر ندیم (مثلا 10 بدیم) 3- از ستاره استفاده کنیم و دونه دونه المانها رو مجدد پدینگ و مارجین بدیم (مثل پاراگرافها و...) به همراه important تا استایلش اعمال بشه.

2- این قضیه 100 درصد ارتفاع و پهنا روی المانهایی که والد ندارن و مستقیم درون بادی افتادن داستان و تنظیمات زیاد داره! باید به این صورت عمل کنید. اما در کل اون پوزیشن جدای اینکه باعث میشه منو فیکس بمونه و اسکرول نخوره، این قضایا رو هم در دلش مدیریت میکنه (دوستان سازنده html و css زحمت کشیدند اوکی کردن) و برای همین توصیه میشه هرجا میخواید 100 درصد ارتفاع اعمال بشه حتما پوزیشنش رو هم ست کنید.

3- یک نمونه کدپن حاوی آیکون در placeholder

بهترین پاسخ
نازنین کریمی مقدم ۱۳ دی ۱۴۰۱، ۱۴:۲۲