ন্যূনতম উচ্চতা সহ পিতামাতার অভ্যন্তরে শিশু: উচ্চতর উত্তরাধিকারসূত্রে নয়

Question

আমি কোনও পৃষ্ঠার কমপক্ষে পুরো উচ্চতা নির্ধারণের জন্য ডিভ ধারক করার একটি উপায় খুঁজে পেয়েছি min-height: 100%;। যাইহোক, আমি যখন নেস্টেড ডিভ যুক্ত করি এবং সেট করি তখন height: 100%;এটি ধারকের উচ্চতায় প্রসারিত হয় না। এটা ঠিক করার জন্য একটি উপায় আছে কি?

html, body {
  height: 100%;
  margin: 0;
}

#containment {
  min-height: 100%;
  background: pink;
}

#containment-shadow-left {
  height: 100%;
  background: aqua;
}

<div id="containment">
  <div id="containment-shadow-left">
    Hello World!
  </div>
</div>

Comments

আধুনিক দিনের সমাধান: ধারকটি দিন display:flexএবং flex-direction:columnশিশুটিকে দিন flex:1।

— jackocnr

@ জ্যাকোকনার এটি কোনও বাগের কারণে কোনও আইইতে কাজ করে না , এটি এজতে স্থির হয়েছিল।

— স্টিকাররা

Answer 1

এটি একটি প্রতিবেদিত ওয়েবকিট (ক্রোম / সাফারি) বাগ, ন্যূনতম উচ্চতা সম্পন্ন পিতামাতার ছেলেরা উচ্চতার সম্পত্তিটির উত্তরাধিকারী হতে পারে না: https://bugs.webkit.org/show_bug.cgi?id=26559

স্পষ্টতই ফায়ারফক্স প্রভাবিত হয়েছে (এই মুহুর্তে IE তে পরীক্ষা করতে পারে না)

সম্ভাব্য কাজ:

• অবস্থান যুক্ত করুন: # নিয়ন্ত্রণের সাথে আপেক্ষিক
• অবস্থান যুক্ত করুন: সম্পূর্ণ # কন্টেন্টমেন্ট-শ্যাডো-বামে

অভ্যন্তরীণ উপাদানটির পরম অবস্থান থাকলে বাগটি প্রদর্শন করা হয় না।

Http://jsfiddle.net/xrebB/ দেখুন

এপ্রিল 10, 2014 এ সম্পাদনা করুন

যেহেতু আমি বর্তমানে এমন একটি প্রকল্পে কাজ করছি যার জন্য আমার সত্যিই পিতামাতার min-heightপাতাগুলি এবং ধারকটির উচ্চতা উত্তরাধিকার সূত্রে প্রাপ্ত শিশু উপাদানগুলির প্রয়োজন তাই আমি আরও কিছু গবেষণা করেছি।

প্রথম: বর্তমান ব্রাউজারের আচরণটি আসলেই কোনও বাগ কিনা সে বিষয়ে আমি আর নিশ্চিত নই। CSS2.1 চশমা বলে:

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

আমি যদি আমার ধারকটিতে একটি মিনিট উচ্চতা রাখি তবে আমি স্পষ্টভাবে এর উচ্চতা নির্দিষ্ট করে দিচ্ছি না - তাই আমার উপাদানটির autoউচ্চতা হওয়া উচিত । এবং ওয়েবকিট - এবং অন্যান্য সমস্ত ব্রাউজারগুলি ঠিক এটিই করে।

দ্বিতীয়ত, আমি যে কার্যকারিতাটি পেয়েছি:

যদি আমি এটির display:tableসাথে আমার ধারক উপাদানটি সেট করি height:inheritতবে ঠিক একইভাবে কাজ করে যদি আমি এটির min-height100% দিতে পারি । এবং - আরও গুরুত্বপূর্ণ বিষয় - যদি আমি সন্তানের উপাদানটিকে display:table-cellএটিতে সেট করি তবে এটি ধারক উপাদানটির উচ্চতার পুরোপুরি উত্তরাধিকারী হবে - এটি 100% বা তার বেশি হোক।

