এইচটিএমএল পৃষ্ঠার পাদচরণটিকে নূন্যতম উচ্চতার সাথে পৃষ্ঠার নীচে থাকাতে পৃষ্ঠায় রাখুন, তবে পৃষ্ঠাটি ওভারল্যাপ করবেন না

378

আমার নীচের পৃষ্ঠাটি ছিল (ডেডলিঙ্ক http://www.workingstorage.com/Sample.htm:) যার একটি পাদচরণ রয়েছে যা আমি পৃষ্ঠার নীচে বসে থাকতে পারি না।

আমি ফুটার চাই

  • পৃষ্ঠাটি সংক্ষিপ্ত এবং স্ক্রীনটি ভরাট না হলে এবং উইন্ডো নীচে আটকে থাকুন
  • স্ক্রিনফুল সামগ্রীর চেয়ে বেশি (কন্টেন্টটি ওভারল্যাপ করার পরিবর্তে) যখন থাকে তখন ডকুমেন্টের শেষে থাকুন এবং স্বাভাবিক হিসাবে নীচে যান।

সিএসএস উত্তরাধিকার সূত্রে প্রাপ্ত এবং আমাকে বিস্মিত করেছে; সামগ্রীতে ন্যূনতম উচ্চতা স্থাপন করতে বা পাদলেখকে নীচে যেতে আমি এটি সঠিকভাবে পরিবর্তন করতে পারি না।

css  footer 
— Caveatrob
সূত্র
15
এটি আশ্চর্যজনক যে এটি একটি সাধারণ সমস্যা। সম্ভবত CSS4 এ আমরা প্রায়শই চেষ্টা করা হওয়ায় "একটি নেভ বার তৈরি করুন" এবং "একটি পাদলেখ তৈরি করুন" এর বাস্তবায়নগুলি দেখতে পাব।
— isomorphismes
1
CSS4 কখনই আসবে না (CSS3 কেবল বাড়বে)। আমি ভাবছি এটি বাস্তবায়নের সাথে সংশোধন করা হবে flexbox।
— মারিজকে লুট্টেকস
1
এটি সম্পর্কে দুর্দান্ত নিবন্ধ: css-tricks.com/couple-takes-sticky- footer
— ফিল
— ললিত বাঘেল

উত্তর:

345

একটি সহজ পদ্ধতি হ'ল 100%আপনার পৃষ্ঠার বডি তৈরি করা min-height, 100%খুব বেশি কিছু দিয়ে। আপনার পাদলেখের উচ্চতা পরিবর্তন না হলে এটি কাজ করে works

ফুটারকে নেতিবাচক মার্জিন-শীর্ষ দিন:

footer {
    clear: both;
    position: relative;
    height: 200px;
    margin-top: -200px;
}
— জন উইনস্টলি
সূত্র
27
এটি কেবল তখনই কাজ করে যদি আপনি সময়ের আগে আপনার পাদলেখের উচ্চতা জানেন। কখনও কখনও পাদলেখগুলির ডায়নামিক সামগ্রী থাকে বা আপনার কাঠামো তৈরি হয়। পরিবর্তনশীল উচ্চতা পাদচরণের জন্য কোনও ধারণা?
— কোস্টা
ভিজিয়েবল উচ্চতা পাদচরণকারীদের সাথে কাজ করে এমন একটি সমাধানের জন্য @ কোস্টা আমার উত্তর এখানে দেখুন ।
— জোসে রুই সান্টোস
গতিশীল কন্টেন্টের জন্য কেবল "উচ্চতা" বাদ দেয় এবং পাদলেখ বিষয়বস্তুর সাথে মানিয়ে নেবে। সমস্ত ব্রাউজারে পরীক্ষা করা হয়নি
— m47730
এটির box-sizing: border-box;জন্য শরীরের [এবং #container] প্রয়োজন হতে পারে ।
— কনসোলবক্স
এটি অনেকগুলি অদ্ভুত কৌশল বলে মনে হচ্ছে, নীচে উত্তরগুলি রয়েছে যা সহজ এবং কোনও কৌশল ব্যবহার করে না।
— অ্যান্ড্রু কোস্টার 1
164

আমি পাদলেখটিকে নীচে রেখে আটকে রাখার জন্য একটি সহজ পদ্ধতি তৈরি করেছি, তবে বেশিরভাগ সাধারণ পদ্ধতি হিসাবে, আপনার পাদলেখের উচ্চতা ফিট করার জন্য আপনাকে এটি টুইট করতে হবে।

ডেমো দেখুন

ফ্লেক্সবক্স পদ্ধতি:

html, body{ height:100%; margin:0; }
header{ height:50px; background:lightcyan; }
footer{ height:50px; background:PapayaWhip; }

/* Trick */
body{ 
  display:flex; 
  flex-direction:column; 
}

footer{
  margin-top:auto; 
}
 
<body>
  <header>Header</header>
  <article>Content</article>
  <footer>Footer</footer>
</body>
স্নিপেট প্রসারিত করুন

একটি স্থাপন দ্বারা ব্যবহারের একটি "কৌতুক" নীচে এই পদ্ধতি ::afterতে সিউডো-উপাদান body, এবং সেট এটা আছে সঠিক , ফুটার উচ্চতা তাই এটি সঠিক একই স্থান পাদচরণ করে ব্যাপৃত হবে, তাই যখন পাদচরণ হয় absoluteএটি উপর স্থান, ফুটার সত্যিই জায়গা নিচ্ছে এবং এর পরম অবস্থানের নেতিবাচক প্রভাবগুলি দূর করার মতো এটি প্রদর্শিত হবে (উদাহরণস্বরূপ, শরীরের সামগ্রীর উপর দিয়ে যাওয়া)

position:absolute পদ্ধতি: (গতিশীল ফুটার উচ্চতার অনুমতি দেয় না)

html{ height:100%; }
body{ min-height:100%; padding:0; margin:0; position:relative; }
header{ height:50px; background:lightcyan; }
footer{ background:PapayaWhip; }

/* Trick: */
body {
  position: relative;
}

body::after {
  content: '';
  display: block;
  height: 50px; /* Set same as footer's height */
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
}
<body>
  <header>Header</header>
  <article>Content</article>
  <footer>Footer</footer>
</body>
স্নিপেট প্রসারিত করুন

সারণী-বিন্যাস পদ্ধতি:

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

header {
  height: 50px;
  background: lightcyan;
}

footer {
  height: 50px;
  background: PapayaWhip;
}


/**** Trick: ****/
body {
  display: table;
  width: 100%; 
}

footer {
   display: table-row;
}
<body>
  <header>Header</header>
  <article>Content</article>
  <footer>Footer</footer>
</body>
স্নিপেট প্রসারিত করুন

— VSync
সূত্র
সহজ এবং মার্জিত এবং আরও গুরুত্বপূর্ণভাবে এটি কাজ করে। আপনি যখন ডিভগুলি যোগ করতে শুরু করেন তখন অন্যান্য সমাধান ব্যর্থ হয় display: table display: table-row display:table-cell। তবে আমি খুঁজে পেয়েছি যে body {margin-top: 0; padding-top: 0; margin-bottom: 0; padding-bottom: 0;}একটি স্ক্রোল বার এড়াতে আমার যুক্ত করা দরকার । আপনি এটি সামঞ্জস্য করে এর জন্য যত্ন নিতে পারেন body:after heightতবে আমি রিমতে আমার নির্দিষ্ট করে দিচ্ছি যাতে এটি সমস্যাযুক্ত হয়ে ওঠে।
— স্টিভ ওয়ারিং
3
@ স্টিভওয়ারিং - আপনাকে ধন্যবাদ এটি বেশ পুরানো হওয়ায় এই উত্তরটি আপডেট করুন। এখন আমি ব্যবহারের পক্ষেflexbox
— vsync
1
"বেসিক কমন মার্কআপ" এর অধীনে সিএসএসে একটি ছোট ত্রুটি ছিল যা এটি কাজ না করে (ত্রুটিটি লিঙ্কযুক্ত "ডেমো" তে উপস্থিত ছিল না, যা ঠিক আছে)। আমি এটি ঠিক করার স্বাধীনতা গ্রহণ করেছি।
— sleske
3
ধন্যবাদ! ফ্লেক্সবক্স সমাধানটি আসলে সহজ এবং কোনও হ্যাক বা অদ্ভুত স্থির আকার বা স্থিত অবস্থান ব্যবহার করে।
— অ্যান্ড্রু কোস্টার 1
1
এই ডেমোটিই কেবল কাজ করে! কল্পনা, ধন্যবাদ!
— ড্রাগিনাইট
51

দুর্দান্ত ক্রস ব্রাউজারে কাজ করে এমন একটি খুব সহজ পদ্ধিতি হ'ল:

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}
<div id="container">
   <div id="header">header</div>
   <div id="body">body</div>
   <div id="footer">footer</div>
</div>
স্নিপেট প্রসারিত করুন

— ট্যামস পাপ
সূত্র
33

আমি আমার পাদলেখকে নীচে আটকে রাখতে এটি ব্যবহার করেছি এবং এটি আমার পক্ষে কাজ করেছে:

এইচটিএমএল

<body>
    <div class="allButFooter">
        <!-- Your page's content goes here, including header, nav, aside, everything -->
    </div>
    <footer>
        <!-- Footer content -->
    </footer>
</body>

এইচটিএমএল-এ আপনাকে একমাত্র পরিবর্তন করতে হবে, divএটি "allButFooter"ক্লাসের সাথে যুক্ত করুন । আমি এটি সমস্ত পৃষ্ঠাগুলির সাথে করেছি, যা সংক্ষিপ্ত ছিল, আমি জানতাম যে পাদলেখ নীচে আটকে থাকবে না, এবং পৃষ্ঠাগুলিও যথেষ্ট ছিল যে আমি ইতিমধ্যে জানতাম যে আমাকে স্ক্রোল করতে হয়েছে। আমি এটি করেছি, যাতে আমি দেখতে পেলাম যে কোনও পৃষ্ঠার সামগ্রী গতিশীল হওয়ার ক্ষেত্রে এটি ঠিক কাজ করে।

সিএসএস

.allButFooter {
    min-height: calc(100vh - 40px);
}

"allButFooter"বর্গ একটি আছে min-heightমান (যে ভিউপোর্ট উচ্চতা উপর নির্ভর করে 100vhআমি ইতিমধ্যে জানতেন যে ছিল ভিউপোর্ট উচ্চতা 100% মানে) এবং ফুটার এর উচ্চতা, 40px।

আমি এটাই করেছি এবং এটি আমার পক্ষে নিখুঁতভাবে কাজ করেছে। আমি প্রতিটি ব্রাউজারে এটি চেষ্টা করি নি, কেবল ফায়ারফক্স, ক্রোম এবং এজ, এবং ফলাফলগুলি আমি যা চাইছিলাম তেমন হয়েছিল। পাদলেখ নীচে আটকে থাকে এবং আপনাকে জেড-ইনডেক্স, অবস্থান বা অন্য কোনও বৈশিষ্ট্য নিয়ে ঝামেলা করতে হবে না। আমার নথির প্রতিটি উপাদানের অবস্থান ডিফল্ট অবস্থান ছিল, আমি এটিকে পরম বা স্থির বা কোনও কিছুতে পরিবর্তন করি নি।

প্রতিক্রিয়াশীল নকশা নিয়ে কাজ করা

আমি এখানে কিছু পরিষ্কার করতে চাই's 40px উচ্চমানের একই ফুটারের সাথে এই সমাধানটি আমি যখন প্রতিক্রিয়াশীল ডিজাইনে ব্যবহার করে কাজ করার সময় প্রত্যাশা করছিলাম তেমন কার্যকর হয়নি Twitter-Bootstrap। ফাংশনে আমি যে মানটি বাদ দিচ্ছি তা আমাকে সংশোধন করতে হয়েছিল:

.allButFooter {
    min-height: calc(100vh - 95px); 
}

এটি সম্ভবত কারণ Twitter-Bootstrapতার নিজস্ব মার্জিন এবং প্যাডিংস নিয়ে আসে, তাই আমাকে সেই মানটি সামঞ্জস্য করতে হয়েছিল।

আমি আশা করি এটি আপনার কিছুটা কাজে আসবে! কমপক্ষে, এটি চেষ্টা করার একটি সহজ সমাধান এবং এটি সম্পূর্ণ নথিতে বড় পরিবর্তনগুলি জড়িত না।

— এন। ল্যারিয়াক্স
সূত্র
আমি এই সমস্যার সমস্ত ধরণের সমাধান দিয়ে সমস্যার মুখোমুখি হয়েছি। এই সমাধানটি আমার পৃষ্ঠার সাথে কাজ করে যা display: noneধন্যবাদ ব্যবহার করে শরীরে প্রদর্শিত হয় । এটা খুব সুন্দর এবং সহজ।
— স্টিভ ওয়ারিং
সমাধানের বহু ঘন্টা চেষ্টা করার পরে কেবল দু'জনই কাজ করেছেন। position: fixed; bottom: 0এবং এটি. এই সমাধানটি সেরা কারণ পাদলেখ নীচে আটকে না তবে স্ক্রোলযোগ্য পৃষ্ঠার শেষে থেকে যায়।
— Hmerman6006
আপনার উত্তরটি তৈরি করতে, আপনি এটি সেট করে আরও একটি উপায়ে দেখতে পারেন .footer {max-height: calc(100vh+40px); position: absolute}। এটি যেমন কাজ করে তেমনি আপনার দেহের আকারও জানা উচিত।
— Hmerman6006
28

আই 7 থেকে আপনি কেবল ব্যবহার করতে পারেন

#footer {
    position:fixed;
    bottom:0;
}

