740

নিম্নলিখিত এইচটিএমএল দেওয়া হয়েছে:

<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>

আমি #copyrightনীচে আটকাতে চাই #container।

আমি নিখুঁত অবস্থান ব্যবহার না করে এটি অর্জন করতে পারি? যদি ভাসমান সম্পত্তি 'নীচে' এর কোনও মানকে সমর্থন করে তবে মনে হয় এটি কৌশলটি করবে তবে দুর্ভাগ্যক্রমে, এটি হয় না।

html css

— Donal
সূত্র

211

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

— তোমালাক

আমি প্রশ্নটি বুঝতে পারি না। আপনার কেন একেবারে পরম অবস্থান ব্যবহার করা দরকার? কনটেইনারটিতে থাকা সামগ্রীর নির্বিশেষে কি ধারকটির একটি উচ্চতা রয়েছে?

— হার্টলেসান

920

সম্ভবত না।

বরাদ্দ position:relativeকরা #container, এবং তারপর position:absolute; bottom:0;থেকে #copyright।

#container {
    position: relative;
}
#copyright {
    position: absolute;
    bottom: 0;
}

<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>

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

— ব্যবহারকারী
সূত্র

10

যদি অবস্থান: আপনার ধারকটির তুলনায় আপনার নকশাটি ভেঙে দেয় তবে মনে রাখবেন যে আপনি কেবল ধারকটির ভিতরে 100% উচ্চতা সহ একটি মোড়ক ডিভ অন্তর্ভুক্ত করতে পারেন এবং অবস্থানটি যুক্ত করতে পারেন: পরিবর্তে তার তুলনায়।

— জ্যাক শেফার্ড

এবং যদি এটি উপাদানগুলির পুনরাবৃত্তি করার জন্য হয়, যা অন্যথায় প্রত্যেকটির শীর্ষে অবস্থান করবে?

— ক্রিস

6

একেবারে অবস্থানযুক্ত উপাদান এটির নিকটতম পিতামাতার সন্ধান করে যা এটির অবস্থান নির্ধারণের জন্য নিখুঁত বা তুলনামূলক অবস্থান position সব কিছু ব্যর্থ হলে এটি শরীরে (উইন্ডো) রিসর্ট করে। সুতরাং পিতামাতার আপেক্ষিক হওয়া প্রয়োজন।

— ব্যবহারকারী 17753

1

পৃষ্ঠার সামগ্রীতে কপিরাইট রোধ করতে # কনটেনারের সাথে একটি মার্জিন-নীচে যুক্ত করুন

— ডক কোডাম

1

নীচে ফ্লেক্সবক্স অ্যাপ্রোচ আরও ভাল।

— ওহু

345

আসলে, @ ব্যবহারকারীর দ্বারা গৃহীত উত্তরগুলি কেবল তখনই কাজ করবে যদি উইন্ডোটি লম্বা হয় এবং সামগ্রীটি ছোট হয় short তবে যদি সামগ্রীটি লম্বা হয় এবং উইন্ডোটি সংক্ষিপ্ত হয় তবে এটি পৃষ্ঠার সামগ্রীর উপরে কপিরাইটের তথ্য রাখবে এবং তারপরে সামগ্রীটি দেখতে স্ক্রোল করে ফ্লোটিং কপিরাইট বিজ্ঞপ্তিটি আপনাকে ছেড়ে দেবে। এটি বেশিরভাগ পৃষ্ঠার জন্য এই সমাধানটিকে অকেজো করে তোলে (আসলে এই পৃষ্ঠার মতো)।

এটি করার সর্বাধিক সাধারণ উপায় হ'ল "সিএসএস স্টিকি ফুটার" পদ্ধতির প্রদর্শিত বা কিছুটা পাতলা ভিন্নতা। এই পদ্ধতির দুর্দান্ত কাজ করে - আপনার যদি একটি নির্দিষ্ট উচ্চতার ফুটার থাকে।

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