সম্পূর্ণ সিএসএস:

html, body {
  height: 100%;
  margin: 0;
}

#container {
  background: green;
  display: table;
  height: inherit;
  width: 100%;
}

#content {
  background: red;
  display: table-cell;
}

মার্কআপ:

<div id="container">
  <div id="content">
      <p>content</p>
  </div>
</div>

Http://jsfiddle.net/xrebB/54/ দেখুন ।

Comments

ম্যান, এটি এখনও স্থির নয়: এস

— মার্তিয়ে ব্রিডিস

হ্যাঁ, এটি নয় - আমি দেখছি কয়েকটি প্যাচ রয়েছে তবে ক্রোম 29 হিসাবে এটি এখনও প্রত্যাশিত আচরণ প্রদর্শন করছে না। তবে এটি ফায়ারফক্স 23, আইই 10, সাফারি 5 বা অপেরা 12 তে কাজ করে না। কমপক্ষে সমস্ত ব্রাউজার সম্মত হন ...

— পল ডি অস্ট

কমপক্ষে / সর্বোচ্চ-উচ্চতাটি সুস্পষ্ট নয় ... এবং আশ্চর্যের দ্বারা আমার অর্থ ভুল। পুরো অনুচ্ছেদটি পড়া, প্রসঙ্গে, এই ব্যাখ্যাটি ভুল। "প্রচ্ছদযুক্ত ব্লকের উচ্চতা" কেন স্পষ্ট করে তা বোঝাতে, উচ্চতার সম্পত্তিটির পরে শব্দার্থগতভাবে আলাদা। পরিবর্তে যদি বাক্যটি হ'ল "ধারণকৃত ব্লকের উচ্চতা সম্পত্তি " হয় তবে আপনার ব্যাখ্যার অর্থটি হবে (এবং চশমাটিতে একটি বাগ হতে পারে)।

— WraithKenny

এটি 2019. আমরা এই বাগের 10 বছরের বার্ষিকী মিস করেছি। এই ফ্লেক্স সলিউশনটি

— ইলিয়া চেরনভ

আমি লকডাউন যুগ থেকে এসেছি

— ডেভিড কলানান

Answer 2

যোগ height: 1pxপিতা বা মাতা ধারক করতে। ক্রোম, এফএফ, সাফারিতে কাজ করে।

Comments

এটি করা সমস্যার সমাধান করে না, কার্যকরভাবে আপনি ন্যূনতম উচ্চতাকে ছাড়িয়ে যাচ্ছেন: 100% সেটিংস যা উচ্চতার সাথে অর্জন করা যায় না এমন কিছুই অর্জন করে না: 100% যা ওপি চায় না

— স্টাইলার

@ স্টাইলার যুক্ত করা height: 1px;ন্যূনতম উচ্চতায় ওভাররাইড করবে না। পুরোপুরি বিপরীত. এটি এখানে সেরা সমাধান ... ডেমো: jsbin.com/mosaboyo/1/edit

— জেনজেজ

কেন height: 1px;কাজ করে তার জন্য দেখুন দেখুন স্ট্যাকওভারফ্লো.com

— বেন আলাভি

@jjenzz এটি নিয়ে সমস্যাটি, যা আমি মনে করি স্টাইলার চেষ্টা করার চেষ্টা করছিল তা হ'ল এটি এর প্রসারিত বৈশিষ্ট্য ধরে রাখে না min-height। উদাহরণস্বরূপ, পর্যাপ্ত পাঠ্য থাকলে তা উপচে পড়বে। দেখুন jsbin.com/vuyapitizo/1

— binaryfunt

নীচে পলের মন্তব্যের উদ্ধৃতি দিয়ে: "তবে এটি ধারকটি বাড়তে দেয় না, যা ন্যূনতম উচ্চতা ব্যবহারের উদ্দেশ্যকে পরাস্ত করে।" stackoverflow.com/questions/8468066/…

