স্ক্রোলবারগুলি থাকা অবস্থায়ও সারাক্ষণ পৃষ্ঠার সামগ্রীতে নীচে থাকুন

Question

সিএসএস পৃষ্ঠার নীচে ডিভ পুশ করুন

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

আমার সাথে id="footer"এই ডিভিস আছে এবং এই সিএসএস:

#footer {
    position: absolute;
    bottom: 30px;
    width: 100%;
}

তবে এটি কেবল ভিউপোর্টের নীচে চলে যায় এবং আপনি নীচে স্ক্রোল করে থাকলেও সেখানে থাকেন, সুতরাং এটি আর নীচে নেই।

চিত্র:

যদি স্পষ্ট না করা হয় তবে দুঃখিত, আমি এটি ঠিক করতে চাই না, কেবল এটির জন্য সমস্ত সামগ্রীর আসল নীচে।

Comments

চেষ্টা করুন position:fixed, যদিও এটি এটি করার সর্বোত্তম উপায় নয়

— redDevil

অবস্থানের চেষ্টা করুন: দেহে আপেক্ষিক।

আপনি আপনার বন্ধ করেন নি; পরে অবস্থান: পরম। এটি অন্যথায় নিখুঁতভাবে কাজ করতে হবে!

— অ্যালেক্স হাই হাই

Answer 1

এটি হ'ল এই জন্য position: fixedডিজাইন করা হয়েছিল:

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

এই হিটটি এখানে: http://jsfiddle.net/uw8f9/

Comments

90% ক্ষেত্রে এটি সমাধান ভাল নয়। আপনি যদি নিজের উইন্ডোটিকে পুনরায় মাপ দেন তবে আপনার

— পাদচরণকারী অন্যান্য

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

— আমার হেড হার্ট

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

— জোসেফ সিলবার

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

— আরথ

@ আরথ আমি সম্মতি জানাই, এটি একটি ভাল সমাধান এবং এটি আপনার চাওয়ার উপর নির্ভর করে। আমি কেবল ইঙ্গিত করছিলাম কেন একটি সমাধান অন্যটির চেয়ে জটিল -> তারা একই কাজ করে না।

— আমার হেড হার্ট

Answer 2

দুর্ভাগ্যক্রমে আপনি সামান্য অতিরিক্ত এইচটিএমএল যুক্ত করে এবং এক টুকরো সিএসএসের উপর অন্যের উপর নির্ভর করে এটি করতে পারবেন না।

এইচটিএমএল

প্রথম আপনি আপনার মোড়ানো প্রয়োজন header, footerএবং #bodyএকটি মধ্যে #holderDIV আছে:

<div id="holder">
    <header>.....</header>
    <div id="body">....</div>
    <footer>....</footer>
</div>

সিএসএস

তারপরে সেট height: 100%করুন htmlএবং body(আসল বডি, আপনার নয়)#body তা নিশ্চিত করার জন্য আপনি সন্তানের উপাদানে শতকরা হিসাবে সর্বনিম্ন উচ্চতা সেট করতে পারেন DIV আছে)।

এখন ডিভটি সেট min-height: 100%করুন #holderযাতে এটি স্ক্রিনের বিষয়বস্তু পূরণ করে এবং position: absoluteএর নীচে ফুটারটি বসার জন্য ব্যবহার করে#holder ।

দুর্ভাগ্যক্রমে, ডিভিতে যে কোনও সামগ্রীর উপরে বসতে না পারে তা নিশ্চিত করতে আপনাকে ডিভের একই উচ্চতা হিসাবে আবেদন padding-bottomকরতে হবে :#bodyfooterfooter

html,body{
    height: 100%
}

#holder{
    min-height: 100%;
    position:relative;
}

#body{
    padding-bottom: 100px;    /* height of footer */
}

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

কার্যকারী উদাহরণ, শর্ট বডি: http://jsfiddle.net/ELUGc/

কার্যকারী উদাহরণ, দীর্ঘ শরীর: http://jsfiddle.net/ELUGc/1/

Comments

আমি কেন প্রস্থ পেতে পারি না: 100%; প্রয়োজনীয়

— সোমনাথ খারাত