সমর্থনের জন্য ক্যানিউজ দেখুন ।

— লিয়াম
সূত্র
77
পাদলেখের ওপারে সামগ্রী থাকা অবস্থায় আমি নীচে ফুটারটি চাই না। আমি চাই যখন পর্যাপ্ত পরিমাণ না থাকে তখন পাদলেখ নীচে আটকে থাকে এবং তারপরে স্ক্রিনফুলের চেয়ে বেশি থাকে তখন স্বাভাবিকের মতো নীচের দিকে প্রসারিত হয়। স্টিকি পাদলেখ এটি সমাধান করে।
— ক্যাভাট্রব
@ কেভাট্রোব: আমি আপনার গুরুত্বপূর্ণ প্রশ্নাবলীর মধ্যে এই গুরুত্বপূর্ণ তথ্য সম্পাদনা করার স্বাধীনতা নিয়েছি, কেবল ভুল বোঝাবুঝি এড়াতে (ভবিষ্যতের পাঠকদের জন্য, আপনি সম্ভবত :-) এর মধ্যে এটিকে সমাধান করেছেন)।
— sleske
15

একটি সাধারণ সমাধান যা আমি ব্যবহার করি, আইই 8 + থেকে কাজ করে

ন্যূনতম উচ্চতা দিন: এইচটিএমএলে 100% যাতে সামগ্রী কম হয় তবে পৃষ্ঠাটি পৃষ্ঠার নীচে পুরো ভিউ-পোর্টের উচ্চতা এবং পাদলেখর কাঠামো গ্রহণ করে। যখন সামগ্রী বৃদ্ধি পায় তখন পাদলেখগুলি নীচে চলে যায় এবং নীচে থাকে to