— লিও লেই

Answer 3

ভেবেছিলাম আমি এটি ভাগ করে নেব, যেহেতু আমি এটি কোথাও দেখিনি, এবং এটিই আমার সমাধানটি স্থির করতে ব্যবহৃত হয়েছিল।

সমাধান :min-height: inherit;

আমার একটি নির্দিষ্ট ন্যূনতম উচ্চতা সহ একটি পিতা বা মাতা ছিলেন এবং সেই উচ্চতাটিও আমার হতে হবে child

.parent {
  min-height: 300px;
  background-color: rgba(255,255,0,0.5); //yellow
}

.child {
  min-height: inherit;
  background-color: rgba(0,255,0,0.5); //blue
}

p {
  padding: 20px;
  color: red;
  font-family: sans-serif;
  font-weight: bold;
  text-align: center;
}

<div class="parent">
  <div class="child">
    <p>Yellow + Blue = Green :)</p>
  </div>
</div>

এভাবে শিশু এখন ন্যূনতম উচ্চতার 100% উচ্চতা হিসাবে কাজ করে।

আমি আশা করি কিছু লোক এটি দরকারী খুঁজে পেয়েছেন :)

Comments

আংশিকভাবে কাজ করে, তবে শিশু কেবলমাত্র উত্তরাধিকার সূত্রে পায় min-height। যখন পিতামাতার উচ্চতা বড় হয়, সন্তানের প্রসার ঘটে না।

— ওগুজগেলাল

আপনি আমার জীবন বাঁচিয়েছেন

— ক্যাসেমিয়া

এটি কেবল তখনই কার্যকর হয় যখন ন্যূনতম-উচ্চতাটি সম্পূর্ণ নয়, শতাংশ নয়, আফ্রিক্স IC

— বেনিয়ামিন

পিতামাতার ভিএইচ মান থাকলে এটিও সূক্ষ্মভাবে কাজ করে! ধন্যবাদ!

— user1658080

প্রতিটি পরিস্থিতির জন্য উপযুক্ত নয় তবে মাঝে মাঝে খুব সহায়ক। ধন্যবাদ!

— ব্ল্যাকব্যাম

Answer 4

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

এটি অভ্যন্তরীণ উপাদানটিকে খুব কম পরিমাণে পুরো পাত্রে ভরাট করে তোলে, তবে ধারকটির উচ্চতাটি যদি খুব বড় হয় তবে প্রসারিত করে।

#containment {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

#containment-shadow-left {
  flex: 1;
}

Comments

এটি সেরা কারণ যেহেতু ফ্লেক্সবক্স ব্যাপকভাবে সামঞ্জস্যপূর্ণ।

— হোসে কার্লোস রামরেজ ভাস্কেজ

Answer 5

কুশাগ্রা গুর এর সমাধান কাজ করে (কমপক্ষে ক্রোম এবং আইই তে) এবং ব্যবহার না করে display: table;এবং আসল সমস্যাটি সমাধান করে display: table-cell;। প্লাঙ্কার দেখুন: http://plnkr.co/edit/ULEgY1FDCsk8yiRTfOWU

min-height: 100%; height: 1px;বাইরের ডিভিতে সেট করার কারণে এটির যথাযথ উচ্চতা কমপক্ষে 100% হওয়া প্রয়োজন causes এটি অভ্যন্তরীণ ডিভকে সঠিকভাবে উচ্চতার উত্তরাধিকারী করার অনুমতি দেয়।

Comments

তবে এটি ধারকটি বাড়তে দেয় না, যা ন্যূনতম উচ্চতা ব্যবহারের উদ্দেশ্যকে পরাস্ত করে।

— সাল

