নীচের অংশে একটি ডিভের সামগ্রী কীভাবে প্রান্তিক করা যায়

Question

বলুন আমার কাছে নিম্নলিখিত সিএসএস এবং এইচটিএমএল কোড রয়েছে:

#header {
  height: 150px;
}

<div id="header">
  <h1>Header title</h1>
  Header content (one or multiple lines)
</div>

শিরোনাম বিভাগটি উচ্চতা স্থির করে তবে শিরোনামের সামগ্রীটি পরিবর্তিত হতে পারে।

আমি শিরোনামের বিষয়বস্তুটি শিরোনাম বিভাগের নীচে উল্লম্বভাবে প্রান্তিককরণ করতে চাই, তাই পাঠকের শেষ লাইনটি "কাঠিগুলি" শিরোনাম বিভাগের নীচে।

সুতরাং যদি পাঠ্যের কেবল একটি লাইন থাকে তবে এটির মতো হবে:

-----------------------------
| শিরোনাম শিরোনাম
|
|
|
| শিরোনামের সামগ্রী (এক লাইনের ফলে)
-----------------------------

এবং যদি এখানে তিনটি লাইন থাকে:

-----------------------------
| শিরোনাম শিরোনাম
|
| শিরোনাম সামগ্রী (যা তাই
| অনেক জিনিস যে এটি নিখুঁত
| তিন লাইনের উপরে ছড়িয়ে পড়ে)
-----------------------------

সিএসএসে এটি কীভাবে করা যায়?

Answer 1

আপেক্ষিক + পরম অবস্থান আপনার সেরা বাজি:

#header {
  position: relative;
  min-height: 150px;
}

#header-content {
  position: absolute;
  bottom: 0;
  left: 0;
}

#header, #header * {
  background: rgba(40, 40, 100, 0.25);
}

<div id="header">
  <h1>Title</h1>
  <div id="header-content">Some content</div>
</div>

তবে আপনি এটি নিয়ে সমস্যা নিয়ে যেতে পারেন। যখন আমি এটি চেষ্টা করেছি তখন ড্রপডাউন মেনুগুলি সামগ্রীর নীচে উপস্থিত হতে আমার সমস্যা হয়েছিল। এটা ঠিক সুন্দর না।

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

উদাহরণ: আপনি কি টেবিলগুলি ব্যবহার না করে এই HTML লেআউটটি করতে পারেন?

Comments

আমি এখানে জিজ্ঞাসা করার আগে আসলে সেই সমাধানটি খুঁজে পেয়েছি তবে কোনওভাবে অবস্থান যুক্ত করতে ভুলে গেছি: আপেক্ষিক; শিরোনাম ডিভিতে এবং সামগ্রী পৃষ্ঠার নীচে অবতরণ করে। ধন্যবাদ

— ক্রিস্টফ

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

— আলেজান্দ্রো গার্সিয়া ইগলেসিয়াস

মূল সমস্যাটিতে বর্ণিত পাঠ্য সামগ্রীর ক্ষেত্রে, # শিরোনাম-সামগ্রীটি সত্যই একটি pউপাদান হতে হবে বা খুব কমপক্ষে একটি হতে হবেspan

— জোশ বার্গেস

নন-ট্যাবুলার ডেটার জন্য সারণীগুলি ব্যবহার করবেন না! পরিবর্তে, সিএসএস প্রদর্শন বৈশিষ্ট্যগুলি ব্যবহার করুন display: table-cell, বা table-row, বা table। খাঁটি বিন্যাসের জন্য আপনাকে আর কোনও সারণী ব্যবহার করার দরকার নেই।

— জেরেমি মরিটজ

শিরোনামের অবস্থান কিসের সাথে সম্পর্কিত?

— stack1

Answer 2

সিএসএস পজিশনিং ব্যবহার করুন:

/* Creates a new stacking context on the header */
#header {
  position: relative;
}

/* Positions header-content at the bottom of header's context */
#header-content {
  position: absolute;
  bottom: 0;
}

ক্লিটাস হিসাবে উল্লেখ করা হয়েছে , আপনাকে এই কাজটি করতে শিরোনাম-সামগ্রী সনাক্ত করতে হবে।

<span id="header-content">some header content</span>

<div style="height:100%; position:relative;">
    <div style="height:10%; position:absolute; bottom:0px;">bottom</div>
</div>

Comments

