div को युक्त टीडी की ऊंचाई से कैसे मिलान करें?

मेरे पास एक तालिका की पंक्ति के साथ तीन "पैनल" रखे गए हैं। एक दूसरे के मुकाबले लंबा है और मैं चाहता हूं कि सभी तीन पैनल सबसे ऊंचे की ऊंचाई से मेल खाते हों। मैंने divs को ऊंचाई के साथ स्टाइल करने की कोशिश की: 100%, लेकिन छोटे पैनल छोटे होते हैं, भले ही युक्त टीडी बढ़ते हैं।div को युक्त टीडी की ऊंचाई से कैसे मिलान करें?

मेरा एचटीएमएल जेएसएफ द्वारा जेनरेट किया गया है, इसलिए मेरे पास इसके फॉर्म पर सीमित नियंत्रण है, लेकिन मैं शैलियों को संशोधित कर सकता हूं। मैंने नीचे जेनरेट कोड का सरलीकृत संस्करण बनाया है। आईई 8 और फ़ायरफ़ॉक्स पर भी यही समस्या होती है। हालांकि, IE8 छोटे पैनलों को लंबवत रूप से टीडी के शीर्ष पर गठबंधन करता है, जबकि फ़ायरफ़ॉक्स उन्हें बीच में प्रस्तुत करता है।

<html> 
<head> 
    <title>Test Table</title> 
    <style TYPE="text/css"> 
     td {border: 1px solid red; padding: 1px;} 
     .panel {border: 1px solid blue; padding: 1px;height:100%} 
     .panel-header{background-color: green; color: white;} 
     .panel-body {border: 1px solid green; padding: 1px; height:100%;} 
    </style> 
</head> 
<body> 
    <h1>Test Table</h1> 
    <table width="100%"> 
    <tbody> 
     <tr> 
      <td> 
       <div class="panel" style="height:200px;"> 
        <div class="panel-header"> 
        Header One 
        </div> 
        <div class="panel-body"> 
        Body One 
        </div> 
       </div> 
      </td> 
      <td> 
       <div class="panel" style="height:100%;"> 
        <div class="panel-header"> 
        Header Two 
        </div> 
        <div class="panel-body"> 
        Body Two 
        </div> 
       </div> 
      </td> 
      <td> 
       <div class="panel"> 
        <div class="panel-header"> 
        Header Three 
        </div> 
        <div class="panel-body"> 
        Body Three 
        </div> 
       </div> 
      </td> 
     </tr> 
    </tbody> 
    </table> 

</body> 
<html>

स्रोत

2011-02-07 Greg Charles

मैंने अपनी पोस्ट में jQuery के साथ ऐसा करने का एक तरीका जोड़ा। मुझे उम्मीद है यह मदद करेगा! –