@ এসটাকোভারফ্লাও - আপনি যদি একটি width বা উভয় নির্দিষ্ট না করে থাকেনleft এবং rightমানগুলি সেট করা থাকে autoএবং উপাদানটি তার সামগ্রীতে ফিট করতে মোড়বে । নির্দিষ্ট করা width: 100% বা left: 0 এবং right:0নিশ্চিত করে যে একেবারে স্থান উপাদান ধারক উপাদান পুরো প্রস্থ লাগে

— my head hurts

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

— যতীন

@ ইয়ান একটি উত্তরে বলেছিলেন, কারণ তার কাছে মন্তব্য করার মতো যথেষ্ট প্রতিবেদন নেই: যদি আপনি 'মাই হেড হার্টস' এর উত্তর নিয়ে এসপ নেটনে সমস্যা বোধ করেন - আপনাকে মূলটিতে 'উচ্চতা: 100%' যুক্ত করতে হবে এটি কাজ করার জন্য ফরমে ট্যাগের পাশাপাশি এইচটিএমএল এবং বডি ট্যাগ তৈরি করেছে।

— মিশ্র

যদি আপনি এটি পুরো দেহের অভ্যন্তরের পরিবর্তে কোনও ডিভের ভিতরে কাজ করার চেষ্টা করছেন তবে নিশ্চিত হয়ে নিন যে আপনি উপাদানগুলি সহ আপনার সমস্ত উপাদানকে নির্দিষ্ট height=100%করেছেন । <form>

— বেন কেইন

Answer 3

উপরের উদাহরণ হিসাবে আমার জন্য বাগ (কোথাও ত্রুটি) রয়েছে যেমন কেবলমাত্র অন্য সমাধানের জন্য কাজ করা হয়েছে। নির্বাচিত উত্তর থেকে ভিন্নতা।

html,body {
    height: 100%
}

#nonFooter {
    min-height: 100%;
    position:relative;
    /* Firefox */
    min-height: -moz-calc(100% - 30px);
    /* WebKit */
    min-height: -webkit-calc(100% - 30px);
    /* Opera */
    min-height: -o-calc(100% - 30px);
    /* Standard */
    min-height: calc(100% - 30px);
}

#footer {
    height:30px;
    margin: 0;
    clear: both;
    width:100%;
    position: relative;
}

এইচটিএমএল লেআউটের জন্য

<body>
    <div id="nonFooter">header,middle,left,right,etc</div>
    <div id="footer"></div>
</body>

ভাল এইভাবে পুরানো ব্রাউজারটিকে সমর্থন করবেন না তবে পাদলেখ দেখতে 30px স্ক্রলডাউন করার জন্য এটি পুরানো ব্রাউজারের পক্ষে গ্রহণযোগ্য

• plunker

Answer 4

আমি বুঝতে পেরেছি যে এটি 'অন্যান্য উত্তরের প্রতিক্রিয়া জানাতে' এটি ব্যবহার না করার কথা বলেছে তবে দুর্ভাগ্যক্রমে আমার কাছে যথাযথ উত্তরের (!) একটি মন্তব্য যুক্ত করার মতো যথেষ্ট প্রতিনিধি নেই তবে ...

যদি 'মাই হেড হার্টস' এর উত্তর নিয়ে আপনার যদি অ্যাসপ.netতে সমস্যা হয় - আপনাকে এটির জন্য মূল উত্পন্ন ফর্ম ট্যাগের পাশাপাশি এইচটিএমএল এবং বডি ট্যাগগুলিতে 'উচ্চতা: 100%' যুক্ত করতে হবে।

Answer 5

আপনি আপনার বন্ধ করেন নি; পরে অবস্থান: পরম। অন্যথায় আপনার উপরের কোডটি নিখুঁতভাবে কাজ করবে!

#footer {
   position:absolute;
   bottom:30px;
   width:100%;
}

Answer 6

আমি যদি মন্তব্য করতে পারি তবে আমার কাছে এখনও অনুমতি নেই, তাই কিছু অ্যান্ড্রয়েড ডিভাইসে অপ্রত্যাশিত আচরণের জন্য আমি উত্তর হিসাবে একটি ইঙ্গিত পোস্ট করব:

অবস্থান: ফিক্সড কেবলমাত্র নীচের মেটা ট্যাগ ব্যবহার করে অ্যানড্রয়েড ২.১ থেকে ২.৩ এর মধ্যে কাজ করে:

<meta name="viewport" content="width=device-width, user-scalable=no">.