আপনার অহংকার গ্রাস করুন এবং একটি টেবিল ব্যবহার করুন।

উদাহরণ স্বরূপ:

* {
    padding: 0;
    margin: 0;
}

html, body {
    height: 100%;
}

#container {
    height: 100%;
    border-collapse: collapse;
}

<!DOCTYPE html>
<html>
<body>
    <table id="container">
        <tr>
            <td valign="top">
                <div id="main">Lorem ipsum, etc.</div>
            </td>
        </tr>
        <tr>
            <td valign="bottom">
                <div id="footer">Copyright some evil company...</div>
            </td>
        </tr>
    </table>
</body>
</html>

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

চেষ্টা কর. এটি প্রতিটি ব্রাউজারে ... যে কোনও উইন্ডো আকারের জন্য, যেকোন পরিমাণ সামগ্রীর জন্য, যে কোনও আকারের পাদলেখের জন্য, এমনকি আই 6 এর জন্য কাজ করবে।

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

টেবিলগুলি শীতল নয় তবে কমপক্ষে আপাতত, তারা কখনও কখনও ডিজাইনের সমস্যা সমাধানের সেরা উপায় the

— রিক রিলি
সূত্র

80

আমার কাছে সেরা উত্তর বলে মনে হচ্ছে। এছাড়াও, আপনি সর্বদা এইচটিএমএল টেবিলের পরিবর্তে "সিএসএস টেবিল" (প্রদর্শন: টেবিল [-row / -सेल]) ব্যবহার করতে পারেন। এটি শব্দার্থবিজ্ঞান ছাড়াই একই বিন্যাস সরবরাহ করে।

— চিককোডোরো

1

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

— টাইজয়েড

20

অন্যদের এই মন্তব্যগুলি পড়ার জন্য: "গর্ব" বা "শীতল" হওয়ার সাথে এর কোনও সম্পর্ক নেই। বিন্যাসের জন্য টেবিলগুলি ব্যবহার করে ব্যবহারিকভাবে আরও বেশি বেদনাদায়ক বিশেষত বড় পরিমাণে সামগ্রীর জন্য। নিশ্চিত হয়ে নিন যে আপনি কোনও টিডি মিস করবেন না এবং সামগ্রী যুক্ত করার সময় এত অপ্রাসঙ্গিক মার্কআপের মধ্য দিয়ে যাওয়া নরক is এটি একটি ব্যথার কারণ যা আমরা এইচটিএমএল ডকুমেন্টগুলি তৈরি করছি কেবলমাত্র বিন্যাসগুলি নয়, এবং যদি আমাদের নথির বেশিরভাগ বিষয়বস্তু ট্যাবুলার ডেটা না হয় তবে আমরা কেন এটি টেবিলগুলিতে রাখছি? আমরা যদি ওয়েব প্রযুক্তিগুলি যেভাবে বোঝানো হয়েছিল সেভাবে ব্যবহার করতে পছন্দ করি না, তবে কেন সেগুলি ব্যবহার করব? ডেস্কটপ / মোবাইল অ্যাপস ব্যবহারের পরিবর্তে বিষয়বস্তু প্রকাশ করতে

— গেব

1

@ শিককোডোরো আমি একটি টেবিল-কম সমতুল্য প্রয়োগ করেছি যা আশ্চর্যজনকভাবে সর্বনিম্ন, নীচে আমার উত্তরটি দেখুন

— হ্যাশব্রাউন

59

অহংকার অপ্রাসঙ্গিক। অ্যাক্সেসযোগ্যতার কারণে টেবিলগুলি বিন্যাসের জন্য ব্যবহার করা উচিত নয়। আপনি যদি কখনও স্ক্রিন রিডার ব্যবহার করেন তবে আপনি জানতে পারবেন কেন কেবল টেবুলার ডেটার জন্য টেবিলগুলি ব্যবহার করা উচিত। @ চিচকোডোরো রাজ্য হিসাবে CSS টেবিলগুলি ব্যবহার করুন।

