ওয়েবসাইট ডিজাইনের একটি সাধারণ জিজ্ঞাসা প্রশ্ন "আপনি একটি উপাদান উচ্চতা 100% সেট কিভাবে"?
এটি একটি সহজ উত্তর মত মনে হতে পারে। আপনি কেবলমাত্র একটি উপাদানের উচ্চতা 100% -এ সেট করার জন্য CSS ব্যবহার করেন, তবে এটি সম্পূর্ণ ব্রাউজার উইন্ডোতে মাপসইয়ের উপাদানটি সবসময় প্রসারিত করে না। আসুন আমরা এই ভিজ্যুয়াল স্টাইলটি অর্জনের জন্য কেন এটি করতে পারি এবং আপনি কি করতে পারেন তা খুঁজে বের করুন।
পিক্সেল এবং শতাংশ
যখন আপনি CSS উপাদান এবং একটি পিক্সেল ব্যবহার করে একটি মান ব্যবহার করে একটি উপাদান উচ্চতা সংজ্ঞায়িত করেন, যে উপাদান ব্রাউজার যে অনেক উল্লম্ব স্থান গ্রহণ করা হবে।
উদাহরণস্বরূপ, একটি উচ্চতা সহ অনুচ্ছেদ: 100px; আপনার ডিজাইনের মধ্যে 100 পিক্সেলের উল্লম্ব স্থানটি নিতে হবে। এটি আপনার ব্রাউজার উইন্ডোটি কত বড় হবে না তা উল্লেখ করে না, এই উপাদানটি উচ্চতা 100 পিক্সেল হবে।
মাত্রা পিক্সেলের চেয়ে ভিন্নভাবে কাজ করে। W3C স্পেসিফিকেশন অনুযায়ী, শতাংশ উচ্চতা ধারক এর উচ্চতা সম্মান সঙ্গে গণনা করা হয়। সুতরাং যদি আপনি একটি উচ্চতা সঙ্গে একটি অনুচ্ছেদ করা: 50%; 100px এর উচ্চতা সহ একটি ডিভিশনের ভিতরে, অনুচ্ছেদটি 50 পিক্সেল উচ্চতার হবে, যা 50% এর মূল উপাদান।
কেন শতকরা হাইটস ব্যর্থ
যদি আপনি একটি ওয়েবপৃষ্ঠা ডিজাইন করছেন, এবং আপনার একটি কলাম আছে যা আপনি উইন্ডোর পূর্ণ উচ্চতা নিতে চান, প্রাকৃতিক প্রবণতা একটি উচ্চতা যোগ করা হয়: 100%; যে উপাদান থেকে সব পরে, যদি আপনি প্রস্থ প্রস্থ সেট: 100%; উপাদান পৃষ্ঠের পুরো অনুভূমিক স্থান নিতে হবে, তাই উচ্চতা একই কাজ করা উচিত, ডান? দুর্ভাগ্যবশত, এই ক্ষেত্রে সব হয় না।
কেন এই ঘটছে বুঝতে, আপনি ব্রাউজার উচ্চতা এবং প্রস্থ ব্যাখ্যা কিভাবে বুঝতে হবে। ওয়েব ব্রাউজার সামগ্রিক ব্রাউজার উইন্ডো খোলা হয় কিভাবে একটি ফাংশন হিসাবে মোট উপলব্ধ প্রান্তিক হিসেব করা। আপনি যদি আপনার নথির কোনও প্রস্থ মান নির্ধারণ না করেন, তবে ব্রাউজার স্বয়ংক্রিয়ভাবে উইন্ডোটির সম্পূর্ণ প্রস্থ (100% প্রস্থের ডিফল্ট) পূরণ করতে বিষয়বস্তুগুলিকে প্রবাহিত করবে।
উচ্চতা মান প্রস্থের চেয়ে ভিন্নভাবে গণনা করা হয়। প্রকৃতপক্ষে, ব্রাউজার উচ্চতা মূল্যায়ন করে না যতক্ষণ না বিষয়বস্তুটি এতদূর যে এটি ভিউপোর্টের বাইরে যায় (এইভাবে স্ক্রোল বারগুলির প্রয়োজন হয়) অথবা ওয়েব ডিজাইনার পৃষ্ঠায় একটি উপাদানটির জন্য একটি নির্দিষ্ট উচ্চতা নির্ধারণ করে। অন্যথায়, ব্রাউজারটি সরাসরি ভিউপোর্টের প্রস্থের মধ্যে বিষয়বস্তু প্রবাহটিকে শেষ পর্যন্ত না আসা পর্যন্ত এটি দেয়। উচ্চতা প্রকৃতপক্ষে সব হিসাব করা হয় না।
সমস্যাগুলি ঘটে যখন আপনি একটি উপাদান যা উচ্চতা ছাড়া প্যারেন্ট উপাদান আছে সেট একটি শতাংশ উচ্চতা সেট - অন্য কথায়, প্যারেন্ট উপাদান একটি ডিফল্ট উচ্চতা আছে: স্বয়ংক্রিয়; । আপনি কার্যত, একটি অনির্ধারিত মান থেকে একটি উচ্চতা গণনা ব্রাউজার জিজ্ঞাসা। যেহেতু যে একটি নুল-মান সমান হবে, ফলাফল ব্রাউজার কিছুই না।
আপনি যদি আপনার ওয়েব পৃষ্ঠাগুলি শতকরা শতকরা উচ্চতা সেট করতে চান, তবে আপনাকে উচ্চতা নির্ধারণকারী প্রতিটি পিতামাতার উপাদানটির উচ্চতা নির্ধারণ করতে হবে। অন্য কথায়, আপনি যদি এই মত একটি পৃষ্ঠা আছে:
এখানে বিষয়বস্তু
আপনি সম্ভবত div এবং অনুচ্ছেদটি 100% উচ্চতা অর্জন করতে চান তবে ডিভিতে আসলে দুটি প্যারেন্ট উপাদান রয়েছে:
এবং. Div একটি উচ্চতা উচ্চতা একটি আপেক্ষিক উচ্চতা সংজ্ঞায়িত করার জন্য, আপনি শরীরের এবং এইচটিএমএল উপাদানের উচ্চতা হিসাবে ভাল সেট করতে হবে।
তাই আপনি কেবল ডিভি না, বরং শরীর এবং HTML উপাদানের উচ্চতা সেট করতে সিএসএস ব্যবহার করতে হবে। এটি একটি চ্যালেঞ্জ হতে পারে, যেহেতু আপনি দ্রুতগতিতে 100% উচ্চতাতে সেটিকে দ্রুতগতিতে পেতে পারেন তবে শুধুমাত্র এই পছন্দসই প্রভাবটি অর্জন করতে হবে।
100% উচ্চতা সঙ্গে কাজ করার সময় কিছু জিনিস নোট
এখন আপনি জানেন যে আপনার পৃষ্ঠার উপাদানের উচ্চতাটি 100% পর্যন্ত কতটুকু সেট করা যায় তা খুঁজে বের করতে এবং আপনার সমস্ত পৃষ্ঠাগুলিতে এটি করা উত্তেজনাপূর্ণ হতে পারে, তবে কিছু কিছু জিনিস রয়েছে যা আপনাকে সচেতন করতে হবে:
- মার্জিন এবং প্যাডিং একটি স্ক্রল দণ্ড যোগ করতে পারেন যেখানে আপনি কোনটি চান না। শতাংশ উচ্চতা (এবং প্রস্থ) সঙ্গে কাজ সঙ্গে আমি পাওয়া সবচেয়ে বিরক্তিকর জিনিস এক যে একই উপাদান প্যাডিং এবং মার্জিন স্ক্রল বার প্রয়োজন ছাড়া সব কন্টেন্ট প্রদর্শন যদিও, পৃষ্ঠাতে স্ক্রল বার যোগ করতে পারেন এটি কারণ উপাদান উচ্চতা বা প্রস্থ গণনা করা হয় যে প্রথম জিনিস। তারপর মার্জিন এবং paddings যোগ করা হয়। সুতরাং যদি আপনার একটি উপাদান থাকে যা 100% উচ্চতার এবং 10 পিক্সেলের উপরে এবং নীচের মার্জিন থাকে তবে অতিরিক্ত 20 পিক্সেলের জন্য স্ক্রল বার থাকবে। মনে রাখবেন, সিএসএস বক্স মডেল একটি উপাদান আকারের উপর মার্জিন, সীমানা এবং প্যাডিং যোগ করে, তাই অন্যান্য বক্স মডেল মানগুলির মধ্যে যে কোনো 100% আসলে 100% এর বেশি হবে।
- আপনার বিষয়বস্তু নির্ধারিত উচ্চতা তুলনায় আরো লাগে, এটি পরে কিছু মুছে ফেলা হবে। অন্য কথায়, যদি আপনার একটি কলামের সাথে একটি নকশা থাকে যা 80% উচ্চতায় থাকে, এবং এর ভিতরে থাকা বিষয়বস্তুটি 100% উচ্চতা গ্রহণ করবে, তবে অতিরিক্ত ২0% কলামের নীচে চলে যাবে এবং ভিজ্যুয়াল ডিজাইন ভেঙ্গে যাবে আপনার পৃষ্ঠার। যদি এই কলামের নীচে বিষয়বস্তু থাকে তবে পাঠ্যটি কেবল তার উপরে লেখা থাকবে। আমি প্রায়ই এটি ঘটতে দেখি যখন একটি ওয়েব ডিজাইনার একটি পৃষ্ঠার উচ্চতা জোর প্রচেষ্টা করে এবং এটি লঞ্চের জন্য পুরোপুরি কাজ করে, কিন্তু যখন সেই পৃষ্ঠার বিষয়বস্তু ভবিষ্যতে পরিবর্তিত হয়, তখন তাদের সম্পূর্ণ উচ্চতা সম্পূর্ণভাবে পৃষ্ঠার প্রবাহ ভেঙ্গে যায়। এটি দ্বৈত সত্য যখন আপনি প্রতিক্রিয়াশীল ওয়েবসাইট তৈরি করছেন যার প্রস্থ এবং উচ্চতা ভিউপোর্ট আকারের সাথে পরিবর্তন করতে হবে।
এটি ঠিক করতে, আপনি উপাদানের উচ্চতাও সেট করতে পারেন। যদি আপনি এটিতে স্বয়ংক্রিয়ভাবে সেট করেন তবে স্ক্রল বারগুলি যদি প্রয়োজন হয় তবে প্রদর্শিত হবে কিন্তু অদৃশ্য হলে তা অদৃশ্য হয়ে যাবে। যে ভিজ্যুয়াল বিরতি সংশোধন করে, কিন্তু এটি স্ক্রলবারগুলি যোগ করে যেখানে আপনি তাদের পছন্দ করতে পারেন না।
ভিউপোর্ট ইউনিটের ব্যবহার
আরেকটি উপায় যা আপনি এই চ্যালেঞ্জ মোকাবেলা করতে পারেন সিএসএস ভিউপোর্ট ইউনিটের সাথে পরীক্ষা করা। পরিমাপের ভিউপোর্টের উচ্চতা ইউনিট ব্যবহার করে আপনি ভিউপোর্টের একটি সংজ্ঞায়িত উচ্চতা গ্রহণ করতে আকারের উপাদানগুলি উপভোগ করতে পারবেন এবং এটি ভিউপোর্ট পরিবর্তন হিসাবে পরিবর্তন হবে! এটি একটি পৃষ্ঠায় আপনার 100% উচ্চতা ভিজ্যুয়াল পেতে একটি দুর্দান্ত উপায় কিন্তু এখনও বিভিন্ন ডিভাইস এবং পর্দা মাপের জন্য তাদের নমনীয় আছে।