fyi ... এটির ফলে আমার শিরোনাম-সামগ্রীটি এর প্রস্থটি ভেঙে গেছে, তাই আমাকে width = '100%'শিরোনাম-সামগ্রীতে একটি যুক্ত করতে হয়েছিল

— ডিএসডিএসডিএসডিএসডে

@dsdsdsdd আপনি প্রদর্শন যোগ করেও এটি ঠিক করতে পারেন: # শিরোনাম-সামগ্রীতে ব্লক করুন।

— প্যাট্রিক ম্যাকএলহানি

@dsdsdsd কারণ এর কারণগুলি ডিফল্টরূপে <span>উপাদান রয়েছে display: inline;, যা ধারকটির সম্পূর্ণ প্রস্থ গ্রহণ করে না। সর্বাধিক উপযুক্ত ফিক্সটি হবে স্প্যানটিকে ক এ পরিবর্তন করা <div>যা ডিফল্টরূপে একটি ব্লক উপাদান।

— ব্যাডহর্সি

বা <h1> - <h6> এর মধ্যে একটি যা ডিফল্টরূপেও অবরুদ্ধ এবং শিরোনাম হিসাবে পাঠ্য শনাক্ত করে, যা অনুসন্ধান ইঞ্জিন, সহায়ক প্রযুক্তি এবং কোড পড়ার লোকদের জন্য দরকারী।

— প্যাট্রিক ম্যাকলেহনে

নীচে থাকা সামগ্রীতে যখন পরিবর্তনশীল উচ্চতা থাকে তখন কাজ করে না, এটি ধারক সীমার বাইরে প্রসারিত করে।

— মোজফেট

Answer 3

যদি আপনি লিগ্যাসি ব্রাউজারগুলি নিয়ে ফ্লেক্সবক্স ব্যবহার সম্পর্কে উদ্বিগ্ন না হন।

পিতামূলক উপাদানটির জন্য তার প্রদর্শন ধরণের সেটটি ফ্লেক্স করতে হবে

div.parent {
  display: flex;
  height: 100%;
}

তারপরে আপনি সন্তানের উপাদানটির প্রান্তিককরণের স্ব-স্থানে ফ্লেক্স-এন্ড সেট করুন।

span.child {
  display: inline-block;
  align-self: flex-end;
}

আমি যে রিসোর্সটি শিখেছি তা এখানে: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Comments

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

— লি ইরভিন

আমার পক্ষে কাজ করেনি, আমি এটি পাত্রে নীচে চাই, ধারকটির আইটেমগুলির শেষ নয়।

— মোজফেট

2020 এ এটির

— টনিগ্যাট

Answer 4

আমি এই বৈশিষ্ট্যগুলি ব্যবহার করি এবং এটি কার্যকর হয়!

#header {
  display: table-cell;
  vertical-align: bottom;
}

Comments

আইই 8 এবং এর আগে সমর্থিত নয়। এটি আই 9 তে সমর্থিত।

— এলোমেলো_ ব্যবহারকারীর_নাম

@cale_b মতে caniuse.com এটা শুরু করে IE8 করছি না।

— Zach Lysobey

@ জ্যাচএল হ্যাপেনস্ট্যান্স - আমি কর্পোরেট ক্লায়েন্টের জন্য আইই 8-তে একটি উত্তরাধিকার অ্যাপ্লিকেশনটিকে সমর্থন করছি এবং এটি বাস্তবে কাজ করে।

— ড্যানিয়েল জাজো

@ ফগুইলেন: ক্রোমে পরীক্ষিত (v31) ঠিক এখনই। সেখানেও কাজ করে।

— ড্যানিয়েল জাজো

table-cellঅনেক কিছু ভেঙে দেয় বুটস্ট্র্যাপ গ্রিড সিস্টেমের মতো। col-md-12আপনাকে আর 100% প্রশস্ত ডিভ দেবে না।

— নোহ

Answer 5

কিছু সময়ের জন্য একই সমস্যা নিয়ে লড়াই করার পরে, আমি অবশেষে এমন একটি সমাধান বের করেছিলাম যা আমার সমস্ত প্রয়োজনীয়তা পূরণ করে:

• প্রয়োজন হয় না যে আমি ধারকটির উচ্চতা জানি।
• আপেক্ষিক + নিরঙ্কুশ সমাধানগুলির বিপরীতে, সামগ্রীটি তার নিজস্ব স্তরে ভেসে উঠবে না (অর্থাত্ এটি কনটেইনার ডিভেতে সাধারণত এমবেড করে)।
• ব্রাউজার জুড়ে কাজ করে (IE8 +)।
• কার্যকর করা সহজ।