জেএস ফ্রিডল ওয়ার্কিং ডেমো: http://jsfiddle.net/3L3h64qo/2/

CSS

html{
  position:relative; 
  min-height: 100%;
}
/*Normalize html and body elements,this style is just good to have*/
html,body{
  margin:0;
  padding:0;
}
.pageContentWrapper{
  margin-bottom:100px;/* Height of footer*/
} 
.footer{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height:100px;
    background:#ccc;
}

এইচটিএমএল

   <html>
    <body>
        <div class="pageContentWrapper">
            <!-- All the page content goes here-->
        </div>
        <div class="footer">
        </div>
    </body>
    </html>
— সঞ্জীব
সূত্র
এটি ভাল..কিন্তু কেবল আপডেট করুন .পেজ কনটেন্টওয়্যার্পার {প্যাডিং-নীচে: 100px; / * ফুটারের উচ্চতা * /}
— সুবোধ শর্মা
অনেক ধন্যবাদ. অ্যাঙ্গুলার 7
— কার্লোস টরেস
সম্ভব হলে আমি অপ্রয়োজনীয় স্ক্রোল বারটি তৈরি করতে চাই না।
— Константин Ван
14

তবুও, আরও একটি সহজ সমাধান হ'ল:

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    display: table;
}

footer {
    background-color: grey;
    display: table-row;
    height: 0;
}

