ভাগ করুন (উচ্চতা) পিতামাতার অবশিষ্ট উচ্চতা দখল করুন

Question

http://jsfiddle.net/S8g4E/

আমার divদুটি বাচ্চা সহ একটি ধারক রয়েছে। প্রথম সন্তানের একটি নির্দিষ্ট উচ্চতা থাকে। আমি কীভাবে দ্বিতীয় বাচ্চাকে divনির্দিষ্ট উচ্চতা না দিয়ে পাত্রে "ফ্রি স্পেস" দখল করতে পারি ?

উদাহরণস্বরূপ, গোলাপী divসাদা জায়গাও দখল করা উচিত।

---

এই প্রশ্নের অনুরূপ: ডিভিটি কীভাবে অবশিষ্ট উচ্চতা দখল করবেন?

তবে আমি অবস্থানকে নিখুঁত দিতে চাই না ।

Comments

আমি দ্বিতীয় সন্তানের উচ্চতা 100% দেওয়ার চেষ্টা করেছিলাম কিন্তু কাজ করে না: jsfiddle.net/S8g4E/1

— আলভারো

Answer 1

সম্প্রসারিত #downসন্তানের অবশিষ্ট স্থান পূরণ করার জন্য #containerব্রাউজার সমর্থনের আপনি অর্জন কিনা করতে ইচ্ছুক তার উপর নির্ভর করে বিভিন্ন উপায়ে মাধ্যমে এটি করা সম্ভব #upএকটি নির্ধারিত উচ্চতা হয়েছে।

নমুনা

.container {
  width: 100px;
  height: 300px;
  border: 1px solid red;
  float: left;
}
.up {
  background: green;
}
.down {
  background: pink;
}
.grid.container {
  display: grid;
  grid-template-rows: 100px;
}
.flexbox.container {
  display: flex;
  flex-direction: column;
}
.flexbox.container .down {
  flex-grow: 1;
}
.calc .up {
  height: 100px;
}
.calc .down {
  height: calc(100% - 100px);
}
.overflow.container {
  overflow: hidden;
}
.overflow .down {
  height: 100%;
}

<div class="grid container">
  <div class="up">grid
    <br />grid
    <br />grid
    <br />
  </div>
  <div class="down">grid
    <br />grid
    <br />grid
    <br />
  </div>
</div>
<div class="flexbox container">
  <div class="up">flexbox
    <br />flexbox
    <br />flexbox
    <br />
  </div>
  <div class="down">flexbox
    <br />flexbox
    <br />flexbox
    <br />
  </div>
</div>
<div class="calc container">
  <div class="up">calc
    <br />calc
    <br />calc
    <br />
  </div>
  <div class="down">calc
    <br />calc
    <br />calc
    <br />
  </div>
</div>
<div class="overflow container">
  <div class="up">overflow
    <br />overflow
    <br />overflow
    <br />
  </div>
  <div class="down">overflow
    <br />overflow
    <br />overflow
    <br />
  </div>
</div>

গ্রিড

সিএসএসের gridবিন্যাসটি আরও একটি বিকল্প প্রস্তাব করে, যদিও এটি ফ্লেক্সবক্স মডেলের মতো সোজা নাও হতে পারে। তবে এটির জন্য কেবল ধারক উপাদানটির স্টাইলিং প্রয়োজন:

.container { display: grid; grid-template-rows: 100px }

grid-template-rowsএকটি নির্দিষ্ট 100px উচ্চতা হিসেবে প্রথম সারি সংজ্ঞায়িত, এবং থাকা সারি স্বয়ংক্রিয়ভাবে অবশিষ্ট স্থান পূরণ করার জন্য প্রসারিত হবে।

আমি নিশ্চিত যে আই 11 এর -ms-উপসর্গ প্রয়োজন , তাই আপনি সমর্থন করতে চান এমন ব্রাউজারগুলিতে কার্যকারিতাটি বৈধতা নিশ্চিত করে নিন।

flexbox