आप इसे पूर्ण स्थिति के साथ कर सकते हैं, [इस उत्तर] पर एक नज़र डालें (http://stackoverflow.com/a/33943557/1677209)। – T30

यह पांच साल बाद है, इसलिए मैं उस वास्तविक पृष्ठ के खिलाफ परीक्षण नहीं कर सकता, जिसे मैं बना रहा था, लेकिन बस आप से फिडल की कोशिश कर रहा हूं, मुझे खेद है, लेकिन यह बिल्कुल काम नहीं करता है। आपने जिस समस्या का सामना कर रहा था, उसमें आपने गलत समझा होगा। किसी भी मामले में, jQuery समाधान रिचर्ड ने सुझाव दिया कि बस ठीक काम किया जाए। –

मुझे नहीं लगता कि आप ऊंचाई को टीडीएस (या तालिका) के लिए ऊंचाई बताए बिना 100% तक सेट कर सकते हैं। ऐसा लगता है कि height:100% से पहले आपको मूल तत्व पर स्पष्ट ऊंचाई निर्दिष्ट करनी होगी। शायद आप अपने शैलियों को डीवी कंटेनरों के बजाय टीडी टैग पर रहने के लिए संशोधित कर सकते हैं?

यदि यह मध्य के बजाय divs को शीर्ष पर संरेखित करने में सक्षम होने में मदद करता है, तो मैंने इसे कैसे किया जाए (vertical-align:top; को टीडी टैग में जोड़ें) उदाहरण दिया है। मैंने केवल divs का उपयोग करके एक उदाहरण दिया, हालांकि मुझे पता है कि आपने कहा है कि आपके पास इसके फॉर्म पर सीमित नियंत्रण है।

यदि आप एक तत्व की अधिकतम ऊंचाई जानते हैं, तो उस ऊंचाई पर तालिका या तालिका कक्ष सेट करना (यानी height:200px;) को 100% divs पर प्रभावी होना चाहिए।

संपादित आप jQuery का उपयोग करने के प्रतिकूल नहीं हैं, तो मैं अपने उदाहरण here अद्यतन किया है कि तुम क्या आवश्यकता होती है क्या करना है।

स्रोत

2011-02-07 20:39:39

ड्रेकर सही है; तालिका टीडी तत्व ऊंचाई मान निर्दिष्ट नहीं करता है, इसलिए 100% ऊंचाई मांगने वाले बच्चे तत्व इसकी गणना करने में सक्षम नहीं होंगे। जैसा कि ड्रेकर कहते हैं, आप मैन्युअल रूप से टीडी की ऊंचाई निर्धारित कर सकते हैं , या ... आप उनके लिए ऊंचाई 100% निर्दिष्ट कर सकते हैं, डीआईवी की ऊंचाई 100% के रूप में निर्दिष्ट करें, और तालिका की ऊंचाई निर्दिष्ट करें। या, आप तालिका में 100% ऊंचाई भी लागू कर सकते हैं; तालिका अपने मूल तत्व से ऊंचाई मान लेगी, यह आदर्श नहीं हो सकता है लेकिन यह सभी divs को एक ही ऊंचाई के रूप में जोड़ने की अनुमति देगा क्योंकि आप किसी दिए गए डीआईवी में अधिक सामग्री जोड़ते हैं। – Nick

हां, पूरे टेबल को बढ़ने से अधिक काम करना चाहिए- या जब तक कि तालिका में केवल एक पंक्ति नहीं होती है। हालांकि, मेरी असली तालिका में कई पंक्तियां हैं। यह एक शर्म की बात है कि टीडी तत्वों को पता है कि खुद को आकार देने का तरीका कैसे है, लेकिन वह जानकारी उन divs को पास नहीं कर सकती है जिनमें वे शामिल हैं। एक स्क्रिप्ट पर काम करने जा रहा है जो आकार बदल सकता है और इसे पैनलों के ऑनर्स से जोड़ता है ize घटना। अगर मैं इसे काम पर ला सकता हूं, तो मैं इसे यहां पोस्ट करूंगा। (बड़ा अगर!) –

@ ग्रेग चार्ल्स: यदि आप jQuery का उपयोग करने के प्रतिकूल नहीं हैं, तो मैंने एक उदाहरण जोड़ा है कि आप मेरी पोस्ट के लिए क्या चाहते हैं। –

height=100%; 
or 
height=inherit;

इनमें से एक चाल करना चाहिए :)

स्रोत

2011-02-07 20:15:48 Milaan

ओपी में पहले से ही ऊंचाई है: 100% 'और कहता है:" मैंने divs को ऊंचाई के साथ स्टाइल करने की कोशिश की: 100%, लेकिन छोटे पैनल छोटे होते हैं, भले ही युक्त टीडी बढ़ते हैं। " इसके अलावा, अगर इन्हें सीएसएस माना जाता है, तो आपको बराबर चिह्न के बजाय एक कोलन का उपयोग करना होगा। –

शायद मैं इस सवाल को समझ नहीं पा रहा हूं :) लेकिन उत्तराधिकारी को तब काम करना चाहिए ... या शायद उसे टीडी बनाना चाहिए (लेकिन वह वह नहीं चाहता जो वह चाहता है)। और हाँ, आपको ':' का उपयोग करने की आवश्यकता है। लेकिन मैं तेजी से टाइप कर रहा था: $ क्षमा करें :) – Milaan

मैं बस आपको बता रहा था। आप कोलन जोड़ने के लिए अपना जवाब संपादित कर सकते हैं। :) इसके नीचे बाईं तरफ एक संपादन लिंक है। –

मेरे समाधान: http://jsfiddle.net/k6Dam/2/

निकालें इनलाइन शैलियों (आशा है कि आप ऐसा कर सकते हैं) और न्यूनतम-ऊंचाई पैनल का सेट 200px करने के लिए।

स्रोत

2011-02-07 20:28:27 gearsdigital

मुझे लगता है कि मुद्दा तब होता है जब एक का शरीर अन्य निकायों की ऊंचाई से आगे बढ़ता है। यह समाधान हल नहीं करता है [यहां] (http://jsfiddle.net/Drackir/k6Dam/3/)। –

@ ड्रेकर निश्चित है लेकिन इस मार्कअप के साथ आप बिना किसी प्रतिबंध के ऐसा कर सकते हैं। वह शायद jQuery/जावास्क्रिप्ट के साथ पहले तत्व की ऊंचाई को पढ़ सकता है और ऊंचाई के दिए गए मान के आधार पर सेट हो सकता है। – gearsdigital

हाँ। दुर्भाग्य से यह एकमात्र समाधान हो सकता है। :( –

div को युक्त टीडी की ऊंचाई से कैसे मिलान करें?

उत्तर

संबंधित मुद्दे