সমাধানটি কেবল একটি গ্রহণ করে <div>, যাকে আমি "অ্যালাইনার" বলি:

সিএসএস

.bottom_aligner {
    display: inline-block;
    height: 100%;
    vertical-align: bottom;
    width: 0px;
}

এইচটিএমএল

<div class="bottom_aligner"></div>
... Your content here ...

এই কৌশলটি একটি লম্বা, চর্মসার ডিভি তৈরি করে কাজ করে যা পাঠকের বেসলাইনটিকে ধারকটির নীচে ঠেলে দেয়।

এখানে একটি সম্পূর্ণ উদাহরণ যা ওপি যা চেয়েছিল তা অর্জন করে। আমি শুধুমাত্র "প্রদর্শনের উদ্দেশ্যে" নীচে_মিলাইনারটিকে ঘন এবং লাল করে তুলেছি।

সিএসএস:

.outer-container {
  border: 2px solid black;
  height: 175px;
  width: 300px;
}

.top-section {
  background: lightgreen;
  height: 50%;
}

.bottom-section {
  background: lightblue;
  height: 50%;
  margin: 8px;
}

.bottom-aligner {
  display: inline-block;
  height: 100%;
  vertical-align: bottom;
  width: 3px;
  background: red;
}

.bottom-content {
  display: inline-block;
}

.top-content {
  padding: 8px;
}

এইচটিএমএল:

<body>
  <div class="outer-container">
    <div class="top-section">
      This text
      <br> is on top.
    </div>
    <div class="bottom-section">
      <div class="bottom-aligner"></div>
      <div class="bottom-content">
        I like it here
        <br> at the bottom.
      </div>
    </div>
  </div>
</body>

Comments

প্রায় নিখুঁত :) তবে এটি স্বয়ংক্রিয় লাইন বিরতি দেয় না।

— গ্যাস্টন সানচেজ