সিএসএস 3 এর ফ্লেক্সিবল বক্স লেআউট মডিউল ( flexbox) এখন ভাল-সমর্থিত এবং কার্যকর করা খুব সহজ হতে পারে। কারণ এটি নমনীয়, এমনকি এটি যখন কাজ করে যখন #upএকটি সংজ্ঞায়িত উচ্চতা না থাকে works

#container { display: flex; flex-direction: column; }
#down { flex-grow: 1; }

এটি লক্ষণীয় গুরুত্বপূর্ণ যে কিছু ফ্লেক্সবক্স বৈশিষ্ট্যের জন্য আইই 10 এবং আই 1111 সমর্থনটি বগি হতে পারে এবং আই 9 বা তার নীচে কোনও সমর্থন নেই।

গণনা উচ্চতা

আর একটি সহজ সমাধান হ'ল সিএসএস 3calc ফাংশনাল ইউনিট ব্যবহার করা , যেমন আলভারো তার উত্তরে উল্লেখ করেছে তবে এটি প্রথম সন্তানের উচ্চতা একটি জ্ঞাত মান হতে হবে:

#up { height: 100px; }
#down { height: calc( 100% - 100px ); }

এটি বেশ বিস্তৃতভাবে সমর্থিত, কেবলমাত্র উল্লেখযোগ্য ব্যতিক্রমগুলি <= আইই 8 বা সাফারি 5 (কোনও সমর্থন নেই) এবং আই 9 (আংশিক সমর্থন) রয়েছে। রূপান্তর বা বাক্স-ছায়ার সাথে একত্রে ক্যালক ব্যবহার করে কিছু অন্যান্য ইস্যু অন্তর্ভুক্ত থাকে , তাই যদি এটি আপনার উদ্বেগের হয় তবে একাধিক ব্রাউজারে পরীক্ষা করে নিশ্চিত হন।

অন্যান্য বিকল্প

যদি পুরানো সহায়তার প্রয়োজন হয় তবে height:100%;আপনি #downএকটি ক্যাভ্যাট সহ গোলাপী ডিভ পূর্ণ উচ্চতা তৈরি করতে পারবেন। এটি ধারকটির পক্ষে উপচে পড়বে, কারণ #upএটি এটিকে নীচে চাপছে।

অতএব, আপনি overflow: hidden;এটি ঠিক করতে পাত্রে যুক্ত করতে পারেন ।

বিকল্পভাবে, যদি উচ্চতা #upস্থির হয় তবে আপনি একে একে ধারকটির মধ্যে একেবারে স্থাপন করতে এবং এতে একটি প্যাডিং-টপ যুক্ত করতে পারেন #down।

এবং, অন্য একটি বিকল্পটি একটি টেবিল প্রদর্শন ব্যবহার করা হবে:

#container { width: 300px; height: 300px; border: 1px solid red; display: table;}
#up { background: green; display: table-row; height: 0; }
#down { background: pink; display: table-row;}​

Comments

আমি চাই # নীচে # কনটেইনার উচ্চতা - # উচ্চতা সুতরাং ওভারফ্লো লুকানো যা আমি খুঁজছি তা নয়। এবং নিখুঁত অবস্থান ব্যবহার করতে চান না। ধন্যবাদ!

— আলভারো

@ আলভারো, আমি অন্য বিকল্প যুক্ত করেছি, টেবিল প্রদর্শনগুলি ব্যবহার করে। অসুবিধাগুলি এখানে সামঞ্জস্যতা। পিএস উপাদান একটি কনটেইনারটির ভিতরে একেবারে position: relative;অবস্থান করে যা এটি ধারকটির সাথে সম্পর্কিত, উইন্ডো নয় not সুতরাং, এটি একটি কার্যকর বিকল্প হতে হবে।

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

