সাথে স্টিকি ফুটার display: flex
ফিলিপ ওয়ালটনের স্টিকি ফুটার দ্বারা অনুপ্রাণিত সমাধান ।
ব্যাখ্যা
এই সমাধানটি কেবল এর জন্য বৈধ :
- ক্রোম ≥ 21.0
- ফায়ারফক্স ≥ 20.0
- ইন্টারনেট এক্সপ্লোরার ≥ 10
- সাফারি ≥ 6.1
এটা তোলে উপর ভিত্তি করে তৈরি flexডিসপ্লে , ওঠানামা flex-growসম্পত্তি, যা একটি উপাদান করার অনুমতি দেয় হত্তয়া পারেন মধ্যে উচ্চতা বা প্রস্থ (যখন flow-directionসেট করা হয় পারেন columnবাrow যথাক্রমে), কন্টেইনারে অতিরিক্ত স্থান দখল করতে।
আমরা ইউনিটটিও লাভ করতে চলেছি vh, যেখানে 1vhএটি সংজ্ঞায়িত করা হয়েছে :
ভিউপোর্টের উচ্চতার 1/100 তম
সুতরাং এর একটি উচ্চতা 100vhসম্পূর্ণ ভিউপোর্টের উচ্চতা বিস্তৃত করতে কোনও উপাদানকে বলার একটি সংক্ষিপ্ত উপায়।
আপনি নিজের ওয়েব পৃষ্ঠাকে এভাবে গঠন করবেন:
----------- body -----------
----------------------------
---------- footer ----------
----------------------------
পৃষ্ঠার নীচে ফুটারটি স্টিক করার জন্য, আপনি পৃষ্ঠার নীচের অংশে পাদলেখকে ধাক্কা দেওয়ার জন্য শরীর এবং পাদলেখের মাঝে স্থানটি যতটা বাড়তে চান তা চান।
সুতরাং আমাদের বিন্যাসটি হয়ে যায়:
----------- body -----------
----------------------------
---------- spacer ----------
<- This element must grow in height
----------------------------
---------- footer ----------
----------------------------
বাস্তবায়ন
body {
margin: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.spacer {
flex: 1;
}
/* make it visible for the purposes of demo */
.footer {
height: 50px;
background-color: red;
}
<body>
<div class="content">Hello World!</div>
<div class="spacer"></div>
<footer class="footer"></footer>
</body>
আপনি এটির সাথে জেএসফিডেলে খেলতে পারেন ।
সাফারি ফিরছে
সচেতন থাকুন যে সাফারিতে সম্পত্তিটির ত্রুটিযুক্ত প্রয়োগ রয়েছেflex-shrink , যা সামগ্রীগুলি প্রদর্শন করতে প্রয়োজনীয় ন্যূনতম উচ্চতার চেয়ে আইটেমগুলিকে আরও সঙ্কুচিত করতে দেয়। এই সমস্যাটি সমাধান করার আপনাকে সেট করতে হবে flex-shrink0 থেকে স্পষ্টভাবে সম্পত্তি .contentএবং footerউপরোক্ত উদাহরণের:
.content { flex-shrink: 0; }
.footer { flex-shrink: 0; }