jsFiddle

কৌতুক একটি ব্যবহার করা display:tableপুরো নথির জন্য এবং display:table-rowসঙ্গে height:0ফুটার জন্য।

যেহেতু পাদলেখ একমাত্র দেহের শিশু হিসাবে প্রদর্শিত table-rowহয় তাই এটি পৃষ্ঠার নীচে রেন্ডার করা হয়।

— জোসে রুই সান্টোস
সূত্র
আমি CSS টেবিলগুলি পছন্দ করি তবে তারা লাইনটি ইস্যুটি তৈরি করে যা বেশ আশ্চর্যজনক: স্ট্যাকওভারফ্লো
— কোস্টা
1
এই সমাধানটি সম্পূর্ণরূপে কাজ করছে বলে মনে হচ্ছে না - ফায়ারফক্স ফুটার উচ্চতা 0 উপেক্ষা করে height আমি এর পরিবর্তে উচ্চতা 1px বা এমনকি 1% ব্যবহার করেছি। এজ, আইই 11, ক্রোম এবং মোবাইল সাফারি 0 দিয়ে খুশি
— কিট
আমি এই সমাধানটি সত্যিই পছন্দ করি। তবে আমি যখন আমার লেআউটটি এইভাবে তৈরি করি তখন শিশুদের উপাদানগুলির ব্রাউজারের হিসাবটি নষ্ট হয়ে যায়। ধরা যাক আমরা পৃষ্ঠার শীর্ষে একটি ধারক রাখতে চাই height: 100%এবং ভিউপোর্টের অনুপাতটি 1/1 (বর্গ) হলে এটি তখনই তার 100% হওয়া উচিত। যখন ভিউপোর্ট বিস্তৃত হবে (ল্যান্ডস্কেপ) উচ্চতা হবে তখন 100% এবং যদি সংকীর্ণ (প্রতিকৃতি) কম হয় তবে 100%। সুতরাং উচ্চতাটি উইন্ডোটির প্রস্থের পূর্ববর্তী। অন্য একটি মোড়ক দিয়ে এটি সমাধান করার চেষ্টা করা হয়েছে কিন্তু এটি কার্যকর হয়নি। কেউ সমাধান পেয়েছে বা ইশারাতে পাবে ???
— এক্সেল
@ অ্যাক্সেল এই সংস্করণে আমি 100% উচ্চতা সহ শীর্ষে একটি নীল ডিভি যুক্ত করেছি যা ভিউপোর্টের প্রস্থ নির্বিশেষে সমস্ত উচ্চতা (বিয়োগফলক উচ্চতা) দখল করে। আমি মনে করি আপনার কাছে অন্য সিএসএস মেসিং জিনিস থাকতে পারে। আমার মূল জেএসফিডেলের উপর ভিত্তি করে আপনার ইস্যুর একটি ছোট্ট সংস্করণ তৈরি করার চেষ্টা করুন
— জোসে রুই সান্টোস
— অ্যাক্সেল
7

