পৃষ্ঠার বা সামগ্রীর নীচে পাদলেখ, যেটি কম

Question 1

আমার নিম্নলিখিত কাঠামো রয়েছে:

<body>
    <div id="main-wrapper">
        <header>
        </header>
        <nav>
        </nav>
        <article>
        </article>
        <footer>
        </footer>
    </div>
</body>

আমি <article>জাভাস্ক্রিপ্ট ব্যবহার করে গতিশীলভাবে সামগ্রী লোড করি । এই কারণে, <article>ব্লকের উচ্চতা পরিবর্তন হতে পারে।

আমি চাই যে <footer>প্রচুর সামগ্রী উপস্থিত থাকে বা যখন ব্রাউজার উইন্ডোটির নীচে কেবল কয়েকটি লাইনের সামগ্রী উপস্থিত থাকে তখন ব্লকটি পৃষ্ঠার নীচে থাকে।

এই মুহুর্তে আমি এক বা অন্যটি করতে পারি ... তবে উভয়ই নয়।

আমি কীভাবে এটি করতে পারি তা কী কেউ জানেন - <footer>পৃষ্ঠার / সামগ্রীর নীচে বা স্ক্রিনের নীচে লেগে থাকুন, তার উপর নির্ভর করে কোনটি কম।

Question 2

রায়ান ফাইটের স্টিকি ফুটারটি খুব সুন্দর, তবে আমি এটির বেসিক কাঠামোর অভাব বোধ করছি।

ফ্লেক্সবক্স সংস্করণ

আপনি যদি এতটা ভাগ্যবান যে আপনি পুরানো ব্রাউজারগুলিকে সমর্থন না করে ফ্লেক্সবক্স ব্যবহার করতে পারেন তবে স্টিকি ফুটারগুলি তুচ্ছ সহজ হয়ে যায় এবং গতিশীল আকারের পাদলেখকে সমর্থন করে।

প্লেয়ারগুলি ফ্লেক্সবক্সের সাথে নীচে আটকে থাকার কৌশলটি একই ধারকটিতে উল্লম্বভাবে অন্য উপাদান থাকা to এটি যা লাগে তা হ'ল একটি পূর্ণ উচ্চতার মোড়কের উপাদান display: flexএবং এর flexচেয়ে কম মূল্যের সাথে কমপক্ষে একটি সহোদর 0:

_{সিএসএস:}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#main-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

article {
  flex: 1;
}

কোড স্নিপেট দেখান

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#main-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 100%;
}
article {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
header {
  background-color: #F00;
}
nav {
  background-color: #FF0;
}
article {
  background-color: #0F0;
}
footer {
  background-color: #00F;
}

<div id="main-wrapper">
   <header>
     here be header
   </header>
   <nav>
   </nav>
   <article>
     here be content
   </article>
   <footer>
     here be footer
   </footer>
</div>

স্নিপেট প্রসারিত করুন

আপনি যদি ফ্লেক্সবক্স ব্যবহার করতে না পারেন, তবে আমার পছন্দের বেস কাঠামোটি হ'ল:

<div class="page">
  <div class="page__inner">
    <header class="header">
      <div class="header__inner">
      </div>
    </header>
    <nav class="nav">
      <div class="nav__inner">
      </div>
    </nav>
    <main class="wrapper">
      <div class="wrapper__inner">
        <div class="content">
          <div class="content__inner">
          </div>
        </div>
        <div class="sidebar">
          <div class="sidebar__inner">
          </div>
        </div>
      </div>
    </main>
    <footer class="footer">
      <div class="footer__inner">
      </div>
    </footer>
  </div>
</div>

যা এতদূর দূরে নয়:

<div id="main-wrapper">
    <header>
    </header>
    <nav>
    </nav>
    <article>
    </article>
    <footer>
    </footer>
</div>

পাদলেখকে আটকে রাখার কৌশলটি হ'ল পাদলেখগুলি এতে থাকা উপাদানটির নীচের প্যাডিংয়ে নোঙ্গর করা। এটির জন্য ফুটারের উচ্চতা স্থিতিশীল হওয়া প্রয়োজন তবে আমি দেখতে পেয়েছি যে ফুটারগুলি সাধারণত স্থির উচ্চতার হয়।

_{এইচটিএমএল:}

<div id="main-wrapper">
    ...
    <footer>
    </footer>
</div>

_{সিএসএস:}

#main-wrapper {
    padding: 0 0 100px;
    position: relative;
}

footer {
    bottom: 0;
    height: 100px;
    left: 0;
    position: absolute;
    width: 100%;
}

কোড স্নিপেট দেখান

#main-wrapper {
  padding: 0 0 100px;
  position: relative;
}

footer {
  bottom: 0;
  height: 100px;
  left: 0;
  position: absolute;
  width: 100%;
}

header {
  background-color: #F00;
}
nav {
  background-color: #FF0;
}
article {
  background-color: #0F0;
}
footer {
  background-color: #00F;
}

<div id="main-wrapper">
   <header>
     here be header
   </header>
   <nav>
   </nav>
   <article>
     here be content
   </article>
   <footer>
     here be footer
   </footer>
</div>

স্নিপেট প্রসারিত করুন

ফুটারটিতে নোঙ্গর করা থাকলে #main-wrapper, এখন #main-wrapperপৃষ্ঠার শিশুদের দীর্ঘ না হওয়াতে আপনার কমপক্ষে পৃষ্ঠার উচ্চতা হওয়া দরকার । এটি একটি দ্বারা তৈরি করে #main-wrapperকরা min-heightহয় 100%। আপনাকে এটিও মনে রাখতে হবে যে এর বাবা-মা,html এবং bodyপৃষ্ঠার মতোই লম্বা হওয়া দরকার।