দেখতে http://caniuse.com/#search=position

Answer 7

ভিউপোর্ট কমান্ডটি ব্যবহার করে এটি একটি স্বজ্ঞাত সমাধান যা কেবলমাত্র ভিউপোর্ট উচ্চতা বিয়োগের পাদলেখের উচ্চতায় সর্বনিম্ন উচ্চতা নির্ধারণ করে।

html,body{
height: 100%
}
#nonFooter{
min-height: calc(100vh - 30px)
}

#footer {
height:30px;
margin: 0;
clear: both;
width:100%;
}

Answer 8

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

Answer 9

আমি কেবল যুক্ত করতে চাই - অন্যান্য উত্তরগুলির বেশিরভাগই আমার পক্ষে ভাল কাজ করেছে; তবে এগুলি কাজ করতে অনেক সময় লেগেছে!

এটি সেটিংসের কারণেই height: 100%কেবল পিতামাতার দ্বি'র উচ্চতা বাছাই হয়!

সুতরাং যদি আপনার পুরো এইচটিএমএল (শরীরের অভ্যন্তরীণ) নীচের মত দেখাচ্ছে:

<div id="holder">
    <header>.....</header>
    <div id="body">....</div>
    <footer>....</footer>
</div>

তারপরে নিম্নলিখিতটি ঠিক থাকবে:

html,body{
    height: 100%
}

#holder{
    min-height: 100%;
    position:relative;
}

#body{
    padding-bottom: 100px;    /* height of footer */
}

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

... "ধারক" হিসাবে এটির উচ্চতা সরাসরি "দেহ" থেকে নেওয়া হবে।

আমার হেড হার্টসকে কুডোস, যার উত্তরটি আমিই কাজ করতে গিয়ে শেষ করেছি!

যাহোক. যদি আপনার এইচটিএমএল আরও ঘৃণিত হয় (কারণ এটি কেবলমাত্র পুরো পৃষ্ঠার একটি উপাদান, বা এটি একটি নির্দিষ্ট কলামের মধ্যে রয়েছে ইত্যাদি) তবে আপনাকে অবশ্যই নিশ্চিত করতে হবে যে প্রত্যেকটি উপাদানওheight: 100% ডিভের উপর সেট করেছে । অন্যথায়, উচ্চতার তথ্য "দেহ" এবং "ধারক" এর মধ্যে হারিয়ে যাবে।

নীচের উদাহরণস্বরূপ, যেখানে উচ্চতাটি আমাদের শিরোনাম / শরীরে / পাদলেখের উপাদানগুলিতে নেমে আসে তা নিশ্চিত করার জন্য আমি প্রতিটি ডিভিতে "পূর্ণ উচ্চতা" শ্রেণি যুক্ত করেছি:

<div class="full-height">
    <div class="container full-height">
        <div id="holder">
            <header>.....</header>
            <div id="body">....</div>
            <footer>....</footer>
        </div>
    </div>
</div>

এবং সিএসএসে পূর্ণ-উচ্চতা শ্রেণিতে উচ্চতা নির্ধারণ করতে মনে রাখবেন:

#full-height{
    height: 100%;
}

এটা আমার সমস্যা স্থির!

Answer 10

আপনার যদি স্থির উচ্চতার ফুটার থাকে (উদাহরণস্বরূপ 712px) আপনি জেএস এর সাথে এটি করতে পারেন:

var bgTop = 0;
window.addEventListener("resize",theResize);
function theResize(){
    bgTop = winHeight - 712;
    document.getElementById("bg").style.marginTop = bgTop+"px";
}

Answer 11

position: fixed;
bottom: 0;
(if needs element in whole display and left align)
left:0;
width: 100%;

Comments

দয়া করে আপনার উত্তরে বর্ণনা করুন, সমস্যাটি কী ছিল এবং এই স্নিপেটটি কীভাবে এটি সমাধান করবে, অন্যদের এই উত্তরটি বুঝতে সহায়তা করতে

— FZs

Answer 12

স্থির-নীচে বুটস্ট্র্যাপ শ্রেণি ব্যবহার করুন

<div id="footer" class="fixed-bottom w-100">

Comments

ওপ বুটস্ট্র্যাপ ব্যবহার করছে এমন কোনও ইঙ্গিত নেই।

— টাইলারহহ