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