বাইরের ধারক যদি স্ক্রোল করতে পারে তবে কাজ করে না (ওভারফ্লো-ওয়াই: অটো)। :(

— ecraig12345

আমার ধারণা যে মেরিন: 8 পিএক্স মার্জিন

— গ্রাহাম পেরিন

কোনও ::beforeবিধি প্রয়োগ করা হলে এটি কাজ করে , যা অতিরিক্ত উপাদানের প্রয়োজনকে সরিয়ে দেয়। আমরা শেষে ফ্লেক্স ব্যবহার করেছি, তবে আপনি যখন পারবেন না তখন এটি কার্যকর।

— শেপি

এটি একটি দুর্দান্ত সমাধান। এটি কেবলমাত্র heightবাক্স / ধারক এবং এর পিতামাতার মধ্যে সেট করা থাকলে (px বা% বা যা কিছু) সেট করা থাকে।

— বৈয়ারদেব

Answer 6

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

header {
  border: 1px solid blue;
  height: 150px;
  display: flex;                   /* defines flexbox */
  flex-direction: column;          /* top to bottom */
  justify-content: space-between;  /* first item at start, last at end */
}
h1 {
  margin: 0;
}

<header>
  <h1>Header title</h1>
  Some text aligns to the bottom
</header>

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

section {
  border: 1px solid blue;
  height: 150px;
  display: flex;                   /* defines flexbox */
  align-items: flex-end;           /* bottom of the box */
}

<section>Some text aligns to the bottom</section>

Comments

দস্তাবেজের প্রবাহে এখনও উপস্থিত থাকার জন্য আমার নীচের সারিবদ্ধ উপাদানটি প্রয়োজন ছিল যা ব্যবহারের সময় সম্ভব নয় position:absolute;। এই সমাধানটি আমার ক্ষেত্রে পুরোপুরি কাজ করেছিল!

— সুইডেন

প্রতিক্রিয়া উপাদানগুলির ভিতরে, এটি সঠিক সমাধান। গৃহীত সমাধান ব্যর্থ হয়।

— সোলেল - ম্যাথিউ প্রভোট

এটিই হ'ল একমাত্র সমাধান যা আসলে আমার পক্ষে কাজ করেছিল। @ সোলিল উল্লেখ করেছে যেহেতু এটির সাথে প্রতিক্রিয়াও থাকতে পারে ... আমি কোনও সিএসএস বিশেষজ্ঞ নই, তাই আমি পুরোপুরি নিশ্চিত নই।

— বি কে

প্রতিক্রিয়া উপাদানটিতে পুরোপুরি কাজ করে

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

Answer 7

যদি পিতামাতা / ব্লক উপাদানের লাইন-উচ্চতা ইনলাইন উপাদানের চেয়ে বেশি হয় তবে ইনলাইন বা ইনলাইন-ব্লক উপাদানগুলি ব্লক স্তর উপাদানগুলির নীচে একত্রিত হতে পারে *

মার্কআপ:

<h1 class="alignBtm"><span>I'm at the bottom</span></h1>

CSS:

h1.alignBtm {
  line-height: 3em;
}
h1.alignBtm span {
  line-height: 1.2em;
  vertical-align: bottom;
}

* আপনি মান মোডে আছেন তা নিশ্চিত করুন

Answer 8

display: flex;
align-items: flex-end;

Comments

নোট করুন যে ফ্লেক্সবক্স পুরানো ব্রাউজারগুলিতে ভাল সমর্থন করে না।

— অ্যান্থনিবি 2'17

@ অ্যান্থনিবি - পুরাতন সংজ্ঞায়িত করবেন? আমাদের এই রেকর্ডটি বিকাশকারী হিসাবে পরিবর্তন করতে হবে। প্রযুক্তি এগিয়ে যায়, এবং পুরানো কেবল টিকে থাকে না। আইই 9 এবং 10 এর সাথে আমি যা দেখতে পাচ্ছি তার সাথে ফ্লেক্সের সমস্যা রয়েছে তবে তারা ২০১১ এবং ২০১২ সালে যথাক্রমে মুক্তি পেয়েছে ... এটি ২০১. এর। আমাদের এই পুরানো এবং ভাঙ্গা ব্রাউজারগুলি ছেড়ে দিতে হবে। যদি ভিজ্যুয়াল সন্তুষ্টির জন্য না হয় তবে সুরক্ষা এবং সাধারণ সফ্টওয়্যার আপডেটের জন্য।

— তিশ্চ

@ আপনি এটি একেবারে ঠিক বলেছেন, বিকাশকারী হিসাবে শালীন এবং সাম্প্রতিক প্রযুক্তি ব্যবহার করতে হবে। তবে আমি কেবল এই সামঞ্জস্য সমস্যাটি সম্পর্কে অবাক করে দিয়েছি, যাতে অবাক হওয়ার কিছু নেই।

— অ্যান্থনিবি

যদি অধীনে সামগ্রী <h1>একটি ভিতরে <p>বা <div>আমি ব্যবহার করেন justify-content: space-between।

— অগপিতোক্যান্ডেমোর

Answer 9

আপনি সহজভাবে নমনীয়তা অর্জন করতে পারেন

header {
  border: 1px solid blue;
  height: 150px;
  display: flex;                   /* defines flexbox */
  flex-direction: column;          /* top to bottom */
  justify-content: space-between;  /* first item at start, last at end */
}
h1 {
  margin: 0;
}

<header>
  <h1>Header title</h1>
  Some text aligns to the bottom
</header>

Answer 10

আপনার যদি একাধিক, গতিশীল উচ্চতার আইটেম থাকে, সারণী এবং টেবিল-কক্ষের সিএসএস প্রদর্শন মানগুলি ব্যবহার করুন:

এইচটিএমএল

<html>
<body>

  <div class="valign bottom">
    <div>

      <div>my bottom aligned div 1</div>
      <div>my bottom aligned div 2</div>
      <div>my bottom aligned div 3</div>

    </div>
  </div>

</body>
</html>

সিএসএস

html,
body {
  width: 100%;
  height: 100%;
}
.valign {
  display: table;
  width: 100%;
  height: 100%;
}
.valign > div {
  display: table-cell;
  width: 100%;
  height: 100%;
}
.valign.bottom > div {
  vertical-align: bottom;
}

আমি এখানে একটি জেএসবিন ডেমো তৈরি করেছি: http://jsbin.com/INOnAkuF/2/edit

ডেমোতেও একই কৌশল ব্যবহার করে উল্লম্বভাবে কেন্দ্র বিন্যস্ত করার একটি উদাহরণ রয়েছে।

Answer 11

এখানে ফ্লেক্সবক্স ব্যবহার করে তবে নীচের প্রান্তিককরণের জন্য ফ্লেক্স-এন্ড ব্যবহার না করেই আরেকটি সমাধান দেওয়া হয়েছে । ধারণা সেট হয় margin-bottomউপর H1 থেকে স্বয়ংক্রিয় নীচে অবশিষ্ট বিষয়বস্তু ধাক্কা:

#header {
  height: 350px;
  display:flex;
  flex-direction:column;
  border:1px solid;
}

