গতিশীল উচ্চতা রয়েছে এমন পিতামাতাকে পূরণ করতে সন্তানের ডিভ উচ্চতা প্রসারিত করুন

Question

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

http://fiddle.jshell.net/y9bM4/

Comments

এই প্রশ্নগুলোর চেক করুন: stackoverflow.com/questions/3049783/... , stackoverflow.com/questions/1575141/... , stackoverflow.com/questions/13609531/make-an-div-100-height-css

— mrzmyr

@ মাইকহোমেচকো সিএসএসে অনেকগুলি রয়েছে তবে CSS3 তে নেই। আমি তাই মনে করি.

— মিঃগ্রিন

@ মিঃ গ্রীন "সিএসএস" এবং সিএসএস 3 এর মধ্যে একটি মৌলিক স্তরে পার্থক্যগুলি নগণ্য তাই আমি সমস্যাটি দেখতে পাচ্ছি না। এটি একটি খুব সাধারণ সমস্যা যা মৃত্যুর কাছে জিজ্ঞাসা ও উত্তর দেওয়া হয়েছে।

— মাইক এইচ।

@ মাইকহোমেটকো আমার সমাধানটি পরীক্ষা করুন। আমি নিশ্চিত যে এর আগে কেউ এর সদুত্তর দেয়নি।

— মিঃগ্রিন

Answer 1

সমাধানটি হ'ল ব্যবহারগুলি বা display: table-cellব্যবহারের পরিবর্তে সেই উপাদানগুলিকে ইনলাইন আনতে ব্যবহার করা ।display: inline-blockfloat: left

div#container {
  padding: 20px;
  background: #F1F1F1
}
.content {
  width: 150px;
  background: #ddd;
  padding: 10px;
  display: table-cell;
  vertical-align: top;
}
.text {
  font-family: 12px Tahoma, Geneva, sans-serif;
  color: #555;
}

<div id="container">
  <div class="content">
    <h1>Title 1</h1>

    <div class="text">Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text.
      <br>Sample Text. Sample Text. Sample Text.
      <br>Sample Text.
      <br>
    </div>
  </div>
  <div class="content">
    <h1>Title 2</h1>

    <div class="text">Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text.</div>
  </div>
</div>

ওয়ার্কিং ফিডল

Comments

প্যারেন্ট উপাদান যদিও টেবিল সেল হয় এটি কাজ করে না।

— টোমা জ্যাটো - মনিকা

Answer 2

আপনার display: flexপ্রসারিত করতে ব্যবহার করুন div:

div#container {
    padding:20px;
    background:#F1F1F1;
    display: flex;
}

.content {
    width:150px;
    background:#ddd;
    padding:10px;
    margin-left: 10px;
}

JSFIDDLE

Answer 3

নিম্নলিখিত সিএসএস যুক্ত করুন:

পিতামাতার ডিভ জন্য:

style="display: flex;"

শিশু বিভাগের জন্য:

style="align-items: stretch;"

Comments

আমার stretchপক্ষে কাজ করার জন্য আমার বাচ্চাদের যুক্ত করা দরকার ।

— BadHorsie

Answer 4

https://www.youtube.com/watch?v=jV8B24rSN5o

আমি মনে করি আপনি গ্রিড হিসাবে প্রদর্শন ব্যবহার করতে পারেন:

.parent { display: grid };

Comments

আপনি কি পোস্টার একই কোড ব্যবহার করে নিজের উত্তরটি পরীক্ষা করেছেন?

— মার্ক স্টুয়ার্ট

এটি কাজ করে এবং সন্তানের জন্য কোনও সিএসএস প্রয়োজন হয় না। এটি কারণ একটি সিএসএস গ্রিড সেল autoডিফল্টভাবে সারি এবং সেল থাকবে have আপনি যদি display: -ms-gridকিছু ফ্লেক্সব্যাগ এড়াতে ব্যবহার করেন তবে এটি কেবল আইইয়ের সাথে বেশ সুন্দরভাবে কাজ করে , যতক্ষণ না আপনার কেবলমাত্র একটি শিশু থাকে।

— শর্টফিউজ

Answer 5

আপনি কিছুটা jQuery দিয়ে খুব সহজেই এটি করতে পারেন

$(document).ready(function(){
  var parentHeight = $("#parentDiv").parent().height();
  $("#childDiv").height(parentHeight);
});

Comments

যদিও ব্রাউজার উইন্ডোটি পুনরায় আকার দেওয়ার পরে এটি ভেঙে যাবে, যেখানে সিএসএস উইলগুলি এখনও কাজ করবে।

— শার্পসি