— ম্যাট ফেলো

170

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

ইন সমর্থিত ব্রাউজারে , আপনি নিম্নলিখিত ব্যবহার করতে পারেন:

উদাহরণ এখানে

.parent {
  display: flex;
  flex-direction: column;
}
.child {
  margin-top: auto;
}

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

.parent {
  height: 100px;
  border: 5px solid #000;
  display: flex;
  flex-direction: column;
}
.child {
  height: 40px;
  width: 100%;
  background: #f00;
  margin-top: auto;
}

<div class="parent">
  <div class="child">Align to the bottom</div>
</div>

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

উপরের সমাধানটি সম্ভবত আরও নমনীয়, তবে, এখানে একটি বিকল্প সমাধান রয়েছে:

উদাহরণ এখানে

.parent {
  display: flex;
}
.child {
  align-self: flex-end;
}

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

.parent {
  height: 100px;
  border: 5px solid #000;
  display: flex;
}
.child {
  height: 40px;
  width: 100%;
  background: #f00;
  align-self: flex-end;
}

<div class="parent">
  <div class="child">Align to the bottom</div>
</div>

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

পার্শ্ব নোট হিসাবে, আপনি অতিরিক্ত সহায়তার জন্য বিক্রেতা উপসর্গ যুক্ত করতে চাইতে পারেন।

— জোশ ক্রোজিয়ার
সূত্র

3

column-reverseপিতা-মাতার সম্পর্কে কীভাবে , তাই আপনার সন্তানের সাথে কিছু যুক্ত করার দরকার নেই?

— সর্বোচ্চ ওয়াটারম্যান

1

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

— Adverbly

114

হ্যাঁ আপনি absoluteঅবস্থান ছাড়াই এবং tableএস ব্যবহার না করে এটি করতে পারেন (যা মার্কআপ এবং এর সাথে স্ক্রু)।

ডেমো
এটি IE> 7, ক্রোম, এফএফ এ কাজ করার জন্য পরীক্ষা করা হয় এবং এটি আপনার বিদ্যমান লেআউটটিতে যুক্ত করার জন্য খুব সহজ একটি জিনিস।

<div id="container">
    Some content you don't want affected by the "bottom floating" div
    <div>supports not just text</div>

    <div class="foot">
        Some other content you want kept to the bottom
        <div>this is in a div</div>
    </div>
</div>

#container {
    height:100%;
    border-collapse:collapse;
    display : table;
}

.foot {
    display : table-row;
    vertical-align : bottom;
    height : 1px;
}

এটি কার্যকরভাবে কী float:bottomকরবে, এমনকি @ রিক রিলির উত্তরটিতে ইস্যু করা ইস্যুটির জন্য অ্যাকাউন্টিং!

— Hashbrown
সূত্র

1

নিস! শুধু একটি নোট, আইআইআরসি আপনার <!DOCTYPE>আইই (<= 8 কমপক্ষে) এ কাজ করার জন্য এই সেটটি প্রয়োজন ; এই পুরানো সংস্করণগুলি কেবলমাত্র display:table-XXX"মান" মোডে সমর্থন করে। তবে স্ট্যান্ডার্ড মোড আইফ 6 বলার জন্য ডিজাইন করা অনেকগুলি পৃষ্ঠাও ভেঙে দেবে।

— ডেভিড

3

- এছাড়াও আপনি flexbox ব্যবহার করতে পারেন stackoverflow.com/questions/526035/...

— জোশ বিশপের মুখবাঁকা দণ্ড

2

আমি আরও ভাগ্য খুঁজে পেয়েছি .foot{display: table-footer-group}। আমি প্রয়োজন ছিল না vertical-align, heightঅথবা border-collapse।

— জ্যাকব ভ্যালেন্টা