#header h1 {
 margin-bottom:auto;
}

<div id="header">
  <h1>Header title</h1>
  Header content (one or multiple lines) Header content (one or multiple lines)Header content (one or multiple lines) Header content (one or multiple lines)
</div>

আমরা margin-top:autoপাঠ্যটিতে একই জিনিসটি করতে পারি তবে এই ক্ষেত্রে আমাদের এটি একটি divবা এর মধ্যে আবৃত করতে হবে span:

#header {
  height: 350px;
  display:flex;
  flex-direction:column;
  border:1px solid;
}

#header span {
 margin-top:auto;
}

<div id="header">
  <h1>Header title</h1>
  <span>Header content (one or multiple lines)</span>
</div>

Comments

Perfecto থেকে! গ্রেসিয়াস

— গ্রেস নিকোল

Answer 12

এর জন্য আপনার নিরঙ্কুশ + আপেক্ষিকের প্রয়োজন নেই। এটি ধারক এবং ডেটা উভয়ের জন্য আপেক্ষিক অবস্থান ব্যবহার করে খুব সম্ভব। এইভাবে আপনি এটি করেন।

ধরুন আপনার ডেটার উচ্চতা হতে চলেছে x। আপনার ধারকটি আপেক্ষিক এবং পাদচরণও আপেক্ষিক। আপনাকে যা করতে হবে তা হ'ল আপনার ডেটাতে যুক্ত করা

bottom: -webkit-calc(-100% + x);

আপনার ডেটা সর্বদা আপনার ধারকটির নীচে থাকবে। আপনার গতিশীল উচ্চতা সহ ধারক থাকলেও এটি কাজ করে।

এইচটিএমএল এর মত হবে

<div class="container">
  <div class="data"></div>
</div>

সিএসএস এর মত হবে

.container{
  height:400px;
  width:600px;
  border:1px solid red;
  margin-top:50px;
  margin-left:50px;
  display:block;
}
.data{
  width:100%;
  height:40px;
  position:relative;
   float:left;
  border:1px solid blue;
  bottom: -webkit-calc(-100% + 40px);
   bottom:calc(-100% + 40px);
}

লাইভ উদাহরণ এখানে

আশাকরি এটা সাহায্য করবে.

Comments

আপনি কি বোঝাতে পারেন কি bottom: -webkit-calc(-100% + x);করছে?

— matchch

@ যেটি এটি পাত্রে নীচে পাদলেখ রাখে

— আদিত্য পঙ্কশে

Answer 13

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

তবুও, বাহিরের ধারক ছাড়া এটি করার কোনও উপায় থাকলে খুব ভাল লাগবে, কেবল নিজের নিজের ভিতরেই টেক্সটটি সাজিয়ে রাখুন।

#header {
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 150px;
}

Answer 14

একটি খুব সাধারণ, এক-লাইন সমাধান, ডিভের সাথে লাইন-হিগথ যুক্ত করা, মনে রাখবেন যে সমস্ত ডিভের পাঠ্য নীচে যাবে।

সিএসএস:

#layer{width:198px;
       height:48px;
       line-height:72px;
       border:1px #000 solid}
#layer a{text-decoration:none;}

এইচটিএমএল:

<div id="layer">
    <a href="#">text at div's bottom.</a>
</div>

মনে রাখবেন যে এটি একটি ব্যবহারিক এবং দ্রুত সমাধান যখন আপনি কেবল ডিভের ভিতরে পাঠ্যটি নীচে যেতে চান, আপনি যদি চিত্র এবং স্টাফ্ট একত্রিত করতে চান তবে আপনাকে কিছুটা জটিল এবং প্রতিক্রিয়াশীল সিএসএস কোড করতে হবে

Answer 15

