<div> পূরণ <d>> উচ্চতা কীভাবে করবেন

Question 1

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

আমার এই জাতীয় একটি HTML কনস্ট্রাক্ট রয়েছে:

<table>
  <tr>
    <td class="thatSetsABackground">
      <div class="thatSetsABackgroundWithAnIcon">
        <dl>
          <dt>yada
          </dt>
          <dd>yada
          </dd>
        </dl>
      <div>
    </td>
    <td class="thatSetsABackground">
      <div class="thatSetsABackgroundWithAnIcon">
        <dl>
          <dt>yada
          </dt>
          <dd>yada
          </dd>
        </dl>
      <div>
    </td>
  </tr>
</table>

আমার যা প্রয়োজন তা হ'ল divউচ্চতা পূরণ করার জন্য td, তাই আমি ডিভের পটভূমিটি (আইকন) এর নীচের অংশে ডানদিকের কোণে রাখতে সক্ষম হতে পারি td।

আমি কীভাবে পরামর্শ দেব?

Question 2

যদি আপনি আপনার টিডিকে 1 পিএক্স উচ্চতা দেন, তবে শিশু ডিভের উচ্চমানের পিতামাতাকে এর থেকে% গণনা করতে হবে। আপনার বিষয়বস্তুগুলি 1px এর চেয়ে বড় হবে বলে টিডিটি স্বয়ংক্রিয়ভাবে বৃদ্ধি পাবে, ডিভ হিসাবে। কিন্ডা একটি আবর্জনা হ্যাক, কিন্তু আমি বাজি এটি কাজ করবে।

Question 3

সিএসএস উচ্চতা: 100% কেবলমাত্র তখনই কাজ করে যদি উপাদানটির পিতামাতার একটি সুস্পষ্টভাবে সংজ্ঞায়িত উচ্চতা থাকে। উদাহরণস্বরূপ, এটি প্রত্যাশার মতো কাজ করবে:

td {
    height: 200px;
}

td div {
    /* div will now take up full 200px of parent's height */
    height: 100%;
}

যেহেতু দেখে মনে হচ্ছে আপনার <td>পরিবর্তনশীল উচ্চতা হতে চলেছে, আপনি যদি একেবারে ঠিক মতো চিত্রের সাথে নীচের ডান আইকনটি যুক্ত করেন তবে:

.thatSetsABackgroundWithAnIcon {
    /* Makes the <div> a coordinate map for the icon */
    position: relative;

    /* Takes the full height of its parent <td>.  For this to work, the <td>
       must have an explicit height set. */
    height: 100%;
}

.thatSetsABackgroundWithAnIcon .theIcon {        
    position: absolute;
    bottom: 0;
    right: 0;
}

টেবিল সেল মার্কআপের মতো:

<td class="thatSetsABackground">  
  <div class="thatSetsABackgroundWithAnIcon">    
    <dl>
      <dt>yada
      </dt>
      <dd>yada
      </dd>
    </dl>
    <img class="theIcon" src="foo-icon.png" alt="foo!"/>
  </div>
</td>

সম্পাদনা করুন: ডিভের উচ্চতা নির্ধারণ করতে jQuery ব্যবহার করে

আপনি যদি <div>সন্তানের সন্তান হিসাবে <td>রাখেন তবে jQuery এর এই স্নিপেটটি সঠিকভাবে এর উচ্চতা নির্ধারণ করবে:

// Loop through all the div.thatSetsABackgroundWithAnIcon on your page
$('div.thatSetsABackgroundWithAnIcon').each(function(){
    var $div = $(this);

    // Set the div's height to its parent td's height
    $div.height($div.closest('td').height());
});

Question 4

আপনি আপনার ডিভি ফ্লোট তৈরি করতে চেষ্টা করতে পারেন:

.thatSetsABackgroundWithAnIcon{

    float:left;
}

বিকল্পভাবে, ইনলাইন-ব্লক ব্যবহার করুন:

.thatSetsABackgroundWithAnIcon{

    display:inline-block;
}

ইনলাইন-ব্লক পদ্ধতির কার্যকারী উদাহরণ:

table,
th,
td {
  border: 1px solid black;
}

<table>
  <tr>
    <td>
      <div style="border:1px solid red; height:100%; display:inline-block;">
        I want cell to be the full height
      </div>
    </td>
    <td>
      This cell
      <br/>is higher
      <br/>than the
      <br/>first one
    </td>
  </tr>
</table>

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

Question 5

সত্যিই জেএস এর সাথে এটি করতে হবে। এখানে একটি সমাধান। আমি আপনার শ্রেণীর নামগুলি ব্যবহার করি নি, তবে আমি টিডি ক্লাসের মধ্যে "পূর্ণ-উচ্চতা" নামটির নামটি ডেকেছি :-) স্পষ্টতই, jQuery ব্যবহৃত হয়েছে। নোট করুন এটি jQuery (ডকুমেন্ট) থেকে ডেকে আনা হয়েছিল। প্রস্তুত (ফাংশন () {সেটফুলহাইটস ();}); এছাড়াও মনে রাখবেন আপনার যদি চিত্রগুলি থাকে তবে আপনাকে প্রথমে তাদের মাধ্যমে পুনরাবৃত্তি করতে হবে যেমন:

function loadedFullHeights(){
var imgCount = jQuery(".full-height").find("img").length;
if(imgCount===0){
    return setFullHeights();
}
var loaded = 0;
jQuery(".full-height").find("img").load(function(){
    loaded++;
    if(loaded ===imgCount){
        setFullHeights()
    }
});

}

এবং আপনি এর পরিবর্তে ডকরেডি থেকে লোডফুলহাইটস () কে কল করতে চান। এটি কেবলমাত্র আমি ক্ষেত্রে ব্যবহার করে শেষ করেছি। আপনি কি জানেন সামনে চিন্তা আছে!

function setFullHeights(){
var par;
var height;
var $ = jQuery;
var heights=[];
var i = 0;
$(".full-height").each(function(){
    par =$(this).parent();
    height = $(par).height();
    var tPad = Number($(par).css('padding-top').replace('px',''));
    var bPad = Number($(par).css('padding-bottom').replace('px',''));
    height -= tPad+bPad;
    heights[i]=height;
    i++;
});
for(ii in heights){
    $(".full-height").eq(ii).css('height', heights[ii]+'px');
}

}

Question 6

এই প্রশ্নের ইতিমধ্যে এখানে উত্তর দেওয়া হয়েছে । কেবল এবং ধারক height: 100%উভয়ই রাখুন ।divtd

Question 7

<td> নিজেই পটভূমি চিত্রটি পরিবর্তন করুন।

অথবা ডিভিতে কিছু সিএসএস প্রয়োগ করুন:

.thatSetsABackgroundWithAnIcon{
    height:100%;
}