একটি ডিআইভি একটি সম্পূর্ণ টেবিল ঘর পূরণ করুন

Question

আমি এই প্রশ্নটি দেখেছি এবং কিছুটা গুগল করেছি , তবে এখনও পর্যন্ত কোনও কিছুই কার্যকর হয়নি। আমি এখন 2010 এর চিত্র (এই প্রশ্নগুলি / উত্তরগুলি পুরানো এবং, ভাল, উত্তর থেকে উত্তর নেই) এবং আমাদের CSS3 রয়েছে! সিএসএস ব্যবহার করে কোনও পুরো টেবিল ঘরের প্রশস্ততা এবং উচ্চতা পূরণ করার জন্য কোনও ডিভ পাওয়ার কী উপায় আছে?

আমি জানি না যে কক্ষের প্রস্থ এবং / অথবা উচ্চতা সময়ের আগে কী হবে এবং ডিভের প্রস্থ এবং উচ্চতা 100% নির্ধারণ করা কার্যকর হয় না।

এছাড়াও, আমার ডিভের প্রয়োজনীয়তার কারণ হ'ল আমার ঘরের বাইরে কিছু উপাদান একেবারে স্থাপন করা দরকার, এবং এর position: relativeক্ষেত্রে প্রযোজ্য না td, তাই আমার একটি মোড়ক ডিভিও দরকার।

Comments

টেবিলের ধারক নিজেই একটি নির্দিষ্ট উচ্চতা আছে? টেবিলটি কি পৃষ্ঠার ভিউপোর্টকে বিস্তৃত করতে পারে?

— মেডিয়ার ওমুরালিভ

এটি সত্যিই অদ্ভুত যে উচ্চতা এবং প্রস্থকে 100% এ সেট করা কাজ করে না। এটি ডিভকে প্যারেন্ট ট্যাগের সম্পূর্ণ প্রস্থ এবং উচ্চতা তৈরি করতে হবে। আপেক্ষিক অবস্থানের কারণে এটি কাজ করছে না। সমাধানটি কেউ খুঁজে পেলে আমি আগ্রহী।

— মার্সিন

@ মিডার টেবিলের ডেটা গতিশীল, তাই আমি কখনই উচ্চতা জানতে পারব না। প্রস্থ পর্দা পূরণ করে, হ্যাঁ।

— জেসন

আপনি এই প্রশ্নটি দেখতে চাইতে পারেন: স্ট্যাকওভারফ্লো.

— com/

@ মার্সিন যদি টেবিল-সেলটির উচ্চতা (অর্থাৎ পাত্রে) সুস্পষ্টভাবে না বর্ণিত হয় তবে অনুমান অনুসারে অভ্যন্তরীণ ডিআইভিতে একটি পিসি% উচ্চতা আসলে 'অটো' হিসাবে গণনা করা হয়।

— মিঃ হোয়াইট

Answer 1

নিম্নলিখিত কোডটি আইই 8, আই 8 এর আই 7 এর সামঞ্জস্যতা মোড এবং Chrome (অন্য কোথাও পরীক্ষিত নয়) তে কাজ করে:

<table style="width:100px"> <!-- Not actually necessary; just makes the example text shorter -->
   <tr><td>test</td><td>test</td></tr>
   <tr>
      <td style="padding:0;">
         <div style="height:100%; width:100%; background-color:#abc; position:relative;">
            <img style="left:90px; position:absolute;" src="../Content/Images/attachment.png"/>
            test of really long content that causes the height of the cell to increase dynamically
         </div>
      </td>
      <td>test</td>
   </tr>
</table>

তুমি তোমার আসল প্রশ্নে বলেন, সেটিং widthএবং heightকরতে 100%না কাজ, যদিও, যার ফলে আমাকে আবার সন্দেহ করে অন্য কিছু নিয়ম এটা অগ্রাহ্য নেই। প্রস্থ / উচ্চতার নিয়মগুলি সত্যিই প্রয়োগ করা হচ্ছে কিনা তা জানতে আপনি Chrome বা ফায়ারব্যাগে গণিত শৈলীটি পরীক্ষা করেছেন?