আপনি যদি পুরো # শিরোনামের পরিবর্তে সামগ্রীর মোড়ক ডিভের উচ্চতা (অন্যের জবাব হিসাবে দেখানো # হেডার-সামগ্রী) সেট করতে পারতেন, তবে আপনি এই পদ্ধতির চেষ্টাও করতে পারেন:

এইচটিএমএল

<div id="header">
    <h1>some title</h1>
    <div id="header-content">
        <span>
            first line of header text<br>
            second line of header text<br>
            third, last line of header text
        </span>
    </div>
</div>

সিএসএস

#header-content{
    height:100px;
}

#header-content::before{
  display:inline-block;
  content:'';
  height:100%;
  vertical-align:bottom;
}

#header-content span{
    display:inline-block;
}

কোডেপনে দেখান

Answer 16

কাজ করছে বলে মনে হচ্ছে:

এইচটিএমএল: আমি নীচে আছি

CSS:

h1.alignBtm {
  line-height: 3em;
}
h1.alignBtm span {
  line-height: 1.2em;
  vertical-align: bottom;
}

Answer 17

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

https://jsfiddle.net/8sfeLmgd/1/

.myContainer {
  display: flex;
  height: 250px;
  flex-flow: column;
}

.filler {
  flex: 1 1;
}

<div class="myContainer">
  <div>Top</div>
  <div class="filler"></div>
  <div>Bottom</div>
</div>

যখন ধারকটি আকারের আকার ঠিক না করা হয় তখন নীচের বিষয়বস্তুও আকারের আকারের ঠিক না করা হলে প্রত্যাশা অনুযায়ী এটি প্রতিক্রিয়া জানায়।

Answer 18

আমি একটি উপায় তৈরি করেছি যা উল্লেখ করা হয়েছে তার থেকে অনেক সহজ।

হেডার ডিভের উচ্চতা নির্ধারণ করুন। তারপরে নীচে আপনার H1ট্যাগটি স্টাইল করুন :

float: left;
padding: 90px 10px 11px

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

Comments

প্রতিক্রিয়াশীল লেআউটগুলি ব্যবহার করে পর্দার পুনরায় আকার দেওয়ার সময় সামগ্রীকে অন্য সামগ্রীতে ভাসিয়ে তুলবে।

— মোজফেট

Answer 19

আমি এই সমাধানটি একটি ডিফল্ট বুটস্ট্র্যাপ শুরুর টেম্পলেট ভিত্তিতে পেয়েছি

/* HTML */

<div class="content_wrapper">
  <div class="content_floating">
    <h2>HIS This is the header<br>
      In Two Rows</h2>
    <p>This is a description at the bottom too</p> 
  </div>
</div>

/* css */

.content_wrapper{
      display: table;
      width: 100%;
      height: 100%; /* For at least Firefox */
      min-height: 100%;
    }

.content_floating{
  display: table-cell;
  vertical-align: bottom;
  padding-bottom:80px;

}

Answer 20

#header {
    height: 150px;
    display:flex;
    flex-direction:column;
}

.top{
    flex: 1;
}   

<div id="header">
    <h1 class="top">Header title</h1>
    Header content (one or multiple lines)
</div>

#header {
    height: 250px;
    display:flex;
    flex-direction:column;
    background-color:yellow;
}

.top{
    flex: 1;
}

<div id="header">
    <h1 class="top">Header title</h1>
    Header content (one or multiple lines)
</div>

Comments

এটি শীর্ষ বিভাজনকে পুনরায় আকার দেয় causes যা বেসিক পাঠ্য বিন্যাসগুলির জন্য কাজ করে তবে জিনিসগুলির ব্যাকগ্রাউন্ড এবং রঙ এবং মাপের সম্মান থাকলে তা কার্যকর হয় না।

— মোজফেট

Answer 21

সাথে চেষ্টা করুন:

div.myclass { margin-top: 100%; }

এটি ঠিক করতে% পরিবর্তন করার চেষ্টা করুন। উদাহরণ: 120% বা 90% ... ইত্যাদি।

Comments

1 সেট সামগ্রীর সাথে পুরোপুরি সূক্ষ্মভাবে কাজ করে, তবে সামগ্রী পরিবর্তন হলে এটি সামঞ্জস্য করতে হবে। যদি এটি গতিশীল বিষয়বস্তু হয়, তবে এটি ব্যবহার করবেন না!

— মাইক গ্রাফ

Answer 22

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

<div id="footer">
  some text here
</div>