এই কাজটি যদি #containerকেবলমাত্র থাকে #footএবং অন্য কোনও সামগ্রী থাকে না?

— সান্ত্বনা দিন

মনে হচ্ছে এটির জন্য কমপক্ষে একটি বিরতিহীন জায়গার প্রয়োজন হবে , @ সোলাস

— হ্যাশব্রাউন

20

এটি একটি পুরানো প্রশ্ন, তবে এটি একটি অনন্য দৃষ্টিভঙ্গি যা বেশ কয়েকটি ক্ষেত্রে সহায়তা করতে পারে।

খাঁটি সিএসএস, নিখুঁত অবস্থান ছাড়াই, কোনও উচ্চতা নির্ধারণ না করে, ক্রস-ব্রাউজার (আই 9 +)

ওয়ার্কিং ফিডল পরীক্ষা করে দেখুন

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

সুতরাং আমরা এটি আমাদের সুবিধার্থে ব্যবহার করব। আমরা divএইচটিএমএলে এসগুলির ক্রম পরিবর্তন করব , এখন #copyrightডিভ শীর্ষে রয়েছে এবং সামগ্রীগুলি এখনই এটি অনুসরণ করে। আমরা সামগ্রিকভাবে ডিভ স্ট্র্যাচ তৈরি করি (সিউডো উপাদান এবং ক্লিয়ারিং কৌশলগুলি ব্যবহার করে)

এখন কেবল সেই আদেশটি আবার দেখার জন্য উল্টে ফেলার বিষয়। এটি সিএসএস রূপান্তর দিয়ে সহজেই করা যায়।

আমরা ধারকটি 180 ডিগ্রি দ্বারা ঘোরান, এবং এখন: আপ-ডাউন-ডাউন। (এবং আমরা আবার সাধারণ দেখতে সামগ্রীটি উল্টে দিই)

আমরা যদি সামগ্রীর ক্ষেত্রের মধ্যে একটি স্ক্রোলবার রাখতে চাই তবে আমাদের সিএসএস যাদুতে আরও কিছুটা প্রয়োগ করতে হবে। যেমন দেখিয়েছেন করা যাবে এখানে [যে উদাহরণে, বিষয়বস্তু একটি শিরোলেখ নিচে - কিন্তু তার একই ধারণা]

* {
  margin: 0;
  padding: 0;
}

html,
body,
#Container {
  height: 100%;
  color: white;
}

#Container:before {
  content: '';
  height: 100%;
  float: left;
}

#Copyright {
  background-color: green;
}

#Stretch {
  background-color: blue;
}

#Stretch:after {
  content: '';
  display: block;
  clear: both;
}

#Container,
#Container>div {
  -moz-transform: rotateX(180deg);
  -ms-transform: rotateX(180deg);
  -o-transform: rotate(180deg);
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
}

<div id="Container">
  <div id="Copyright">
    Copyright Foo web designs
  </div>
  <div id="Stretch">
    <!-- Other elements here -->
    <div>Element 1</div>
    <div>Element 2</div>
  </div>
</div>

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

— avrahamcool
সূত্র

2

দয়া করে না, দেখতে কেমন লাগে তা ভয়াবহ রেন্ডারিং এখন i.stack.imgur.com/ZP9Hw.png

— GRG

7

divউপরের উপাদানগুলির জন্য অন্য একটি ধারক তৈরি করুন #copyright। ঠিক উপরের কপিরাইটে একটি নতুন যুক্ত করুন div: <div style="clear:both;"></div> এটি ফুটারকে সমস্ত কিছুর অধীনে থাকতে বাধ্য করবে , ঠিক যেমন আপেক্ষিক অবস্থান ( bottom:0px;) ব্যবহারের ক্ষেত্রে ।

— রাপলি অ্যান্ড্রেস
সূত্র

7

এটা চেষ্টা কর;

<div id="container">
  <div style="height: 100%; border:1px solid #ff0000;">
  <!-- Other elements here -->
  </div>