সারণী-সারিটি আপনার জন্য কাজ করা উচিত, প্রমাণের জন্য এই jsFizz দেখুন । অবস্থানের নিখুঁত পদ্ধতি, এই ঝাঁকুনির মতো একই ফল দিতে সক্ষম হবে না, তাই আমরা তালিকাটি স্ক্র্যাচ করতে পারি (# ডাউন এবং # কনটেনারের সেই দৃশ্যে একই উচ্চতা থাকবে)।

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

আপনি অনেক জিজ্ঞাসা করছেন, @ আলভারো। সিএসএস কোনও স্ক্রিপ্টিং ভাষা নয়; এটি স্টাফ গণনা করতে পারে না। আপনি মায়া বা জেএস এর সাথে আটকে আছেন।

— জেজেন টমাস

@ কোয়ান্টাস্টিকাল, আপনার সহায়তার জন্য ধন্যবাদ, তবে আপনার সর্বশেষ সম্পাদনায় আপনি পোস্ট করা উত্তরটি অনুলিপি করেছেন। এটি সম্পর্কে কিছু উল্লেখ কমপক্ষে সুন্দর হবে।

— আলভারো

Answer 2

আমি এই প্রশ্নটি জিজ্ঞাসা করে প্রায় দুই বছর হয়ে গেছে been আমি স্রেফ সিএসএস ক্যালক নিয়ে এসেছি (যা আমার এই সমস্যাটি সমাধান করে এবং ভেবেছিল যে কারও যদি একই সমস্যা হয় তবে এটি যুক্ত করা ভাল হবে। (উপায় দ্বারা আমি পজিশন পরম ব্যবহার করে শেষ করেছি)।

http://jsfiddle.net/S8g4E/955/

এখানে সিএসএস

#up { height:80px;}
#down {
    height: calc(100% - 80px);//The upper div needs to have a fixed height, 80px in this case.
}

এবং এটি সম্পর্কে আরও তথ্য এখানে: http://css-tricks.com/a-couple-of-use-cases-for-calc/

ব্রাউজার সমর্থন: http://caniuse.com/#feat=calc

Comments

আমিও সিএসএস 3 ব্যবহার করছি calcযেখানে প্রশস্ত ব্রাউজার সমর্থন যেমন গুরুত্বপূর্ণ নয় (আই 8 এবং নীচে এবং সাফারি 5 এটি সমর্থন করে না)।

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

গতিশীল #upউচ্চতার সাথে একই রকম করার কোনও উপায় ?

— অ্যাডাম ওয়েট

@ অ্যাডামওয়েট, একটি গতিশীল # আপ উচ্চতা সহ, আপনি অন্য উত্তরে বর্ণিত ওভারফ্লো সমাধানটি ব্যবহার করতে চাইবেন।

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

Answer 3

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

এইচটিএমএল

<div id="container">
    <div id="up">Text<br />Text<br />Text<br /></div>
    <div id="down">Text<br />Text<br />Text<br /></div>
</div>

CSS

#container { width: 300px; height: 300px; border:1px solid red;}
#up { background: green; height: 63px; float:left; width: 100% }
#down { background:pink; padding-top: 63px; height: 100%; box-sizing: border-box; }

http://jsfiddle.net/S8g4E/288/

Answer 4

ডেমোটি দেখুন - http://jsfiddle.net/S8g4E/6/

সিএসএস ব্যবহার করুন -

#container { width: 300px; height: 300px; border:1px solid red; display: table;}
#up { background: green; display: table-row; }
#down { background:pink; display: table-row;}

Comments

এটি সর্বনিম্ন উচ্চতার পরিমাণ নেয় তা নিশ্চিত height: 1pxকরতে #upআপনার যুক্ত করা উচিত । এখানে ব্রাউজার সমর্থন রয়েছে display: table: caniuse.com/css-table

— ত্রিশটট

আপনি কী আমাকে দয়া করে এই "আরও জটিল" উদাহরণে কীভাবে সমাধানটি অর্জন করতে পারেন দয়া করে: jsfiddle.net/fyNX4 আপনাকে অনেক ধন্যবাদ

— আলভারো

Answer 5

আমি যদি ভুল বুঝা করছি, আপনি শুধু যোগ করতে পারেন height: 100%;এবং overflow:hidden;করতে #down।

#down { 
    background:pink; 
    height:100%; 
    overflow:hidden;
}​

