2019 এ আপডেট
টিএল; ডিআর: আজ সেরা বিকল্পটি এই উত্তরের শেষটি - ফ্লেক্সবক্স। সবকিছু এটিকে সুন্দরভাবে সমর্থন করে এবং বছরের পর বছর ধরে। তার জন্য যান এবং পিছনে তাকান না। এই উত্তরটির বাকি অংশটি historicalতিহাসিক কারণে বাকি রয়েছে।
কৌশলটি 100% কী গ্রহণ করা হয়েছে তা বোঝা। সিএসএস স্পেস পড়া আপনাকে সেখানে সহায়তা করতে পারে।
একটি দীর্ঘ গল্প সংক্ষিপ্ত করতে - "ধারণকৃত ব্লক" হিসাবে এমন একটি জিনিস রয়েছে - যা পিতামণ্ডলের উপাদানগুলির জন্য প্রয়োজনীয় নয়। সরলভাবে বলা, এটি হায়ারার্কির প্রথম উপাদান যা অবস্থান: আপেক্ষিক বা অবস্থান: পরম। বা শরীরের উপাদান নিজেই যদি অন্য কিছু না থাকে। সুতরাং, যখন আপনি "প্রস্থ: 100%" বলবেন, এটি "ধারণকারী ব্লক" এর প্রস্থটি পরীক্ষা করে এবং আপনার উপাদানটির প্রস্থকে একই আকারে সেট করে। যদি সেখানে অন্য কিছু থাকে, তবে আপনি নিজের চেয়ে বৃহত্তর একটি "সমন্বিত ব্লক" এর সামগ্রী পেতে পারেন (এইভাবে "উপচে পড়া")।
উচ্চতা একইভাবে কাজ করে। একটি ব্যতিক্রম ছাড়া। আপনি ব্রাউজার উইন্ডোর 100% পর্যন্ত উচ্চতা পেতে পারবেন না। একেবারে শীর্ষ স্তরের উপাদান, যার বিরুদ্ধে 100% গণনা করা যায়, তা হ'ল দেহ (বা এইচটিএমএল? নিশ্চিত নয়) উপাদান, এবং এটির উপাদানগুলি ধারণ করার জন্য এটি যথেষ্ট পরিমাণে প্রসারিত। উচ্চতা নির্দিষ্ট করে: এতে 100% এর কোনও প্রভাব থাকবে না, কারণ এর কোনও "প্যারেন্ট উপাদান" নেই যার বিরুদ্ধে 100% পরিমাপ করা যায়। উইন্ডো নিজেই গণনা করে না। ;)
উইন্ডোর ঠিক 100% প্রসারিত করার জন্য আপনার দুটি পছন্দ আছে:
- জাভাস্ক্রিপ্ট ব্যবহার করুন
- ডক্টইপিই ব্যবহার করবেন না। এটি একটি ভাল অনুশীলন নয়, তবে এটি ব্রাউজারগুলিকে "কুইর্কস মোড" এ রাখে, যাতে আপনি উপাদানগুলিতে উচ্চতা = "100%" করতে পারেন এবং এটি তাদের উইন্ডো আকারে প্রসারিত করবে। মনে রাখবেন যে, আপনার বাকী পৃষ্ঠার সম্ভবত ডক্টপিইপি পরিবর্তনের জন্য উপযুক্ত পরিবর্তন করতে হবে।
আপডেট: আমি নিশ্চিত নই যে এটি পোস্ট করার সময় আমি ইতিমধ্যে ভুল ছিলাম না, তবে এটি অবশ্যই এখন পুরানো। আজ আপনি এটি আপনার স্টাইলশীটে করতে পারেন: html, body { height: 100% }এবং এটি আসলে আপনার পুরো ভিউপোর্টে প্রসারিত হবে। এমনকি একটি ডক্টইপিইও রয়েছে। min-height: 100%আপনার পরিস্থিতির উপর নির্ভর করেও দরকারী হতে পারে।
আর আমি কাউকেই আর কুইর্কস-মোড ডকুমেন্ট তৈরি করার পরামর্শ দেব না , কারণ এটি সমাধানের চেয়ে মাথা ব্যথার কারণ হয়। প্রতিটি ব্রাউজারের আলাদা আলাদা কুইর্কস-মোড থাকে, সুতরাং আপনার পৃষ্ঠাটি ব্রাউজারগুলিতে ধারাবাহিকভাবে দেখতে পাওয়া আরও দু'গুণ আকারের ক্রম হয়ে ওঠে। একটি ডক্টইপিই ব্যবহার করুন। সর্বদা. সাধারণত HTML5 এক - <!DOCTYPE html>। এটি স্মরণে রাখা সহজ এবং সমস্ত ব্রাউজারগুলিতে, এমনকি 10 বছরের পুরানোগুলিতে মনোযোগের মতো কাজ করে।
একমাত্র ব্যতিক্রম হ'ল আপনাকে যখন আই 5 বা কোনও কিছু সমর্থন করতে হবে। আপনি যদি সেখানে থাকেন তবে আপনি নিজের উপায়ে যাই হোক না কেন। সেই প্রাচীন ব্রাউজারগুলি আজ ব্রাউজারগুলির মতো কিছুই নয় এবং এখানে যে সামান্য পরামর্শ দেওয়া হয়েছে সেগুলি আপনাকে সেগুলিতে সহায়তা করবে। উজ্জ্বল দিকে আপনি যদি সেখানে থাকেন তবে আপনাকে সম্ভবত এক ধরণের ব্রাউজার সমর্থন করতে হবে, যা সামঞ্জস্যতা সমস্যা থেকে মুক্তি পাবে।
শুভকামনা!
আপডেট 2: আরে, অনেক দিন হয়েছে! 6 বছর পরে, নতুন বিকল্পগুলি দৃশ্যে রয়েছে। আমি কেবল নীচের মন্তব্যে একটি আলোচনা করেছি, আপনার জন্য আরও কৌশল এখানে আজকের ব্রাউজারগুলিতে কাজ করে।
বিকল্প 1 - পরম অবস্থান। আপনি যখন প্রথম অংশের সুনির্দিষ্ট উচ্চতা জানেন তখনই সুন্দর এবং পরিষ্কার করুন।
body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.first-row {position: absolute;top: 0; left: 0; right: 0; height: 100px; background-color: lime;}
.second-row {position: absolute; top: 100px; left: 0; right: 0; bottom: 0; background-color: red }
.second-row iframe {display: block; width: 100%; height: 100%; border: none;}
<div class="first-row">
<p>Some text</p>
<p>And some more text</p>
</div>
<div class="second-row">
<iframe src="https://jsfiddle.net/about"></iframe>
</div>
কিছু নোট - second-rowধারক প্রয়োজন কারণ bottom: 0এবং right: 0কিছু কারণে অনুরোধকে উপর কাজ করে না। একটি "প্রতিস্থাপিত" উপাদান হওয়ার সাথে কিছু করার। কিন্তু width: 100%এবং height: 100%ঠিক কাজ করে। display: blockএটি প্রয়োজনীয় কারণ এটি inlineডিফল্টরূপে একটি উপাদান এবং সাদা স্থান অন্যথায় অদ্ভুত ওভারফ্লো তৈরি করা শুরু করে starts
বিকল্প 2 - সারণী। যখন আপনি প্রথম অংশের উচ্চতা জানেন না তখন কাজ করে। আপনি প্রকৃত <table>ট্যাগগুলি ব্যবহার করতে পারেন বা এটি অভিনব উপায়ে করতে পারেন display: table। আমি পরে যাব কারণ এটি আজকাল ফ্যাশন বলে মনে হচ্ছে।
body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.row-container {display: table; empty-cells: show; border-collapse: collapse; width: 100%; height: 100%;}
.first-row {display: table-row; overflow: auto; background-color: lime;}
.second-row {display: table-row; height: 100%; background-color: red; overflow: hidden }
.second-row iframe {width: 100%; height: 100%; border: none; margin: 0; padding: 0; display: block;}
<div class="row-container">
<div class="first-row">
<p>Some text</p>
<p>And some more text</p>
</div>
<div class="second-row">
<iframe src="https://jsfiddle.net/about"></iframe>
</div>
</div>
কিছু নোট - সুনির্দিষ্ট করে overflow: autoযে সারিটি সর্বদা এর সমস্ত সামগ্রী অন্তর্ভুক্ত করে। অন্যথায় ভাসমান উপাদানগুলি কখনও কখনও উপচে পড়তে পারে। height: 100%দ্বিতীয় সারিতে নিশ্চিত করুন যে এটি বিস্তৃতি যতটা এটা ছোট হিসেবে প্রথম সারি পিষণ করতে এটি পায় তোলে।
বিকল্প 3 - ফ্লেক্সবক্স এগুলির মধ্যে সবচেয়ে পরিষ্কার, তবে তার চেয়ে কম স্টার্লার ব্রাউজার সমর্থন। -ms-আইই 10 এর ফ্লেক্সবক্স বৈশিষ্ট্যের জন্য উপসর্গের প্রয়োজন হবে এবং এর চেয়ে কম কিছু এটিকে সমর্থন করবে না।
body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.row-container {display: flex; width: 100%; height: 100%; flex-direction: column; background-color: blue; overflow: hidden;}
.first-row {background-color: lime; }
.second-row { flex-grow: 1; border: none; margin: 0; padding: 0; }
<div class="row-container">
<div class="first-row">
<p>Some text</p>
<p>And some more text</p>
</div>
<iframe src="https://jsfiddle.net/about" class="second-row"></iframe>
</div>
কিছু নোট - overflow: hiddenকারণ iframe এখনও display: blockএই ক্ষেত্রে এমনকি কিছু প্রকার ওভারফ্লো উত্পাদন করে । এটি পূর্ণস্ক্রিন ভিউ বা স্নিপেট সম্পাদকটিতে দৃশ্যমান নয়, তবে ছোট প্রাকদর্শন উইন্ডো একটি অতিরিক্ত স্ক্রোলবার পেয়েছে। এটি কি ধারণা নেই, iframes অদ্ভুত।