</div>
<div id="copyright" style="position:relative;border:1px solid #00ff00;top:-25px">
   Copyright Foo web designs
</div>

— গ্যারি গ্রিন
সূত্র

1

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

— টাইলারহান

6

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

#container {
  display: table;
}

#copyright {
  display: table-footer-group;
}

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

মনে রাখবেন যে কেবল প্রথম table-footer-groupবা এর আগে table-header-groupযেমন রেন্ডার করা হবে: যদি একের বেশি থাকে তবে অন্যগুলি হিসাবে রেন্ডার হবে table-row-group।

— স্কিপি লে গ্র্যান্ড গৌড়ো
সূত্র

6

সিএসএস গ্রিড

সিএসএস গ্রিডের ব্যবহার যেহেতু বাড়ছে, তাই আমি align-selfগ্রিড ধারকটির ভিতরে থাকা উপাদানটির পরামর্শ দিতে চাই ।

align-selfমূল্যবোধের কোন ধারণ করতে পারে: end, self-end, flex-endনিম্নলিখিত উদাহরণে জন্য।

#parent {
  display: grid;
}

#child1 {
  align-self: end;
}

/* Extra Styling for Snippet */

#parent {
  height: 150px;
  background: #5548B0;
  color: #fff;
  padding: 10px;
  font-family: sans-serif;
}

#child1 {
  height: 50px;
  width: 50px;
  background: #6A67CE;
  text-align: center;
  vertical-align: middle;
  line-height: 50px;
}

<div id="parent">
  <!-- Other elements here -->
  <div id="child1">
    1
  </div>

</div>

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

— মনোজ কুমার
সূত্র

5

তুমি তো করতে alignবাক্সে bottomব্যবহার না করেই position:absoluteআপনি যদি জানেন heightএর #containerব্যবহার টেক্সট প্রান্তিককরণ বৈশিষ্ট্য inline-blockউপাদান।

এখানে আপনি এটি কর্মে দেখতে পারেন।

এই কোড:

#container {
    /* So the #container most have a fixed height */
    height: 300px;
    line-height: 300px;
    background:Red;
}

#container > * {
    /* Restore Line height to Normal */
    line-height: 1.2em;
}

#copyright {
    display:inline-block;
    vertical-align:bottom;
    width:100%; /* Let it be a block */
    background:green;
}

— jacmkno
সূত্র

5

ট্রান্সলেটওয়্যার এবং শীর্ষস্থানীয় সম্পত্তি ব্যবহার করে

কেবলমাত্র উপাদান শিশুটিকে অবস্থানে সেট করুন: আপেক্ষিক এবং এটি শীর্ষে স্থানান্তরিত করুন: 100% (এটি পিতামাতার 100% উচ্চতা) এবং রূপান্তর করে পিতামাতার নীচে আটকে থাকুন: অনুবাদ করুন (-100%) (এটি উচ্চতার 100%) শিশু).

সুবিধা

আপনি পৃষ্ঠা প্রবাহ থেকে উপাদান গ্রহণ করবেন না
এটি গতিশীল