_{সিএসএস:}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#main-wrapper {
    min-height: 100%;
    padding: 0 0 100px;
    position: relative;
}

footer {
    bottom: 0;
    height: 100px;
    left: 0;
    position: absolute;
    width: 100%;
}

কোড স্নিপেট দেখান

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#main-wrapper {
  min-height: 100%;
  padding: 0 0 100px;
  position: relative;
}

footer {
  bottom: 0;
  height: 100px;
  left: 0;
  position: absolute;
  width: 100%;
}

header {
  background-color: #F00;
}
nav {
  background-color: #FF0;
}
article {
  background-color: #0F0;
}
footer {
  background-color: #00F;
}

 <div id="main-wrapper">
   <header>
     here be header
   </header>
   <nav>
   </nav>
   <article>
     here be content
   </article>
   <footer>
     here be footer
   </footer>
</div>

স্নিপেট প্রসারিত করুন

অবশ্যই, আপনারা আমার রায় নিয়ে প্রশ্ন করা উচিত, কারণ এই কোডটি কোনও সামগ্রী না থাকা সত্ত্বেও পাদলেখ পৃষ্ঠার নীচে থেকে পড়তে বাধ্য করছে। গত কৌতুক দ্বারা ব্যবহৃত বক্স মডেল পরিবর্তন হয় #main-wrapper, যাতে min-heightএর100% অন্তর্ভুক্ত 100pxপ্যাডিং।

_{সিএসএস:}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#main-wrapper {
    box-sizing: border-box;
    min-height: 100%;
    padding: 0 0 100px;
    position: relative;
}

footer {
    bottom: 0;
    height: 100px;
    left: 0;
    position: absolute;
    width: 100%;
}

কোড স্নিপেট দেখান

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#main-wrapper {
  box-sizing: border-box;
  min-height: 100%;
  padding: 0 0 100px;
  position: relative;
}

footer {
  bottom: 0;
  height: 100px;
  left: 0;
  position: absolute;
  width: 100%;
}

header {
  background-color: #F00;
}
nav {
  background-color: #FF0;
}
article {
  background-color: #0F0;
}
footer {
  background-color: #00F;
}

 <div id="main-wrapper">
   <header>
     here be header
   </header>
   <nav>
   </nav>
   <article>
     here be content
   </article>
   <footer>
     here be footer
   </footer>
</div>

স্নিপেট প্রসারিত করুন

এবং সেখানে এটি আপনার মূল HTML কাঠামোর সাথে একটি স্টিকি ফুটার রয়েছে। কেবলমাত্র footer'এর heightসমান #main-wrapper' padding-bottomএবং আপনার সেট করা উচিত তা নিশ্চিত করুন।

^{* আমি ফেইটের কাঠামোর সাথে দোষ খুঁজে পাওয়ার কারণটি হ'ল এটি একটি অপ্রয়োজনীয় উপাদান যুক্ত করার সময় বিভিন্ন শ্রেণিবদ্ধ স্তরের উপর .footerএবং .headerউপাদানগুলি সেট করে .push।}

Question 3

রায়ান ফাইটের স্টিকি ফুটার একটি সহজ সমাধান যা আমি অতীতে বেশ কয়েকবার ব্যবহার করেছি।

বেসিক এইচটিএমএল :

<div class="wrapper">
    <div class="header">
        <h1>CSS Sticky Footer</h1>
    </div>
    <div class="content"></div>
    <div class="push"></div>
</div>
<div class="footer"></div>

সিএসএস :

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

এটি ইতিমধ্যে এই লাইন বরাবর কিছু সঙ্গে ফলাফল যা আপনি এর অনুরূপ হতে অনুবাদ:

এইচটিএমএল :

<body>
    <div class="wrapper">
        <header>
        </header>
        <nav>
        </nav>
        <article>
        </article>
        <div class="push"></div>
    </div>
    <footer>
    </footer>
</body>

সিএসএস:

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

আপনার পাদলেখের উচ্চতা মেলে ডিভটি ধাক্কা দেওয়ার জন্য মোড়কের মার্জিনে নেতিবাচক আপডেট করতে ভুলবেন না। শুভকামনা!

Question 4

আমি কোনও অতিরিক্ত মার্কআপ যুক্ত না করেই এই সমস্যার সমাধানের দিকে চেয়েছিলাম, সুতরাং আমি নিম্নলিখিত সমাধানটি ব্যবহার করে শেষ করেছি:

article {
  min-height: calc(100vh - 150px); /* deduct the height or margins of any other elements within wrapping container*/
}

footer {
  height: 50px;
}

header {
   height: 50px;
}

nav {
  height: 50px;
}

<body>
  <div id="main-wrapper">
    <header>
    </header>
    <nav>
    </nav>
    <article>
    </article>
    <footer>
    </footer>
  </div>
</body>

স্নিপেট প্রসারিত করুন

নিবন্ধের জন্য ন্যূনতম-উচ্চতা নির্ধারণ করতে আপনাকে শিরোনাম, ন্যাভ এবং পাদলেখের উচ্চতাগুলি জানতে হবে। এটির মাধ্যমে, নিবন্ধটিতে সামগ্রীতে কয়েকটি লাইন থাকলে, পাদলেখ ব্রাউজার উইন্ডোর নীচে আটকে থাকবে, অন্যথায় এটি সমস্ত সামগ্রীর নীচে চলে যাবে।

আপনি এখানে এবং পোস্ট করা অন্যান্য সমাধানগুলি এখানে পেতে পারেন: https://css-tricks.com/couple-takes-sticky-footer/