সরাসরি নমুনা

সম্পাদনা: যেহেতু আপনি ব্যবহার করতে চান না overflow:hidden;, আপনি display: table;এই দৃশ্যের জন্য ব্যবহার করতে পারেন ; তবে এটি IE 8 এর আগে সমর্থিত নয় ( display: table;সমর্থন )

#container { 
    width: 300px; 
    height: 300px; 
    border:1px solid red;
    display:table;
}

#up { 
    background: green;
    display:table-row;
    height:0; 
}

#down { 
    background:pink;
    display:table-row;
}​

সরাসরি নমুনা

দ্রষ্টব্য: আপনি বলেছেন যে আপনি #downউচ্চতাটি #containerউচ্চতা বিয়োগের #upউচ্চতা হতে চান । display:table;সমাধান ঠিক আছে এবং এই jsfiddle যে বেশ পরিষ্কারভাবে ভাষায় বর্ণনা করা হবে।

Comments

আমি # কন্টেইনার উচ্চতা ছাড়িয়ে # ডাউন চাই না

— আলভারো

আমি সবেমাত্র লক্ষ্য করেছি। overflow:hiddenঅতিরিক্ত সামগ্রী লুকানোর জন্য আপনি যোগ করতে পারেন।

— জোশ মেইন

আমি মিঃস্লেয়ারকে যা বলেছিলাম তা অনুলিপি / পেস্ট করব: আমি চাই # নীচে # কনটেইনার উচ্চতা - # উচ্চতা। সুতরাং ওভারফ্লো লুকানো যা আমি খুঁজছি তা নয়। এবং নিখুঁত অবস্থান ব্যবহার করতে চান না। ধন্যবাদ!

— আলভারো

এটির সাথে সমস্যাটি হ'ল যদি আপনি আপনার উদাহরণে দুটি ডিভগুলি ফিরিয়ে দেন তবে সবুজ ডিভ বাইরে।

— CED

এটি প্রশ্নের কোনও উত্তর দেয় না। এটিতে "বাকি সমস্ত উচ্চতা দখল করতে" বলা আছে, ইভেন্টটি যদিও এটি বাকি সমস্ত উচ্চতা দখল করে, সেখানে উপচে পড়া হবে।

— গিরিধর করণিক

Answer 6

আপনি কন্টেন্ট নিচে ঠেলাঠেলি জন্য ব্যবহার করতে পারেন:

http://jsfiddle.net/S8g4E/5/

আপনার একটি স্থির আকারের ধারক রয়েছে:

#container {
    width: 300px; height: 300px;
}

সামগ্রীতে একটি ভাসমানের পাশের প্রবাহের অনুমতি দেওয়া হয়। যতক্ষণ না আমরা ফ্লোটটি পুরো প্রস্থে সেট করি:

#up {
    float: left;
    width: 100%;
}

শীর্ষ অবস্থানটি ভাগ করার সময় #upএবং #downভাগ করার সময় , #downএর সামগ্রীগুলি কেবল ভাসমান নীচের অংশের পরে শুরু হতে পারে #up:

#down {
    height:100%;
}​

Comments

নোট করুন যে #upআসলে এর উপরের অংশটি কভার করেছে #down: jsfiddle.net/thirtydot/S8g4E/9

— ত্রিশটট

হ্যাঁ, এটি কিভাবে কাজ করে। তবে যদি ওপিকে একটি বৃত্তাকার সীমানা বা অন্য কোনও অভিনবতার প্রয়োজন না হয় #up, তবে এটি সম্ভবত গ্রহণযোগ্য is

— বিজিক্লপ

এই সমাধানটি নিকটে, তবে আমি # নীচে # কনটেইনার উচ্চতা - # উচ্চতা চাই। (আপনার সমাধানে # ডাউন উচ্চতা = # কনটেইনার উচ্চতা)। ধন্যবাদ '

— আলভারো

@ আলভারো: কেন এমন হওয়া দরকার? এই সমাধানটি বেশিরভাগ ক্ষেত্রে সঠিক দেখায় , এমনকি যদি এটি কেবল একটি মায়া হয়।