সম্পাদন করা

আমি কত বোকা! এই divপাঠ্যটি আকার ছিল, না td। আপনি এটি Chrome এ তৈরি করে ঠিক করতে পারেন div display:inline-block, তবে এটি IE এ কাজ করে না। এটি প্রতারক প্রমাণ করছে ...

Comments

দীর্ঘশ্বাস ... অন্য স্টাইল প্রয়োগ করা হচ্ছে কিনা তা যাচাই করার জন্য ভাল কল। স্পষ্টতই আমার কিছু প্যাডিং বিধি ছিল যা আমার ডিভিটি পুরো টেবিল সেলটি ছড়িয়ে দেওয়া থেকে বিরত ছিল। একবার আমি সেগুলি থেকে মুক্তি পেয়েছি, আমার কোনও সমস্যা হয়নি। আমি কৌতূহলী ছিলাম কারণ আমার কোডটি দেখতে আপনার মতো দেখাচ্ছে (অবশ্যই ক্লাস ব্যবহার করে) তবে যখন আমি আরও শৃঙ্খলে চলে গেলাম, দেখি এবং প্যাডিং করছি। আপনার সাহায্যের জন্য ধন্যবাদ.

— জেসন

এই উদাহরণটি ব্যবহার করে দেখুন: jsfiddle.net/2K2tG লক্ষ্য করে যে কীভাবে সেল ডাব্লু / চিত্রটি লাল এবং #abc নয়। প্রস্থ / উচ্চতা 100% কিছুই করে না

— জেসন

এই নিবন্ধটির জন্য THX; আমি এটি দীর্ঘকাল ধরে অনুসন্ধান করে

— যাচ্ছি

জেসন যেমন উল্লেখ করেছেন, উচ্চতা: 100% কিছুই করে না .... এটি সমস্যার সমাধান করে না। ইনলাইন-ব্লক উল্লেখ করে সম্পাদনার জন্য ধন্যবাদ Thanks

— ম্যাট ব্রাউন

হ্যাঁ এটি ক্রোমের সাথে কাজ করে তবে দুর্ভাগ্যক্রমে ফায়ারফক্সের জন্য নয় ... jsfiddle.net/38Ngn/1

— প্লুটো

Answer 2

বিভাগের উচ্চতা = টেবিল ঘরে 100% কেবল তখনই কাজ করবে যখন টেবিলের উচ্চতার বৈশিষ্ট্য রয়েছে।

<table border="1" style="height:300px; width: 100px;">
 <tr><td>cell1</td><td>cell2</td></tr>
 <tr>
   <td>
     <div style="height: 100%; width: 100%; background-color:pink;"></div>
   </td>
   <td>long text long text long text long text long text long text</td>
 </tr>
</table>

ফায়ারফক্সে ইউপিডিheight=100% আপনার প্যারেন্ট TDউপাদানটির মানও নির্ধারণ করে

Comments

এটি খুব অস্বাভাবিক. বোকা যে এটি 2012 এবং এই বাগটি এখনও ঠিক করা হয়নি

— 173 এ বর্ণহীন

এর কারণ হিসাবে, আমরা আরও অর্থ প্রদান করি

— আয়নট ফ্লাভিয়াস পোগাসিয়ান

ভাল কৌশল, তবে কেবল আমার জন্য ক্রোমিয়ামে কাজ করেছে। আইই 9 এবং ফায়ারফক্স 19 ডিভটি প্রসারিত করতে সক্ষম নয়।

— মার্টিন

পিক্সেল উচ্চতা ব্যবহার করার পরিবর্তে, আমি 100% উচ্চতা এবং একটি ন্যূনতম উচ্চতা: 1px ব্যবহার করেছি।

— andrea.spot।

আপনি যদি tdউচ্চতা সমেত উচ্চতা সেট করে থাকেন তবে 100%এটি এফএফ এ কাজ করা উচিত। এটা সঠিক উত্তর.

