বিভিন্ন পরিস্থিতিতে পরীক্ষার পরে, আমি বিশ্বাস করি এটিই সেরা সমাধান:
html {
width: 100%;
height: 100%;
display: table;
}
body {
width: 100%;
display: table-cell;
}
html, body {
margin: 0px;
padding: 0px;
}
এটি গতিশীল যে htmlএবং bodyউপাদানগুলি ওভারফ্লো হলে সেগুলি স্বয়ংক্রিয়ভাবে প্রসারিত হবে। আমি এটি ফায়ারফক্স, ক্রোম এবং আইই 11 এর সর্বশেষতম সংস্করণে পরীক্ষা করেছি।
এখানে পুরো ঝাঁকুনি দেখুন (আপনার এখানে ছক বিদ্বেষীদের জন্য, আপনি সর্বদা এটি একটি ডিভ ব্যবহার করতে পরিবর্তন করতে পারেন):
https://jsfiddle.net/71yp4rh1/9/
যা বলা হচ্ছে তা নিয়ে এখানে পোস্ট করা উত্তরগুলি নিয়ে বেশ কয়েকটি সমস্যা রয়েছে ।
html, body {
height: 100%;
}
উপরের সিএসএস ব্যবহারের ফলে এইচটিএমএল এবং শরীরের উপাদানগুলি এখানে প্রদর্শিত হিসাবে তাদের সামগ্রীগুলি ওভারফ্লো হয়ে গেলে স্বয়ংক্রিয়ভাবে প্রসারিত হবে না:
https://jsfiddle.net/9vyy620m/4/
আপনি যখন স্ক্রোল করবেন, পুনরাবৃত্তি পটভূমি লক্ষ্য করুন? এটি ঘটছে কারণ তার শিশু টেবিলটি উপচে পড়ার কারণে শরীরের উপাদানটির উচ্চতা বৃদ্ধি পায় নি। এটি অন্য ব্লক উপাদানগুলির মতো কেন প্রসারিত হয় না? আমি নিশ্চিত নই. আমি মনে করি ব্রাউজারগুলি এটিকে ভুলভাবে পরিচালনা করে।
html {
height: 100%;
}
body {
min-height: 100%;
}
উপরে প্রদর্শিত হিসাবে শরীরে ন্যূনতম উচ্চতা 100% নির্ধারণ করা অন্যান্য সমস্যার কারণ হয়ে দাঁড়ায়। আপনি যদি এটি করেন, আপনি নির্দিষ্ট করতে পারবেন না যে কোনও শিশু ডিভ বা সারণী এখানে প্রদর্শিত হিসাবে শতাংশের উচ্চতা নিয়েছে:
https://jsfiddle.net/aq74v2v7/4/
আশা করি এটি কাউকে সাহায্য করবে। আমি মনে করি ব্রাউজারগুলি এটি ভুলভাবে পরিচালনা করছে। আমি আশা করব যে তার বাচ্চারা উপচে পড়লে শরীরের উচ্চতা স্বয়ংক্রিয়ভাবে আরও বড় আকারের হয়ে যায়। যাইহোক, আপনি যখন 100% উচ্চতা এবং 100% প্রস্থ ব্যবহার করেন তখন এটি ঘটবে বলে মনে হয় না।