সাবধান থাকার একটি বিষয় হ'ল মোবাইল ডিভাইসগুলি, যেহেতু তারা ভিউপোর্টের ধারণাটি একটি 'অস্বাভাবিক' উপায়ে প্রয়োগ করে:

http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW25

যেমন, position: fixed;(যেমন আমি অন্যান্য জায়গায় প্রস্তাবিত দেখেছি) ব্যবহার করা সাধারণত যাওয়ার উপায় নয়। অবশ্যই, এটি আপনার পরে ঠিক আচরণের উপর নির্ভর করে।

আমি যা ব্যবহার করেছি এবং ডেস্কটপ এবং মোবাইলে ভাল কাজ করেছি তা হ'ল:

<body>
    <div id="footer"></div>
</body>

সঙ্গে

body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0;
    margin: 0;
}

#footer {
    position: absolute;
    bottom: 0;
}
— বেন জ্যাকসন
সূত্র
7

একটি খুব সহজ নমনীয় সমাধান যা স্থির উচ্চতা বা উপাদানগুলির পরিবর্তনের অবস্থান গ্রহণ করে না।

এইচটিএমএল

<div class="container">
  <header></header>
  <main></main>
  <footer></footer>
</div>

সিএসএস

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

ব্রাউজার সমর্থন

আইই 11 এবং নীচে বাদে সমস্ত বড় ব্রাউজার।

যথাযথ উপসর্গের জন্য অটোপ্রেফিক্সার ব্যবহার নিশ্চিত করুন ।

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

— m.spyratos
সূত্র
মোহন মত কাজ! এমনকি নীচে 4 কে ফুটারের বেশি লাঠি রাইজ করার জন্য
— অর্পণ বন্দ্যোপাধ্যায়
6

এটা কর

<footer style="position: fixed; bottom: 0; width: 100%;"> </footer>

আপনি ফ্লেক্স সম্পর্কেও পড়তে পারেন এটি সমস্ত আধুনিক ব্রাউজার দ্বারা সমর্থিত

আপডেট : আমি ফ্লেক্স সম্পর্কে পড়েছি এবং চেষ্টা করেছি। এটা আমার জন্য কাজ করেছে। আশা করি এটি আপনার ক্ষেত্রেও তাই করবে। এখানে আমি কীভাবে প্রয়োগ করেছি e এখানে প্রধান আইডি নয় এটি ডিভ

body {
    margin: 0;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    display: block;
    flex: 1 0 auto;
}

এখানে আপনি ফ্লেক্স https://css-tricks.com/snippets/css/a-guide-to-flexbox/ সম্পর্কে আরও পড়তে পারেন

মনে রাখবেন এটি IE এর পুরানো সংস্করণ দ্বারা সমর্থিত নয়।

— আর্থ টান্ডেল
সূত্র
1
এটি অনুশীলনের সেরা উত্তর। flex-grow: 1পাদলেখের উপরে কিছু ব্যবহার করলে পাদলেখগুলি নীচে ঠিকমতো থাকবে।
— iBug
5