— হার্টলেসান

Answer 3

আমাকে একটি নকল উচ্চতা <tr>এবং উচ্চতা নির্ধারণ করতে হয়েছিল : উত্তরাধিকারী হিসাবে<td>s

টিআর আছে height: 1px(এটি যাইহোক উপেক্ষা করা হয়)

তারপরে টিডি সেট করুন height: inherit

তারপরে ডিভ সেট করুন height: 100%

এটি আইই প্রান্ত এবং ক্রোমে আমার জন্য কাজ করেছে:

<table style="width:200px;">
    <tr style="height: 1px;">
        <td style="height: inherit; border: 1px solid #000; width: 100px;">
            <div>
              Something big with multi lines and makes table bigger
            </div>
        </td>
        <td style="height: inherit; border: 1px solid #000; width: 100px;">
            <div style="background-color: red; height: 100%;">
                full-height div
            </div>
        </td>
    </tr>
</table>

Comments

এটি সবসময় কাজ করে কিনা আমি জানি না তবে এটি আইই ১১ এ আমার জন্য কাজ করেছিল

— জো মাফি

আমার কেবল td { height: 1px }ক্রোমের প্রয়োজন ছিল ।

— ক্রিস হ্যাপি

অনেক ধন্যবাদ! এটি আমাকে এইচটিএমএল টেবিল এবং কোষের সামগ্রী হিসাবে একটি কৌণিক উপাদান দিয়ে সহায়তা করেছিল।

— ফেলিক্স লেমকে

Answer 4

যদি কোনও টেবিল ঘরের অভ্যন্তরে আপনার যদি 100% ডিভিটি পাওয়ার প্রয়োজন হয় তবে এটি পুরো উচ্চতা পর্যন্ত ব্যাকগ্রাউন্ড রঙ প্রসারিত করতে সক্ষম হওয়া সত্ত্বেও কোষগুলির মধ্যে ফাঁক রাখতে সক্ষম হতে পারলে আপনি <td>নিজের পটভূমির রঙ দিতে পারেন এবং সিএসএস ব্যবহার করতে পারেন কক্ষগুলির মধ্যে মার্জিন তৈরি করতে সীমানা-ব্যবধানের সম্পত্তি।

তবে আপনার যদি সত্যই 100% উচ্চতার ডিভ প্রয়োজন হয় তবে এখানে অন্যরা যেমন উল্লেখ করেছেন আপনাকে হয় একটি নির্দিষ্ট উচ্চতা নির্ধারণ করতে হবে <table>বা জাভাস্ক্রিপ্ট ব্যবহার করতে হবে।

Comments

আপনি border-spacing:5px"টেবিল" এডি উপাদানটি ব্যবহার করে কক্ষটিকে স্থান দিতে পারেন তবে আমি সম্মত, কোষের ভিতরে একটি ডিআইভি ব্যবহার করা আরও বেশি মার্জিত এবং সামগ্রিকভাবে ভাল।

— vsync

পরামর্শের জন্য ধন্যবাদ, ঠিক কাজ করে। শুধু আবেদন করতে মনে রাখবেন border-collapse: separateটেবিলে, অন্যথায় এটি অভ্যস্ত কোনো প্রভাব আছে। +1

— katzenhut

border-collapse: separateএটি ডিফল্ট, তবে হ্যাঁ, এটি একটি ভাল টিপ।

— ম্যাট ব্রাউন

Answer 5

সুতরাং, যেহেতু প্রত্যেকে তাদের সমাধান পোস্ট করছে এবং কোনওটিই আমার পক্ষে ভাল ছিল না, এটি আমার (ক্রোম এবং ফায়ারফক্সে পরীক্ষিত)।

table { height: 1px; }
tr { height: 100%; }
td { height: 100%; }
td > div { height: 100%; }

ফিডল: https://jsfiddle.net/nh6g5fzv/

Comments