#footer {
  padding: 0 30px;
  padding-top: 60px;
  padding-bottom: 8px;
}

Comments

আপনার প্রথম ঘোষণাটি padding: 0 30pxকিছুটা রিডানডান্ট, আপনি padding: 30pxঅন্য 2 টি ঘোষণাও রেখে দিতে পারেন।

— অ্যান্ড্রু

একেবারে সত্য, তবে আমি আমার কর্মক্ষেত্রের অনুশীলনগুলি অনুসরণ করছি।

— নিকি এল। হ্যানসেন

সত্যিই ?, এটিকে সরল খারাপ অনুশীলনের মতো মনে হয় । কেবল শর্টহ্যান্ড ব্যবহার করুন, বা যে কোনও জায়গায় স্পষ্ট হয়ে উঠুন। padding: 60px 30px 8px;,, padding: 60px 30px 8px 30px;চারটি সুস্পষ্ট padding-বিধি বা এমনকি @ থোভ্যাক্সম্যানের পরামর্শগুলি সর্বোপরি - এবং আমি সেই একটি তর্ক করতে ইচ্ছুক এবং সক্ষম; ;)

— জ্যাচ লিসোবে

Answer 23

একটি নিখুঁত ক্রস ব্রাউজার উদাহরণ সম্ভবত এটি এখানে:

http://www.csszengarden.com/?cssfile=/213/213.css&page=0

ধারণাটি হ'ল নীচে ডিভটি প্রদর্শন করা এবং এটি সেখানে আটকে রাখা is প্রায়শই সহজ পদ্ধতির সাহায্যে মূল বিষয়বস্তুতে স্টিকি ডিভ স্ক্রোল তৈরি হয়ে যায়।

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #floater {
            background: yellow;
            height: 200px;
            width: 100%;
            position: fixed;
            bottom: 0px;
            z-index: 5;
            border-top: 2px solid gold;
        }

    </style>
</head>


<body>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>


    <div id="floater"></div>
</body>
</html>

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

Comments

যেহেতু আপনি আপনার নথিটি এক্সএইচটিএমএলকে কঠোর হিসাবে ঘোষণা করছেন, আপনার নিজের <br />ট্যাগগুলিও স্ব-বন্ধ করা উচিত ...

— আমোস এম কার্পেন্টার

@ কার্লকিল্ডন আপনি যদি আ্যামোসের মন্তব্যটি উল্লেখ করছেন তবে এটি অবশ্যই একটি নির্বোধ মন্তব্য নয় - উপরের নথিকে তার সঠিক content-typeশিরোনাম দিয়ে পরিবেশন করার ফলে ব্রাউজারটি একটি এক্সএমএল বিশ্লেষণ ত্রুটি ছুঁড়ে ফেলবে।

— রেজার

এটি একটি খারাপ অভ্যাস! পরিবর্তে সিএসএস ব্যবহার করুন!

— m93a

Answer 24

কাজ করছে বলে মনে হচ্ছে:

#content {
    /* or just insert a number with "px" if you're fighting CSS without lesscss.org :) */
    vertical-align: -@header_height + @content_height;

    /* only need it if your content is <div>,
     * if it is inline (e.g., <a>) will work without it */
    display: inline-block;
}

কম ব্যবহার করলে সিএসএস ধাঁধা সমাধান করা লাইকের চেয়ে কোডিংয়ের মতো অনেক বেশি হয়ে যায় ... আমি কেবল সিএসএস পছন্দ করি। আপনি পুরো বিন্যাসটি (এটি না ভেঙে :) কেবলমাত্র একটি প্যারামিটার পরিবর্তন করে পরিবর্তন করতে পারলে এটি একটি আসল আনন্দ।

Answer 25

2015 সমাধান

<div style='width:200px; height:60px; border:1px solid red;'>

    <table width=100% height=100% cellspacing=0 cellpadding=0 border=0>
        <tr><td valign=bottom>{$This_text_at_bottom}</td></tr>
    </table>

</div>

http://codepen.io/anon/pen/qERMdx

আপনাকে স্বাগতম

Comments

এর জন্য সারণী বিন্যাস সমস্যাযুক্ত হতে পারে; পরিবর্তে সিএসএস সুপারিশ করা হয়। এইচটিএমএল 5 এ ভ্যালেন সম্পত্তিটিও সমর্থিত নয়। ( w3schools.com/tags/att_td_valign.asp দেখুন )

— undeniablyrob