তবে এখনও ঠিক কাজ :(

.copyright{
   position: relative;
   top: 100%;
   transform: translateY(-100%);
}

পুরানো ব্রাউজারের উপসর্গগুলি ভুলবেন না।

— Samuell
সূত্র

4

কোডপেন লিঙ্ক এখানে ।

html, body {
    width: 100%;
    height: 100%;
}

.overlay {
    min-height: 100%;
    position: relative;
}

.container {
    width: 900px;
    position: relative;
    padding-bottom: 50px;
}

.height {
    width: 900px;
    height: 50px;
}

.footer {
    width: 900px;
    height: 50px;
    position: absolute;
    bottom: 0;
}

<div class="overlay">
    <div class="container">
        <div class="height">
            content
        </div>
    </div>

    <div class="footer">
        footer
    </div>
</div>

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

— azizarslan
সূত্র

3

আপনি যদি কনটেইনারটির উচ্চতা নির্বিশেষে নীচে "লাঠি" রাখতে চান তবে পরম অবস্থান নির্ধারণের উপায় the অবশ্যই, ধারকটিতে কপিরাইট উপাদানটি যদি শেষ হয় তবে তা সর্বদা নীচে থাকবে।

আপনি আপনার প্রশ্ন প্রসারিত করতে পারেন? আপনি যা করতে চাইছেন ঠিক তা ব্যাখ্যা করুন (এবং কেন আপনি নিখুঁত অবস্থান ব্যবহার করতে চান না)?

— জ্যাক স্লাইট
সূত্র

2

এছাড়াও, যদি ব্যবহার করার শর্ত থাকে position:absolute;বা position:relative;, আপনি সর্বদা padding পিতামাতার চেষ্টা করতে পারেন divবা একটি রাখার চেষ্টা করতে পারেন margin-top:x;। বেশিরভাগ ক্ষেত্রে খুব ভাল পদ্ধতি নয় তবে এটি কিছু ক্ষেত্রে কার্যকর হতে পারে।

— ভূতের প্রতিধ্বনি
সূত্র

1

হতে পারে এটি কাউকে সহায়তা করে: আপনি সর্বদা ডিভটি অন্য ডিভের বাইরে রাখতে পারেন এবং তারপরে নেতিবাচক মার্জিন ব্যবহার করে উপরের দিকে চাপতে পারেন:

<div id="container" style="background-color: #ccc; padding-bottom: 30px;">
  Hello!
</div>
<div id="copyright" style="margin-top: -20px;">
  Copyright Foo web designs
</div>

— DesignConsult
সূত্র

1

 #container{width:100%; float:left; position:relative;}
#copyright{position:absolute; bottom:0px; left:0px; background:#F00; width:100%;}
#container{background:gray; height:100px;}

<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>

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

<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>

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

— আনমোল রতন মহলা
সূত্র

1

নীচে স্টিকি ফুটারের জন্য "অবস্থান: পরম" ব্যবহার করতে চান না। তারপরে আপনি এইভাবে করতে পারেন:

 html,
        body {
            height: 100%;
            margin: 0;
        }
        .wrapper {
            min-height: 100%;
            /* Equal to height of footer */
            /* But also accounting for potential margin-bottom of last child */
            margin-bottom: -50px;
        }
        .footer{
            background: #000;
            text-align: center;
            color: #fff;
        }
        .footer,
        .push {
            height: 50px;
        }

<html>
<body>
    <!--HTML Code-->
    <div class="wrapper">
        <div class="content">content</div>
        <div class="push"></div>
    </div>
    <footer class="footer">test</footer>
</body>
</html>

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

— নিলেশ পাওয়ার
সূত্র

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

— টাইলার এইচ

1

আপনি যদি শিশু ব্লকের উচ্চতাটি না জানেন:

#parent {
    background:green;
    width:200px;
    height:200px;
    display:table-cell;
    vertical-align:bottom;
}
.child {
    background:red;
    vertical-align:bottom;
}

<div id="parent">
    <div class="child">child
    </div> 
</div>

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

http://jsbin.com/ULUXIFon/3/edit

আপনি যদি চাইল্ড ব্লকের উচ্চতাটি চাইল্ড ব্লক যুক্ত করেন তবে প্যাডিং-টপ / মার্জিন-শীর্ষ যুক্ত করুন:

#parent {
    background:green;
    width:200px;
    height:130px;
    padding-top:70px;
}
.child {
    background:red;
    vertical-align:
    bottom;
    height:130px;
}

<div id="parent">
    <div class="child">child
    </div> 
</div>

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

— zloctb
সূত্র

0

এটির কারণটি মোটেই উল্লেখ করা হয়নি, সাধারণত আপনার মতো পরিস্থিতিতে সাধারণত কী কাজ করে:

ধারক-ডিভের পরে কপিরাইট-ডিভ স্থাপন

আপনাকে কেবলমাত্র অন্য কন্টেইনার (একই সামগ্রিক প্রস্থ, কেন্দ্রকরণ, ইত্যাদি) এর মতো কপিরাইট-ডিভ ফর্ম্যাট করতে হবে এবং সব ঠিক আছে।

সিএসএস:

#container, #copyright {
    width: 1000px;
    margin:0 auto;
}

এইচটিএমএল:

<div id="container">
    <!-- Other elements here -->
</div>

<div id="copyright">
    Copyright Foo web designs
</div>

আপনার কন্টেইনার-ডিভটি ঘোষিত হওয়ার পরে কেবলমাত্র এটি আদর্শ হতে পারে না height:100%, এবং কপিরাইটটি দেখতে ব্যবহারকারীকে নিচে স্ক্রোল করতে হবে। তবুও আপনি চারপাশে কাজ করতে পারেন (যেমন margin-top:-20px- যখন আপনার কপিরাইটের উপাদানটির উচ্চতা 20px হয়)।

কোনও পরম অবস্থান নেই
কোনও টেবিল বিন্যাস নেই
কোনও পাগল সিএসএস নয়, যা প্রতিটি অন্যান্য ব্রাউজারে আলাদা দেখাচ্ছে (ভাল তবে কমপক্ষে আপনি জানেন)
সহজ এবং স্পষ্ট বিন্যাস

পাশাপাশি: আমি জানি ওপি একটি সমাধান চেয়েছিল যে "... 'ধারক' ডিভের নীচে আটকে আছে ..." এবং এর নীচে কিছু নয়, তবে এগিয়ে আসুন, লোকেরা এখানে ভাল সমাধান খুঁজছেন, এবং এটি এক!

— লেবীয়
সূত্র

ওপি এর ক্ষেত্রে, এই সমাধান যদি #copyright নির্দিষ্ট উচ্চতা (তারপর আপনি স্থির করতে পারে শুধুমাত্র ভাল margin-top: -{element height}।

— Gajus

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

— লেভাইট

দুঃখিত, আমি বোঝাতে চাইছি না যে # ধারক ধারক উচ্চতা স্থির করে আছে।

— গজুস

যতক্ষণ না আমি নিজেকে ভুল করে ফেলি, ততক্ষণ যখন ওপেনটি উপাদানটির উচ্চতা অন্য উপাদান দ্বারা নির্ধারিত হয়, যেমন ওএস সমাধান করার চেষ্টা করছে আসল ইস্যুটি নীচের নীচে, যেমন মন্তব্যগুলি jsbin.com/acoVevI/3 দ্বারা । এখানে আপনি কেবল এর বোতাম বাহিরে করা না পারেন ধারক । ইস্যুটির আরও চিত্রিত করতে jsbin.com/acoVevI/4 দেখুন ।

— গজুস

ওপি বলেছিল: "আমি # কপিরাইটকে # কন্টেইনারের নীচে আটকে থাকতে চাই" ", সুতরাং এটি প্রশ্ন থেকে সম্পূর্ণ পরিষ্কার নয়। তবুও এটি যে কোনও ক্ষেত্রেই এটির বৈধ উদাহরণ, যেখানে এটি "কন্টেন্টারের নীচে আটকে থাকা" উচিত। এই সমাধানটি সহায়ক হওয়া উচিত, একটি পরিষ্কার দৃষ্টিভঙ্গি থাকতে হবে এবং অনেকগুলি বিন্যাসের জন্য ভাল কাজ করে। স্ক্রলিং বিষয়বস্তু, stackoverflow.com ;-) মতো কোনো পৃষ্ঠা EG

— লেবীয়

0

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