আপনি, স্যার বা ম্যাডাম, সোনার তারার প্রাপ্য। এটি আমাকে বাদাম চালাচ্ছিল।

— tylertrotter

Answer 6

যেহেতু প্রতিটি অন্যান্য ব্রাউজার (IE 7, 8 এবং 9 সহ) position:relativeকোনও টেবিল সেলটিতে সঠিকভাবে পরিচালনা করে এবং কেবল ফায়ারফক্স এটি ভুল হয়ে যায়, তাই আপনার জাভাস্ক্রিপ্ট শিম ব্যবহার করা আপনার সেরা বেট। একটি ব্যর্থ ব্রাউজারের জন্য আপনাকে আপনার ডোম পরিবর্তন করতে হবে না। আইই কিছু ভুল হয়ে যায় এবং অন্যান্য সমস্ত ব্রাউজারগুলি এটি সঠিক হয়ে যায় তখন লোকেরা সমস্ত সময় শিম ব্যবহার করে।

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

http://jsfiddle.net/mrbinky3000/MfWuV/33/

এখানে কোডটি নিজেই, তবে এটি প্রসঙ্গ ছাড়াই বোঝা যায় না, তাই উপরের jsfiddle URL দেখুন। (সম্পূর্ণ স্নিপেটে সিএসএস এবং জাভাস্ক্রিপ্ট উভয় ক্ষেত্রেই প্রচুর মন্তব্য রয়েছে))

$(function() {
    // FireFox Shim
    if ($.browser.mozilla) {
        $('#test').wrapInner('<div class="ffpad"></div>');
        function ffpad() {
            var $ffpad = $('.ffpad'),
                $parent = $('.ffpad').parent(),
                w, h;
            $ffpad.height(0);
            if ($parent.css('display') == 'table-cell') {               
                h = $parent.outerHeight();
                $ffpad.height(h);
            }
        }
        $(window).on('resize', function() {
            ffpad();
        });
        ffpad();
    }
});

Comments

যদিও এটি একটি ভাল উত্তর ছিল, এই কোডটি অনুলিপি / পেস্ট করবেন না। b ব্রাউজারটি jQuery 1.8 থেকে অবহেলা করা হয়েছে এবং 1.9-এ সরানো হয়েছে। আরও তথ্যের জন্য: api.jquery.com/jQuery.browser

— cmegown

আমি এই উত্তরটিও পছন্দ করি, তবে @ ক্লিগগাউন যেমনটি বলেছিল, $। ব্রাউজারটি এখন অবচয় করা হয়েছে। পরিবর্তে আমি ব্যক্তিগতভাবে যা করব (আমি এটি চেষ্টা করব - এটি কাজ করবে না এমন আমি 100% নিশ্চিত নই) হ'ল উপাদানটির অবস্থান স্থিতিশীল থেকে পরম (বা অন্যদিকে) পরিবর্তন করতে হবে এবং সেখানে আছে কিনা তা দেখতে হবে উইন্ডোর তুলনায় উপাদানের অবস্থানের পরিবর্তন। এটি কেবলমাত্র যদি উপাদান থাকে তবে কাজ করা উচিত top:0; left: 0;।

— নিকোলা ইভানভ নিকোলভ

আমি নিশ্চিত করতে পারি যে এটি আমার জন্য কাজ করেছে - আমি উপাদানটির। অফসেট () পেয়েছি এবং তারপরে একে একে পরম স্থানে পরিণত করি এবং এটি আবার অফসেট () পাই এবং যদি এটি একই না হয় তবে আমি এটিকে একটি অবস্থানে গুটিয়ে রাখি: আপেক্ষিক বিভাগ। এটি কেবলমাত্র কাজ করে কারণ যখন একেবারে অবস্থান হয় আমি আমার উপাদানটির অবস্থান পরিবর্তন করার আশা করি না (যেহেতু এটি শীর্ষ: 0; বাম: 0;)

— নিকোলা ইভানভ নিকোলভ