পিতা-মাতার ন্যূনতম উচ্চতা এবং উচ্চতাও পূরণ করার জন্য আমার একটি মোড়কের দরকার ছিল। আমার পক্ষে যা কাজ করেছে তা হ'ল উত্তরাধিকারের জন্য ন্যূনতম উচ্চতা এবং উচ্চতাটি 100% এ সেট করে।

— মিঃ ডুহার্ট

Answer 6

বিদ্যমান উত্তরগুলি ছাড়াও, vhব্যবহারের জন্য ভিউপোর্ট ইউনিটও রয়েছে । নীচে সরল স্নিপেট। অবশ্যই এটি calc()পাশাপাশি একসাথে ব্যবহার করা যেতে পারে , উদাহরণস্বরূপ min-height: calc(100vh - 200px);যখন পৃষ্ঠা শিরোনাম এবং পাদলেখ এক সাথে 200pxউচ্চতা থাকে।

body {
  margin: 0;
}

.child {
  min-height: 100vh;
  background: pink;
}

<div class="parent">
  <div class="child"></div>
</div>

Answer 7

আমি বিশ্বাস করি না এটি ব্রাউজারগুলির সাথে একটি বাগ is সকলেই একইরকম আচরণ করে - এটি হল আপনি একবার স্পষ্ট উচ্চতা নির্দিষ্টকরণ বন্ধ করে দিলে ন্যূনতম উচ্চতা মূলত একটি "শেষ পদক্ষেপ"।

এটি সিএসএস ২.১ অনুমানের ঠিক যেমনটি প্রস্তাবিত হয়েছে তা হ'ল: http://www.w3.org/TR/CSS2/visudet.html#the- উচ্চতা- প্রপার্টি

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

অতএব, min-heightপিতামাতার একটি সুস্পষ্ট heightসম্পত্তি সেট না থাকায় এটি অটোতে ডিফল্ট হয়।

display: table-cellআপনার টার্গেট শ্রোতাদের ব্রাউজারগুলির পক্ষে যদি এটি সম্ভব হয় তবে এটি প্রায়শই কিছু উপায় বা নতুন স্টাইল যেমন ফ্লেক্সবক্স ব্যবহার করে ব্যবহার করতে পারেন। আপনি একে একে নির্দিষ্ট অবস্থানে থাকা অভ্যন্তরীণ উপাদানগুলির বৈশিষ্ট্য topএবং bottomবৈশিষ্ট্যগুলি ব্যবহার করে নির্দিষ্ট পরিস্থিতিতেও এটি বিকৃত করতে পারেন , যা আপনাকে নির্দিষ্ট না করে 100% উচ্চতা দেয়।

Answer 8

যদিও display: flex;এখানে পরামর্শ দেওয়া হয়েছে, display: grid;এখন এটি ব্যবহার করার বিষয়টি বিবেচনা করুন যা এটি ব্যাপকভাবে সমর্থিত । ডিফল্টরূপে, গ্রিডের একমাত্র সন্তান পুরোপুরি তার পিতামাতাকে পূরণ করবে।

html, body {
  height: 100%;
  margin: 0;
  padding: 0; /* Don't forget Safari */
}

#containment {
  display: grid;
  min-height: 100%;
  background: pink;
}

#containment-shadow-left {
  background: aqua;
}

Answer 9

গুগলারের জন্য:

এই jquery-workaround # নিয়ন্ত্রণটিকে স্বয়ংক্রিয়ভাবে একটি উচ্চতা পেতে (দ্বারা, উচ্চতা: অটো) করে তোলে, তারপরে পিক্সেল মান হিসাবে নির্ধারিত প্রকৃত উচ্চতা পায়।

<script type="text/javascript">
<!--
    $(function () {

        // workaround for webkit-bug http://stackoverflow.com/a/8468131/348841

        var rz = function () {
            $('#containment')
            .css('height', 'auto')
            .css('height', $('#containment').height() + 'px');
        };

        $(window).resize(function () {
            rz();
        });

        rz();

    })
-->
</script>