বিন্যাসটি ব্যাহত না করে বারটি নিজেই সঠিকভাবে প্রসারিত করে তা নিশ্চিত করার জন্য আমাকে একটি নেভিগেশন বার তৈরি করতে হবে যা নীচের ডানদিকে প্রকৃত লিঙ্কগুলি এবং এলোমেলো ভাইবোনের উপাদান রয়েছে। নেভিগেশন বারের লিঙ্কগুলির স্থান দখল করতে আমি একটি "ছায়া" উপাদান ব্যবহার করেছি এবং এটি ধারকটির শিশু নোডের শেষে যুক্ত করেছি।

<!DOCTYPE html>
<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
  <span id="copyright-s">filler</span>
</div>

<style>
  #copyright {
    display:inline-block;
    position:absolute;
    bottom:0;
    right:0;
  }
  #copyright-s {
    float:right;
    visibility:hidden;
    width:20em; /* ~ #copyright.style.width */
    height:3em; /* ~ #copyright.style.height */
  }
</style>

— Zyox
সূত্র

0

সিএসএসে কিছুই বলা হয় না float:bottom। এই জাতীয় ক্ষেত্রে অবস্থান ব্যবহার করে সবচেয়ে ভাল উপায়:

position:absolute;
bottom:0;

— তৌহিদ রহমান
সূত্র

আপনার উত্তর ব্যাখ্যা করুন।

— মোহিতরাজ পুরোহিত

0

কনটেইনারটিতে কেবলমাত্র একটি শিশু রয়েছে, আপনি সেই table-cellও vertical-alignঅ্যাপ্রোচটি ব্যবহার করতে পারেন যা তার পিতামাতার নীচে একক ডিভি অবস্থানের জন্য নির্ভরযোগ্যভাবে কাজ করেছিল।

নোট করুন যে table-footer-groupউল্লিখিত অন্যান্য উত্তর হিসাবে ব্যবহার করা পিতামাতার উচ্চতা গণনা ভঙ্গ করবে table।

#container {
    display: table;
    width: 100%;
    height: 200px;
}
#item {
    display: table-cell;
    vertical-align: bottom;
}

<div id="container">
    <div id="item">Single bottom item</div>
</div>

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

— হাই ঝাং
সূত্র

0

মতে: w3schools.com

অবস্থান সহ একটি উপাদান: পরম; নিকটস্থ অবস্থিত পূর্বপুরুষের তুলনায় অবস্থিত (স্থির মতো ভিউপোর্টের তুলনায় অবস্থিত পরিবর্তে)।

সুতরাং আপনাকে অপেক্ষাকৃত বা নিখুঁত ইত্যাদির সাথে প্যারেন্ট এলিমেন্টের অবস্থান তৈরি করতে হবে এবং কাঙ্ক্ষিত উপাদানটিকে পরম এবং পরের সেটটি নীচে 0 করে রাখতে হবে।

— জোনাস ফ্রেয়ার
সূত্র

এটি ইতিমধ্যে গৃহীত উত্তরে (অন্যদের মধ্যে) উল্লেখ করা হয়েছে।

— টাইলারএইচ

-1

শৈলীর ডিভ, position:absolute;bottom:5px;width:100%;কাজ করছে, তবে এর জন্য আরও স্ক্রোলআপ পরিস্থিতি প্রয়োজন।

window.onscroll = function() {
    var v = document.getElementById("copyright");
    v.style.position = "fixed";
    v.style.bottom = "5px";
}

— nicejay
সূত্র

আমি কীভাবে আমার ডিভটিকে এর ধারকটির নীচে রাখতে পারি?

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

খাঁটি সিএসএস, নিখুঁত অবস্থান ছাড়াই, কোনও উচ্চতা নির্ধারণ না করে, ক্রস-ব্রাউজার (আই 9 +)

সিএসএস গ্রিড

ট্রান্সলেটওয়্যার এবং শীর্ষস্থানীয় সম্পত্তি ব্যবহার করে