कैसे करें <div> fill <td> height

Question

मैंने StackOverflow पर कई पोस्टों के माध्यम से देखा है, लेकिन इस सरल प्रश्न का उत्तर खोजने में सक्षम नहीं है।

मेरे पास इस तरह एक 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, इसलिए मैं नीचे के दाएं कोने में div की पृष्ठभूमि (आइकन) को स्थिति में लाने में सक्षम हो सकता हूं td।

आप कैसे सुझाव देते हैं कि मैं इसके बारे में जाऊँ?

Comments

संबंधित: stackoverflow.com/questions/8344850/…

— क्रिस मोसिनची

Answer 1

यदि आप अपने टीडी को 1px की ऊंचाई देते हैं, तो चाइल्ड डिव के पास एक अभिभावक होता है, जो इसकी गणना करता है कि यह% से है। क्योंकि आपकी सामग्री बड़ी होगी तो 1px, td स्वतः बढ़ेगा, जैसे कि div। Kinda एक कचरा हैक, लेकिन मुझे यकीन है कि यह काम करेगा।

Comments

जबकि यह वेबकिट में ठीक काम करता है, IE9 पूरी तरह से टूट जाता है।

— डैनियल इमम्स जूल

मेरे लिए IE11 में ही काम करें जब मैंने इनलाइन-ब्लॉक में div सेट किया। धन्यवाद!

— डैनी सी।

यहाँ एक समाधान है जो फ़ायरफ़ॉक्स में भी काम करता है: stackoverflow.com/questions/36575846/…

— Wouter

इसे फ़ायरफ़ॉक्स के साथ-साथ क्रोम में काम करने के लिए मुझे min-height: 1px;इसके बजायheight: 1px;

— मैट लियोनॉइक्ज़

Sure मुझे यकीन नहीं है कि मुझे CSS पसंद है या नफरत है

— noob

Answer 2

सीएसएस ऊंचाई: 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>

संपादित करें: div की ऊंचाई निर्धारित करने के लिए 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());
});

Comments

वह काम कर सकता था। जब मैंने कोशिश की तो मुझे वापस आने दो। मैंने इस विषय पर पढ़ा और समझा कि <div> को 100% के पैमाने पर होने के लिए एक निर्दिष्ट ऊंचाई की आवश्यकता है। मैंने जो कुछ भी पढ़ा था उससे jQuery के साथ करना संभव था, क्योंकि यह मेरे लिए इसकी गणना कर सकता है।

मैंने वास्तव में यह सब ठीक नहीं किया, और हमने अलग-अलग दृष्टिकोण पर फैसला किया है। लेकिन मैं आपके उत्तर को स्वीकार करूंगा क्योंकि यह सबसे अच्छा है।

हाह, अगर मेरे पास केवल सीएसएस के लिए एक डॉलर था, तो सीएसएस ने मुझे अपना दृष्टिकोण बदल दिया :)

— पैट

क्या मैं एकमात्र ऐसा व्यक्ति हूं जो सोचता है कि "सीएसएस ऊंचाई: 100% केवल तभी काम करता है जब तत्व के माता-पिता के पास स्पष्ट रूप से परिभाषित ऊंचाई है" वास्तव में गूंगा नियम है? ब्राउज़र वैसे भी मूल तत्व की ऊंचाई निर्धारित करता है; वहाँ कोई रास्ता नहीं है आप स्पष्ट रूप से पेरेंट तत्व की ऊंचाई निर्धारित करने के लिए होना चाहिए।

— Jez

jquery समाधान ने तभी काम किया जब मैंने इसे फ़ाइल के अंत में रखा, धन्यवाद

— luke_mclachlan

Answer 3

आप अपने डिव फ्लोट बनाने की कोशिश कर सकते हैं:

.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>

Comments

फ्लोट: बायाँ सुझाव काम नहीं करता। इसे हटाकर इस उत्तर को बेहतर बनाया जा सकता है, क्योंकि उल्लिखित दूसरा समाधान काम करने लगता है।

— राउटर

यह फ़ायरफ़ॉक्स के साथ नहीं है। यह केवल क्रोम के साथ काम करने लगता है।

— YLombardi

यह स्निपेट क्रोमियम पर काम नहीं करता है, कम से कम आजकल (मैं 63.0.3239.84 का उपयोग कर रहा हूं)।

— माइकल

Answer 4

वास्तव में जेएस के साथ ऐसा करना है। यहाँ एक समाधान है। मैंने आपके वर्ग के नामों का उपयोग नहीं किया, लेकिन मैंने "पूर्ण-ऊंचाई" के td वर्ग के नाम के भीतर div कहा: :-) jQuery, जाहिर है। ध्यान दें कि इसे jQuery (दस्तावेज़) से बुलाया गया था। पहले से ही (फ़ंक्शन () {setFullHeights ();}); यह भी ध्यान दें कि अगर आपके पास चित्र हैं, तो आपको पहले उनके माध्यम से पुनरावृति करनी होगी:

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()
    }
});

}

और आप इसके बजाय docReady से लोडफुलहाइट्स () को कॉल करना चाहेंगे। यह वास्तव में क्या मैं सिर्फ मामले में का उपयोग कर समाप्त हो गया है। आगे जानिए आपको पता है!

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');
}

}

Answer 5

यह प्रश्न पहले से ही यहाँ उत्तर दिया गया है । बस कंटेनर और कंटेनर height: 100%दोनों में डाल दिया ।divtd

Answer 6

<Td> की पृष्ठभूमि छवि को ही संशोधित करें।

या div पर कुछ सीएसएस लागू करें:

.thatSetsABackgroundWithAnIcon{
    height:100%;
}

Comments

जैसा कि मैं कोड में लिखता हूं। टीडी में पहले से ही एक वर्ग का उपयोग करके एक पृष्ठभूमि-छवि सेट है। तो वह विकल्प व्यवहार्य नहीं है। मैंने div की ऊंचाई 100% करने की कोशिश की है, लेकिन यह काम नहीं करता है। यह केवल निहित <dl> की चर ऊंचाई के लिए लपेटता है। तो कुछ को "समझ" बनाने के लिए आवश्यक है कि यह ऊंचाई को भरना चाहिए। और ऊंचाई: 100% ऐसा नहीं करता है। (अकेले नहीं कम से कम)