ফায়ারফক্স "এটিকে ভুল করে না"। তুলনামূলকভাবে একটি টেবিল কক্ষের অবস্থান সিএসএস অনুমানে অপরিজ্ঞাত। ( লিঙ্ক )

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

এখন ফায়ারফক্সে (26) জাভাস্ক্রিপ্ট ছাড়াই কাজ করে। এছাড়াও, এটি এখনও পর্যন্ত আমার পক্ষে কাজ করা একমাত্র উত্তর ...

— টোম জ্যাটো - মনিকা পুনরায় ইনস্টল করুন

Answer 7

আমি ব্যবহার করে একটি সমাধান প্রস্তাব পরীক্ষামূলক Flexbox করার ভান একটি টেবিল বিন্যাস যা কোষের বিষয়বস্তু উপাদান উল্লম্বভাবে তার পিতা বা মাতা সেল ভরাট অনুমতি দেবে:

ডেমো

.table{ display:flex; border:2px solid red; }
.table > *{ flex: 1; border:2px solid blue; position:relative; }
.fill{ background:lightgreen; height:100%; position:absolute; left:0; right:0; }

/* Reset */
*{ padding:0; margin:0; }
body{ padding:10px; }

<div class='table'>
  <aside><div class='fill'>Green should be 100% height</div></aside>
  <aside></aside>
  <aside>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus conguet.</p>
  </aside>
</div>

Answer 8

বেশ কয়েক দিন অনুসন্ধানের পরে আমি এই সমস্যার জন্য একটি সম্ভাব্য সমাধান খুঁজে পেয়েছি।

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
</head>

<body style="height:100%">
<!-- for Firefox and Chrome compatibility set height:100% in the containing TABLE, the TR parent and the TD itself. -->
<table width="400" border="1" cellspacing="0" cellpadding="0" style="height:100%;">  
  <tr>
    <td>whatever</td>
    <td>whatever</td>
    <td>whatever</td>
  </tr>
  <tr style="height:100%;">
    <td>whatever dynamic height<br /><br /><br />more content
</td>
    <td>whatever</td>

    <!-- display,background-color and radius properties in TD BELOW could be placed in an <!--[if IE]> commentary If desired.
    This way TD would remain as display:table-cell; in FF and Chrome and would keep working correctly.    
    If you don't place the properties in IE commentary it will still work in FF and Chorme with a TD display:block;

    The Trick for IE is setting the cell to display:block; Setting radius is only an example of whay you may want a DIV 100%height inside a Cell.
    -->

    <td style="height:100%; width:100%; display:block; background-color:#3C3;border-radius: 0px 0px 1em 0px;">

    <div style="width:100%;height:100%;background-color:#3C3;-webkit-border-radius: 0px 0px 0.6em 0px;border-radius: 0px 0px 0.6em 0px;">
    Content inside DIV TAG
    </div>
     </td>
  </tr>
</table>
</body>
</html>

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

ইংরেজি ব্যাখ্যা: কোড মন্তব্যগুলির মধ্যে

Answer 9

যদি <table> <tr> <td> <div>সমস্ত height: 100%;সেট হয়ে থাকে তবে ডিভটি সমস্ত ব্রাউজারে গতিশীল কক্ষের উচ্চতা পূরণ করবে।

Answer 10

ঠিক আছে কেউ এটি উল্লেখ করেনি তাই আমি অনুভব করেছি যে আমি এই কৌশলটি পোস্ট করব:

.tablecell {
    display:table-cell;
}
.tablecell div {
    width:100%;
    height:100%;
    overflow:auto;
}

ওভারফ্লো: কক্ষের মধ্যে থাকা ধারক ডিভিতে অটো আমার জন্য কৌশল করে। এটি ছাড়া ডিভ পুরো উচ্চতা ব্যবহার করে না।

Answer 11

যদি টেবিল ঘরটি আপনি চান সেই আকার হয় তবে কেবল এই CSS শ্রেণিটি যুক্ত করুন এবং এটি আপনার ডিভিতে নির্ধারণ করুন:

.block {
   height: -webkit-calc(100vh);
   height: -moz-calc(100vh);
   height: calc(100vh);
   width: 100%;
}

আপনি যদি টেবিল সেলটি পিতামাতাকেও পূরণ করতে চান তবে ক্লাসটি টেবিল ঘরেও বরাদ্দ করুন। আমি আসা করি এটা সাহায্য করবে.

Answer 12

পার্টিতে কিছুটা দেরি হলেও এখানে আমার সমাধান:

<td style="padding: 0; position: relative;">
   <div style="width: 100%; height: 100%; position: absolute; overflow: auto;">
     AaaaaaaaaaaaaaaaaaBBBBBBBbbbbbbbCCCCCCCCCccccc<br>
     DDDDDDDddddEEEEEEEEdddfffffffffgggggggggggggggggggg
   </div>
</td>

Answer 13

কোনও মন্তব্য পোস্ট করার মতো যথেষ্ট খ্যাতি না থাকায় আমি একটি সম্পূর্ণ ক্রস ব্রাউজার সমাধান যুক্ত করতে চাই যা @ ম্যাডেরস্ক এবং @ সাদাতের পদ্ধতির সাথে কিছুটা সংশোধন করেছে! (2/10/2020 অনুসারে ক্রোম, ফায়ারফক্স, সাফারি, আইই এবং এজতে পরীক্ষিত)

table { height: 1px; }
tr { height: 100%; }
td { height: 100%; }
td > div { 
   height: -webkit-calc(100vh);
   height: -moz-calc(100vh);
   height: calc(100%);
   width: 100%;
    background: pink;  // This will show that it works!
} 

তবে আপনি যদি আমার মতো হন তবে আপনি উল্লম্ব সারিবদ্ধতাও নিয়ন্ত্রণ করতে চান এবং সেই ক্ষেত্রে আমি ফ্লেক্সবক্স ব্যবহার করতে চাই:

td > div {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

Answer 14

আমি মনে করি জাভাস্ক্রিপ্ট ব্যবহার করা সবচেয়ে ভাল সমাধান হবে।

তবে আমি নিশ্চিত নই যে আপনার <td>নিজের ঘরের বাইরে অবস্থানের উপাদানগুলির সমস্যা সমাধানের জন্য এটি করা দরকার। তার জন্য আপনি এই জাতীয় কিছু করতে পারেন:

<div style="position:relative">
    <table>
        <tr>
            <td>
                <div style="position:absolute;bottom:-100px">hello world</div>
            </td>
        </tr>
    </table>
</div>

অবশ্যই ইনলাইন নয়, তবে ক্লাস এবং আইডি সহ।

Comments

উত্তরের জন্য ধন্যবাদ. আমার যদি টেবিলের সাথে সম্পর্কিত কিছু রাখার দরকার হয় তবে এটি কাজ করে । আমার একটি পৃথক কক্ষের বাইরে এমন কিছু স্থাপন করা দরকার যেখানে ঘরের অবস্থান অজানা।

— জেসন

এই টেবিলটি কী রয়েছে তার উপরে কি আপনি প্রসারিত করতে পারেন? এবং 100% প্রস্থ / উচ্চতার জিনিসটি কী?

— মেডিয়ার ওমুরালিভ

Answer 15

উচ্চতা তৈরি করতে: অভ্যন্তরীণ ডিভের জন্য 100% কাজ করা, আপনাকে প্যারেন্ট টিডির জন্য একটি উচ্চতা নির্ধারণ করতে হবে। আমার বিশেষ ক্ষেত্রে এটি উচ্চতা ব্যবহার করে কাজ করেছে: 100%। এটি অভ্যন্তরের ডিভ উচ্চতা প্রসারিত করেছে, অন্যদিকে টেবিলের অন্যান্য উপাদানগুলি টিডিটিকে খুব বেশি বড় হতে দেয়নি। আপনি অবশ্যই 100% এর চেয়ে অন্য মানগুলি ব্যবহার করতে পারেন

আপনি যদি টেবিল ঘরের একটি নির্দিষ্ট উচ্চতা তৈরি করতে চান যাতে এটি সামগ্রীর উপর ভিত্তি করে বড় না হয় (অভ্যন্তরীণ ডিভ স্ক্রোল তৈরি করতে বা ওভারফ্লো আড়াল করতে), এটি তখন আপনার কোনও বিকল্প নেই তবে কিছু জেএস ট্রিকস থাকে। প্যারেন্ট টিডির উচ্চতা একটি আপেক্ষিক ইউনিটে (% নয়) নির্দিষ্ট করা দরকার। এবং আপনার সম্ভবত সম্ভবত জেএস ব্যবহার করে সেই উচ্চতা গণনা করা ছাড়া আর কোনও উপায় থাকবে না। এটির জন্যও টেবিল-বিন্যাসের প্রয়োজন হবে: টেবিল উপাদানের জন্য স্থির স্টাইল সেট

Answer 16

আমি অনুরূপ বিষয় ঘন ঘন সম্মুখীন এবং সবসময় শুধু ব্যবহার table-layout: fixed;উপর tableউপাদান এবং height: 100%;ভিতরের DIV নেভিগেশন।

Answer 17

আমি শেষ পর্যন্ত এমন কিছুই পাই যা আমার সমস্ত ব্রাউজার এবং সমস্ত ডক্টটাইপস / ব্রাউজারের রেন্ডারিং মোডগুলিতে jQuery ব্যবহার ব্যতীত কাজ করবে। আমি এখানে এসেছি তাই এখানে।
এমনকি অ্যাকাউন্টে সারিস্প্যানও লাগে।

function InitDivHeights() {
    var spacing = 10; // <-- Tune this value to match your tr/td spacing and padding.
    var rows = $('#MyTable tr');
    var heights = [];
    for (var i = 0; i < rows.length; i++)
        heights[i] = $(rows[i]).height();
    for (var i = 0; i < rows.length; i++) {
        var row = $(rows[i]);
        var cells = $('td', row);
        for (var j = 0; j < cells.length; j++) {
            var cell = $(cells[j]);
            var rowspan = cell.attr('rowspan') || 1;
            var newHeight = 0;
            for (var k = 0; (k < rowspan && i + k < heights.length); k++)
                newHeight += heights[i + k];
            $('div', cell).height(newHeight - spacing);
        }
    }
}
$(document).ready(InitDivHeights);

IE11 (এজ মোড), FF42, Chrome44 + এ পরীক্ষিত। নেস্টেড টেবিলগুলি দিয়ে পরীক্ষা করা হয়নি।

Comments

ভাল, এখন এটি ফ্লেক্সবক্সের সাহায্যে সহজ। এটি একটি পুরানো প্রশ্ন!

— জেসন

ধন্যবাদ @Jason, কিন্তু আমরা তা IE10 / IE11 কাজ করার পাশাপাশি প্রয়োজন, যা উভয় অনুযায়ী আংশিক / বগী flexbox সমর্থন আছে caniuse.com/#feat=flexbox এবং github.com/philipwalton/flexbugs । সম্ভবত পরে ...

— পিটার বি

Answer 18

আপনি এটি এর মতো করতে পারেন:

<td>
  <div style="width: 100%; position: relative; float: left;">inner div</div>
</td>

Answer 19

যদি অবস্থানযুক্ত উপাদান এবং এর পিতা উপাদানটির প্রস্থ এবং উচ্চতা না থাকে তবে সেট করুন

padding: 0;

এর পিতা উপাদান,

Answer 20

এটি সম্ভবত প্রস্তাবিত নয়।

আমি এমন একটি কাজের সন্ধান পেয়েছি যা যদি আপনার ডিভের পাঠ্য না থাকে এবং অভিন্ন পটভূমি থাকে তবে তা কাজ করে।

display: 'list-item'

ডিভকে কাঙ্ক্ষিত উচ্চতা এবং প্রস্থ দেয় তবে তালিকার আইটেম বুলেট থাকার বড় ক্ষতি হয়। ডিভের যেহেতু একজাতীয় পটভূমি বর্ণ রয়েছে আমি সেই স্টাইলগুলি সহ বুলেট থেকে মুক্তি পেয়েছি:

list-style-position: 'inside',
color: *background-color*,

Answer 21

আপনি কী করতে চান তা আমি নিশ্চিত নই তবে আপনি এটি ব্যবহার করে দেখতে পারেন:

<td width="661" valign="top"><div>Content for New Div Tag Goes Here</div></td>

Answer 22

নিম্নলিখিত কাজ করা উচিত। আপনাকে প্যারেন্ট কক্ষে উচ্চতা নির্ধারণ করতে হবে। https://jsfiddle.net/nrvd3vgd/

<table style="width:200px; border: 1px solid #000;">
    <tr>
        <td style="height:100px;"></td>
    </tr>
    <tr>
        <td style="height:200px;">
            <div style="height:100%; background: #f00;"></div>
        </td>
    </tr>
</table>

Answer 23

এটা চেষ্টা কর:

<td style="position:relative;">
    <div style="position:absolute;top:0;bottom:0;width:100%;"></div>
</td>

Answer 24

প্রদর্শনের চেষ্টা করুন: একটি ঘরের ভিতরে টেবিল ব্লক

Comments

"প্রদর্শন: টেবিল ব্লক" বলতে কী বোঝ? দয়া করে আপনার উত্তরটি সংশোধন এবং বিন্যাসকরণ বিবেচনা করুন

— Pmpr

Answer 25

আমি < div > ভিতরে < td > এর জন্য পুরানো সিএসএস-ট্রিক এখানে দেখছি না । অত: পর আমি মনে করিয়ে দিন: সহজ কিছু ন্যূনতম মান সেট প্রস্থ কিন্তু কি-আপনি-প্রয়োজন জন্য সর্বনিম্ন-চওড়া । উদাহরণ স্বরূপ:

<div style="width: 3px; min-width: 99%;">

সেই ক্ষেত্রে টিডি'র প্রস্থ আপনার উপর নির্ভর করে ।

Answer 26

এইচটিএমএলে 100% উচ্চতা এবং 100% প্রস্থের প্রসারিত করার জন্য এটি আমার সমাধান <td>

যদি আপনি আপনার কোডের প্রথম লাইনটি মুছুন তবে আপনি এটি ঠিক করতে পারেন ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

কারণ এই ডকটিপটি কিছু ফাইলে 100% শতাংশের অভ্যন্তরে ব্যবহার করার অনুমতি দেয় না <td>তবে আপনি যদি এই লাইনটি মুছে ফেলেন তবে শরীর ব্যাকগ্রাউন্ডটি 100% উচ্চতা এবং 100% প্রস্থে প্রসারিত করতে ব্যর্থ হয়, তাই আমি এটি খুঁজে পেয়েছি DOCTYPEযা সমস্যার সমাধান করে this

<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">

এই ডক্টইপিকে আপনাকে আপনার শরীরে পটভূমিটি 100% উচ্চতা এবং 100% প্রস্থ হিসাবে প্রসারিত করতে দেয় এবং আপনাকে সমস্ত 100% উচ্চতা এবং 100% প্রস্থের মধ্যে নিতে দেয় <td>

Comments

ডক্টাইপের সাথে ঝামেলা না করাই ভাল। আপনি সমস্ত পরিণতি সম্পর্কে সচেতন বলে মনে হয় না। ডকপট টাইপগুলি পরিবর্তনের ফলে অনেকগুলি পার্শ্ব প্রতিক্রিয়া থাকতে পারে (তাই সিএসএস ওয়ার্ল্ডের বেশিরভাগ জিনিসই ডিপ্লোয়ালিটি করে)।

— রলফ