Comments

চমৎকার কাজ, আপনি উচ্চতা 'অটো' তে সেট না করেই কেবলমাত্র উপাদানের ন্যূনতম উচ্চতা নির্ধারণ করতে পারেন। এটা আমার জন্য কাজ করেছে।

— সালভাতোর জাপ্পাল

Answer 10

আজকাল এটি অর্জনের সর্বোত্তম উপায় হ'ল ব্যবহার করা display: flex;। আইই 11 সমর্থন করার চেষ্টা করার সময় আপনি কোনও সমস্যা হতে পারে। ফ্লেক্সবক্স ব্যবহার করে https://caniuse.com অনুসারে :

ন্যূনতম-উচ্চতা ব্যবহার করা হয় তখন আইই 11 সঠিকভাবে আইটেমগুলিকে সঠিকভাবে সারিবদ্ধ করে না

ইন্টারনেট এক্সপ্লোরার সামঞ্জস্যপূর্ণ সমাধান

সমাধানটি display: table;পিতামাতার এবং display: table-row;সন্তানের উভয়ের height: 100%;প্রতিস্থাপন হিসাবে ব্যবহার করা min-height: 100%;।

সমাধান অধিকাংশই এখানে ব্যবহার ক্লিক display: table, table-rowএবং / অথবা table-cell, কিন্তু তারা একই আচরণ প্রতিলিপি নাই যেমন min-height: 100%;, যা:

• পিতামাতার গণিত উচ্চতা উত্তরাধিকারী (তার heightসম্পত্তি উত্তরাধিকার সূত্রে বিপরীতে );
• পিতামাতার উচ্চতা এটির ছাড়িয়ে যাওয়ার অনুমতি দিন min-height;

এই সমাধানটি ব্যবহার করার সময়, আচরণটি একই রকম এবং সম্পত্তিটির min-heightপ্রয়োজন নেই যা বাগের চারপাশে যাওয়ার অনুমতি দেয়।

ব্যাখ্যা

এটি কাজ করার কারণ হ'ল বেশিরভাগ উপাদানগুলির থেকে ভিন্ন, উপাদান ব্যবহার করা display: tableএবং table-rowসর্বদা তাদের সামগ্রী হিসাবে লম্বা থাকে। এটি তাদের heightসম্পত্তি অনুরূপ আচরণ করে min-height।

কর্মের সমাধান

html, body {
  height: 100px;
  margin: 0;
}

#containment {
  display: table;
  height: 100%;
  background: pink;
  width: 100%;
}

#containment-shadow-left {
  display: table-row;
  height: 100%;
  background: aqua;
}

#content {
  padding: 15px;
}

#demo {
  display: none;
  background-color: red;
  height: 200px;
}

#demo-checkbox:checked ~ #demo {
  display: block;
}

<div id="containment">
  <div id="containment-shadow-left">
    <div id="content">
      <input id="demo-checkbox" type="checkbox">
      <label for="demo-checkbox">Click here for overflow demo</label>
      <div id="demo">This is taller than #containment</div>
    </div>
  </div>
</div>

Answer 11

আর একটি জেএস সমাধান, এটি সহজ এবং একটি অ-সহজ সিএসএস-কেবল বা অতিরিক্ত মার্কআপ / হ্যাকি সমাধান এড়াতে ব্যবহার করা যেতে পারে।

function minHeight(elm, percent) {
  var windowHeight = isNaN(window.innerHeight) ? 
                     window.clientHeight : window.innerHeight;
  var height = windowHeight * percent / 100;
  elm.style.minHeight = height + 'px';
}

ডাব্লু / জিকুয়েরি:

function minHeight($elm, percent) {
  var windowHeight = $(window).height();
  var height = windowHeight * percent / 100;
  $elm.css('min-height', height + 'px');
}

কৌণিক নির্দেশ:

myModule.directive('minHeight', ['$window', function($window) {
  return {
    restrict: 'A',
    link: function(scope, elm, attrs) {
      var windowHeight = isNaN($window.innerHeight) ? 
               $window.clientHeight : $window.innerHeight;
      var height = windowHeight * attrs.minHeight / 100;
      elm.css('min-height', height + 'px');
    }
  };
}]);

এটির মতো ব্যবহার করতে:

<div>
  <!-- height auto here -->
  <div min-height="100">
    <!-- This guy is at least 100% of window height but grows if needed -->
  </div>
</div>

Comments

নির্দেশিক সমাধানের জন্য ধন্যবাদ। এটিই আমি ব্যবহার করে শেষ করেছি তবে আমি উইন্ডোর উচ্চতা নূন্যতম হতে চাইনি; বরং আমি পিতামাতার ন্যূনতম উচ্চতার উত্তরাধিকারী হতে চেয়েছিলাম তাই আমি কোডটি এতে পরিবর্তন করেছি: var উচ্চতা = এলম.পিতা () [0] .ফসেটহাইট;

— সাল

Answer 12

এটি সাধারণত আমার পক্ষে কাজ করে:

.parent {
  min-height: 100px;
  background-color: green;
  display: flex;
}
.child {
  height: inherit;
  width: 100%;
  background-color: red;
}

<!DOCTYPE html>
<html>
  <body>
    <div class="parent">
      <div class="child">
      </div>
    </div>
  </body>
</html>

Answer 13

কেবলমাত্র এই বিষয়টিকে সম্পূর্ণ রাখার জন্য, আমি এখানে স্থির অবস্থান ব্যবহার করে একটি সমাধান অন্বেষণ করা হয়নি ।

ওভারফ্লো নেই

html, body, .wrapper, .parent, .child {
  position: fixed;
  top: 0; 
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  height: 100%;
}

.child {
  overflow: auto;
  background: gray;
}

.height-50 {
  height: 50%;
  width: 5em;
  margin: 10px auto;
  background: cyan;
}

<div class="wrapper">
  <div class="parent">
    <div class="child">
      
      <div class="height-50"></div>
      
    </div>
  </div>
</div>

ওভারফ্লো সহ

html, body, .wrapper, .parent, .child {
  position: fixed;
  top: 0; 
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  height: 100%;
}

.child {
  overflow: auto;
  background: gray;
}

.height-150 {
  height: 150%;
  width: 5em;
  margin: 10px auto;
  background: cyan;
}

<div class="wrapper">
  <div class="parent">
    <div class="child">
      
      <div class="height-150"></div>
      
    </div>
  </div>
</div>

Answer 14

শতাংশ-ভিত্তিক উচ্চতা এবং পিতামাতার এখনও বাচ্চাদের উচ্চতা অনুযায়ী বর্ধমান সহ আমার পক্ষে এটি কাজ করে। ফায়ারফক্স, ক্রোম এবং সাফারিতে দুর্দান্ত কাজ করে।

.parent {
  position: relative;
  min-height: 100%;
}

.child {
  min-height: 100vh;
}

<div class="parent">
    <div class="child"></div>
  </div>

Answer 15

আমাদের চেষ্টা করার পরে! ক্রোম বুঝতে পারে যে আমি যখন ইনলাইন ব্লকে প্রদর্শনের মান সেট করি তখন আমি শিশু উপাদানটি 100% উচ্চতা হতে চাই। বিটিডব্লিউ সেটিং ফ্লোট এর কারণ ঘটবে।

display:inline-block

হালনাগাদ

এটি কাজ করছে না। সমাধানটি হল প্যারেন্টনোড অফসেটহাইট পেতে এবং জাভাস্ক্রিপ্ট সহ পৃষ্ঠার এবং পৃষ্ঠায় এটি ব্যবহার করা।

<script>
    SomedivElement = document.getElementById('mydiv');
    SomedivElement.style.height = String(nvleft.parentNode.offsetHeight) + 'px';    
</script>