আমি ঠিক এখানে অনুরূপ প্রশ্নের উত্তর দিয়েছি:

স্থির শিরোনামযুক্ত পৃষ্ঠার নীচে পাদলেখ পজিশন

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

  1. আপনার এইচটিএমএল এবং শরীরের জন্য উচ্চতা নির্ধারণ করে শুরু করুন
html, body {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0px;
}

আমি columnআমাদের অ্যাপ্লিকেশনটির জন্য একটি আচরণ ধরে নিচ্ছি , ক্ষেত্রে যদি আপনাকে একটি শিরোনাম, নায়ক বা যে কোনও সামগ্রী উল্লম্বভাবে সারিবদ্ধ করা প্রয়োজন।

  1. স্পেসার ক্লাস তৈরি করুন
.spacer {
    flex: 1; 
}
  1. সুতরাং পরে আপনার এইচটিএমএল এর মত কিছু হতে পারে 
<html>
  <body>
    <header> Header </header>
    Some content...
    <div class='spacer'></div>
    <footer> Footer </footer>
  </body>
</html>

আপনি এটির সাথে এখানে খেলতে পারেন https://codepen.io/anon/pen/xmGZQL

— Camo
সূত্র
5

এটি একটি স্টিকি ফুটার হিসাবে পরিচিত। এটির জন্য একটি গুগল অনুসন্ধান অনেক ফলাফল নিয়ে আসে। একটি সিএসএস স্টিকি ফুটার হ'ল আমি সফলভাবে ব্যবহার করেছি। তবে আরও আছে।

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}
.footer, .push {
    height: 4em;
}
<html>
    <head>
        <link rel="stylesheet" href="layout.css" ... />
    </head>
    <body>
        <div class="wrapper">
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
    </body>
</html>
স্নিপেট প্রসারিত করুন

এই কোডের জন্য উত্স

— পাওলো বার্গান্টিনো
সূত্র
3

আমার jquery পদ্ধতি, পৃষ্ঠার সামগ্রীটি যদি উইন্ডোর উচ্চতার চেয়ে কম হয়, বা সামগ্রীতে পাদলেখ রেখে দেয় অন্যথায়:

এছাড়াও, অন্যান্য কোডের আগে কোডটিকে নিজের ঘেরে রাখলে পাদলেখ স্থান পরিবর্তন করতে সময় কমবে।

(function() {
    $('.footer').css('position', $(document).height() > $(window).height() ? "inherit" : "fixed");
})();
— স্যাম জোন্স
সূত্র
3

আমি নিজেই এই সমস্যাটি খতিয়ে দেখছি। আমি বেশ কয়েকটি সমাধান দেখেছি এবং তাদের প্রত্যেকেরই সমস্যা ছিল, প্রায়শই কিছু ম্যাজিক সংখ্যা জড়িত।

তাই বিভিন্ন উত্স থেকে সেরা অনুশীলনগুলি ব্যবহার করে আমি এই সমাধানটি নিয়ে এসেছি:

http://jsfiddle.net/vfSM3/248/

আমি এখানে বিশেষভাবে যে জিনিসটি অর্জন করতে চেয়েছিলাম তা হ'ল সবুজ অঞ্চলের অভ্যন্তরে পাদলেখ এবং শিরোলেখের মধ্যে স্ক্রোল করার জন্য মূল বিষয়বস্তু পাওয়া।

এখানে একটি সহজ সিএসএস:

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
header {
    height: 4em;
    background-color: red;
    position: relative;
    z-index: 1;
}
.content {
    background: white;
    position: absolute;
    top: 5em;
    bottom: 5em;
    overflow: auto;
}
.contentinner {
}
.container {
    height: 100%;
    margin: -4em 0 -2em 0;
    background: green;
    position: relative;
    overflow: auto;
}
footer {
     height: 2em;
     position: relative;
     z-index: 1;
     background-color: yellow;
}
— husayt
সূত্র
3
আমি এইভাবে ডিজাইন করা সাইটগুলিকে ঘৃণা করি। আমি একই সাথে আমি যে পরিমাণ পাঠ্য পড়তে পারি তা সীমাবদ্ধ রাখতে চান কেন? সারাক্ষণ আমার শিরোনাম এবং পাদচরণ দেখার দরকার নেই, আমি যখন চাই তখন সেগুলি কোথায় খুঁজে পাব I
— টারমিল
1
@Tarmil কটাক্ষপাত আছে numerics.info । আপনি কি এখন দেখেন যে কখন এটি কার্যকর হতে পারে?
— হুসায়েট
3