— ত্রিশডট

ঠিক আছে, এই প্রশ্নটি আরও জটিল "উদাহরণ" থেকে সরল উদাহরণ: jsfiddle.net/fyNX4 কাজ করবে না, না?

— আলভারো

Answer 7

বিমূর্ত

আমি একটি সম্পূর্ণ সন্তুষ্ট উত্তর খুঁজে পাইনি তাই আমাকে এটি নিজেরাই খুঁজে বের করতে হয়েছিল।

আমার প্রয়োজনীয়তা:

• উপাদান গ্রহণ করা উচিত ঠিক অবশিষ্ট স্থান পারেন যখন তার বিষয়বস্তু আকার হয় ছোট বা বড় চেয়ে অবশিষ্ট স্থান আকার (দ্বিতীয় ক্ষেত্রে স্ক্রলবার উচিত প্রদর্শন করা );
• যখন পিতামাতার উচ্চতা গণনা করা হয় , এবং নির্দিষ্ট না করা হয় তখন সমাধানটি কাজ করা উচিত ;
• calc()অবশিষ্ট উপাদানটি অন্য উপাদান মাপ সম্পর্কে কিছু না জানা উচিত হিসাবে ব্যবহার করা উচিত নয় ;
• আধুনিক এবং ফ্যামিলার লেআউট কৌশল যেমন ফ্লেক্সবক্সগুলি ব্যবহার করা উচিত।

---

সমাধান

• গণিত উচ্চতা (যদি থাকে) এবং পরবর্তী পিতামাতার উচ্চতা নির্দিষ্ট করা আছে এমন সমস্ত প্রত্যক্ষ পিতামাতাকে ফ্লেক্সবক্সে পরিণত করুন ;
• নির্দিষ্ট করুন flex-grow: 1থেকে নির্ণিত উচ্চতা (যদি থাকে) সঙ্গে সব সরাসরি বাবা এবং উপাদান যাতে তারা সব অবশিষ্ট জায়গা নিয়ে যখন উপাদান বিষয়বস্তু আকার ছোট হয়;
• নির্দিষ্ট করুন flex-shrink: 0থেকে সংশোধন করা হয়েছে উচ্চতার সঙ্গে সঙ্গে সব আনমন আইটেম যাতে তারা ছোট যখন উপাদান বিষয়বস্তু আকার অবশিষ্ট স্থান আকার চেয়ে বড় না হয়ে হবে;
• নির্দিষ্ট করুন overflow: hiddenথেকে নির্ণিত উচ্চতার সঙ্গে সঙ্গে সব সরাসরি বাবা (যদি থাকে) নিষ্ক্রিয় স্ক্রলিং এবং ওভারফ্লো বিষয়বস্তু প্রদর্শন করার নিষেধ;
• নির্দিষ্ট করুন overflow: autoথেকে উপাদান এটা ভিতরে স্ক্রলিং সক্রিয়।

---

জেএসফিডাল (উপাদানটির গণনা উচ্চতা সহ প্রত্যক্ষ পিতামাতা রয়েছে)

জেএসফিডেল (সাধারণ কেস: গণিত উচ্চতা সহ কোনও সরাসরি পিতামাতা নেই)

Answer 8

আমি নিশ্চিত নই যে এটি সিএসএসের সাথে খাঁটিভাবে করা সম্ভব, যদি না আপনি এটিকে বিভ্রান্তির সাথে জাল দেওয়ার ক্ষেত্রে স্বাচ্ছন্দ্য বোধ করেন। হতে পারে জোশ মেইনের উত্তরটি ব্যবহার করুন এবং সেট #containerকরুন overflow:hidden।

এটি মূল্যবান কিসের জন্য, এখানে একটি jQuery সমাধান:

var contH = $('#container').height(),
upH = $('#up').height();
$('#down').css('height' , contH - upH);

Comments

ধন্যবাদ আমি একটি খাঁটি সিএসএস সমাধান খুঁজছিলাম।

— আলভারো