এইভাবেই আমি একই সমস্যাটি সমাধান করেছি

html {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  position: relative;
  margin: 0;
  padding-bottom: 6rem;
  min-height: 100%;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.demo {
  margin: 0 auto;
  padding-top: 64px;
  max-width: 640px;
  width: 94%;
}

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}
<div class="demo">

  <h1>CSS “Always on the bottom” Footer</h1>

  <p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p>

  <p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p>

  <p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).</p>

  <p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute; </code>.</p>
</div>

<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>
স্নিপেট প্রসারিত করুন

— Nemus
সূত্র
2

কেবল পাদলেখ বিভাগটি কাস্টমাইজ করুন

.footer 
{
   position: fixed;
   bottom: 0;
   width: 100%;
   padding: 1rem;
   text-align: center;
}
 <div class="footer">
   Footer is always bootom
 </div>
— rashedcs
সূত্র
কাজ করছে না. আমাদের খুব বড় পৃষ্ঠা থাকলেও এটি সর্বদা নীচে স্থির থাকে। এটি সমস্ত পৃষ্ঠার সাথে স্ক্রোল করতে পারে না তবে কেবল নীচে আটকে থাকে।
— fWd82
কাজ করে না। পাদটীকাগুলি শীর্ষে আসছে।
— indolentdeveloper
1

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>test</title>
        <style>

            html
            {
                height:100%;
            }

            body
            {
                min-height:100%;
                padding:0; /*not needed, but otherwise header and footer tags have padding and margin*/
                margin:0; /*see above comment*/
            }

            body
            {
                position:relative;
                padding-bottom:60px; /* Same height as the footer. */           
            }

            footer
            {
                position:absolute;
                bottom:0px;
                height: 60px;

                background-color: red;
            }

        </style>
    </head>
    <body>
        <header>header</header>


        <footer>footer</footer>
    </body>
</html>

সুতরাং আমরা প্রথম যে কাজটি করি তা হ'ল বৃহত্তম পাত্রে (এইচটিএমএল) 100% করা। এইচটিএমএল পৃষ্ঠাটি পৃষ্ঠাটির মতোই বড়। পরবর্তী আমরা দেহের উচ্চতা নির্ধারণ করি, এটি এইচটিএমএল ট্যাগের 100% এর চেয়ে বড় হতে পারে তবে এটি কমপক্ষে বৃহত্তর হওয়া উচিত, তাই আমরা ন্যূনতম উচ্চতা 100% ব্যবহার করি।

আমরা শরীরকেও আপেক্ষিক করে তুলি। আপেক্ষিক মানে আপনি ব্লক উপাদানটিকে তার আসল অবস্থান থেকে তুলনামূলকভাবে চারপাশে সরিয়ে নিতে পারেন। আমরা যদিও এটি এখানে ব্যবহার করি না। কারণ আপেক্ষিকের দ্বিতীয় ব্যবহার রয়েছে। যেকোন নিখুঁত উপাদানটি মূল (html) এর সাথে বা প্রথম আত্মীয় পিতামাতার / পিতামাতার কাছে নিখুঁত। আমরা এটিই চাই, আমরা চাই পাদলেখ নিরঙ্কুশ হোক, দেহের সাথে তুলনামূলকভাবে নীচে।

সর্বশেষ পদক্ষেপটি পাদলেখকে নিখুঁত এবং নীচে স্থির করা হয়: 0, এটি এটিকে আপেক্ষিক (মূলতঃ স্বামী) যে প্রথম পিতামাতার / পিতামহীর নীচে নিয়ে যায়।

এখন আমাদের ঠিক করতে এখনও একটি সমস্যা আছে, যখন আমরা সম্পূর্ণ পৃষ্ঠাটি পূরণ করি তখন সামগ্রীটি ফুটারের নীচে চলে যায়। কেন? ভাল, কারণ পাদলেখ "html প্রবাহ" এর মধ্যে আর নেই, কারণ এটি পরম। তাই কিভাবে আমরা এই ঠিক করব? আমরা শরীরে প্যাডিং-ডাউন যুক্ত করব। এটি নিশ্চিত করে যে শরীরটি এটির সামগ্রীর চেয়ে আসলে বড়।

আমি আপনাকে ছেলেদের জন্য আমি অনেক পরিষ্কার করেছি আশা করি।

— ডেভিড
সূত্র
1

জিকুয়েরি ব্যবহার করে ডায়নামিক ওয়ান লাইনার

আমি যে সমস্ত সিএসএস পদ্ধতি নিয়ে এসেছি সেগুলি খুব কঠোর। এছাড়াও, পাদলেখ সেট করা fixedকোনও বিকল্প নয় যদি তা ডিজাইনের অংশ না হয়।

পরীক্ষিত:

  • ক্রোম: 60
  • এফএফ: 54
  • আইই: 11

এই বিন্যাসটি ধরে নিচ্ছি:

<html>

<body>
  <div id="content"></div>
  <div id="footer"></div>
</body>

</html>

নিম্নলিখিত jQuery ফাংশন ব্যবহার করুন:

$('#content').css("min-height", $(window).height() - $("#footer").height() + "px");

কি যে আছে সেট করা হয় min-heightজন্য #contentকরতে উইন্ডোতে উচ্চতা - পাদচরণ উচ্চতা কি কখনও সেই সময়ে হতে পারে।

যেহেতু আমরা ব্যবহার করেছি min-height, যদি #contentউচ্চতা উইন্ডোটির উচ্চতা ছাড়িয়ে যায় তবে ফাংশনটি মনোযোগ সহকারে অবনমিত হয় এবং এটির প্রয়োজনীয়তার কারণে কোনও প্রভাব ফেলবে না।

এটি কর্মে দেখুন:

$("#fix").click(function() {
  $('#content').css("min-height", $(window).height() - $("#footer").height() + "px");
});
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: #111;
}

body {
  text-align: center;
  background: #444
}

#content {
  background: #999;
}

#footer {
  background: #777;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html>

<body>
  <div id="content">
    <p>Very short content</p>
    <button id="fix">Fix it!</button>
  </div>
  <div id="footer">Mr. Footer</div>
</body>

</html>
স্নিপেট প্রসারিত করুন

জেএসফিডেলে একই স্নিপেট

বোনাস:

আমরা এটিকে আরও এগিয়ে নিতে এবং এই ফাংশনটিকে গতিশীল দর্শকের উচ্চতার আকারের আকারের সাথে খাপ খাইয়ে নিতে পারি:

$(window).resize(function() {
    $('#content').css("min-height", $(window).height() - $("#footer").height() + "px");
  }).resize();
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: #111;
}

body {
  text-align: center;
  background: #444
}

#content {
  background: #999;
}

#footer {
  background: #777;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html>

<body>
  <div id="content">
    <p>Very short content</p>
  </div>
  <div id="footer">Mr. Footer</div>
</body>

</html>
স্নিপেট প্রসারিত করুন

— আমি হ্যাজ কোড
সূত্র
0

কেবল এইচটিএমএল, দেহ এবং অন্যান্য সারিগুলি পাদলেখ বাদে 100% এ সেট করুন। যেমন

<body>
<header></header>
<content></content>
<footer></footer>

সিএসএস হয় 

html, body, header, content{
height:100%;
}
— ওলাতুন্ডে জি।
সূত্র
0 
<!DOCTYPE html>

<html>
 <head>
   <link rel="stylesheet" type="text/css" href="main.css" />
 </head>

<body>
 <div id="page-container">
   <div id="content-wrap">
     <!-- all other page content -->
   </div>
   <footer id="footer"></footer>
 </div>
</body>

</html>


#page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 2.5rem;    /* Footer height */
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;            /* Footer height */
}
— সান জাইসি
সূত্র
0

ওটা সম্পর্কে কি:

<div style="min-height: 100vh;"> 
 content
</div>

<footer>
 copyright blah blah
</footer>
— novecentonove
সূত্র
এই কোডটি প্রশ্নের উত্তর দিতে পারে, কেন এবং / অথবা এই কোডটির প্রশ্নের উত্তর কীভাবে তার দীর্ঘমেয়াদী মানকে উন্নত করে সে সম্পর্কে অতিরিক্ত প্রসঙ্গ সরবরাহ করে।
— εηοιτ.εηοιτ.βε
-1

আমি আমার অনেক প্রকল্পে ব্যবহার করেছি এবং কোনও একক ইস্যু পাইনি :)

আপনার রেফারেন্সের জন্য কোড স্নিপেটে রয়েছে 

* {
	margin: 0;
}
html, body {
	height: 100%;
}
.wrapper {
	min-height: 100%;
	height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
	height: 100%;
	margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
  background:green;
}
.footer, .push {
	height: 50px; /* .push must be the same height as .footer */
}

.footer{
  background:gold;
  }
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
  <div class="wrapper">
    Content Area
    </div>
  
  <div class="push">
    </div>
  
  <div class="footer">
    Footer Area
    </div>
</body>
</html>
স্নিপেট প্রসারিত করুন

— সন্তোষ খলসে
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.