ডিভের উচ্চতা এর সামগ্রীর সাথে প্রসারিত করুন

376

আমার এই নেস্টেড ডিভগুলি রয়েছে এবং আমার ভিতরে ডিআইভিগুলিকে সামঞ্জস্য করার জন্য প্রস্থের (উচ্চতায়) মূল ধারক প্রয়োজন

    <!-- head -->
    ...
    <!-- /head -->

    <body class="main">
      <div id="container">
        <div id="header">
          <!--series of divs in here, graphic banner etc. -->
        </div>

    <div id="main_content"> <!-- this DIV _should_ stretch to accommodate inner divs -->
      <div id="items_list" class="items_list ui-sortable">
        <div id="item_35" class="item_details">
        </div>
        <div id="item_36" class="item_details">
        </div>        
        <div id="item_37" class="item_details">
        </div>
        <!-- this list of DIVs "item_xx" goes on for a while
             each one representing a photo with name, caption etcetc -->
      </div>
    </div>
    <br class="clear"/>

    <div id="footer">
    </div>
  </body>
</html>

সিএসএস হ'ল:

* {
    padding: 0;
    margin: 0;
}

.main {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background: #4c5462;
    margin: 0; 
    padding: 0;
    text-align: center; 
    color: #000000;
}
.main #container {
    height: auto;
    width: 46em;
    background: #4c5462;
    margin: 0 auto; 
    border: 0px solid #000000;
    text-align: left;       
}

.main #main_content {
    padding: 5px;
    margin: 0px;
}
#items_list {
    width: 400px;
    float: left;
}

.items_list {
    width: 400px;
    float: left;
}
.item_details {
    margin-top: 3px;
    margin-bottom: 3px;
    padding: 3px;
    float: left;
    border-bottom: 0.5px solid blue;
}

আমার সমস্যাটি হ'ল এটি #main_contentসমস্ত অভ্যন্তরীণ ডিভগুলিকে সামঞ্জস্য করতে প্রসারিত করে না, ফলাফলের ফলে তারা পটভূমির বিপরীতে চলে।

উপরের পরিস্থিতি বিবেচনা করে আমি কীভাবে এই সমস্যার সমাধান করতে পারি?

css  height 
— প্যাট্রিক
সূত্র
5
উত্তরগুলি জন্য আপনাকে সবাই ধন্যবাদ! আমার সুনির্দিষ্ট মামলার সর্বোত্তম সমাধান হ'ল উভয় পক্ষকে সাফ করার জন্য একটি বিআর-কে হার্ড-কোড করা (ধন্যবাদ জেনিফোফেনি এবং রাইসোবাল) যাইহোক, অন্যান্য সমাধানগুলিও কাজ করেছে: ওভারফ্লো করা: অটো ঠিক ছিল, এবং ভাসমান # মেইন_ কনটেন্টটিও ঠিক ছিল (যদিও আমি আইআর শিশু ডিভের আকারে ডিভের প্রস্থ হ্রাস করা হয়েছে)। এখন একজন নবাগত হয়ে আমি ভাবছি: এই সমাধানগুলির কি ত্রুটি রয়েছে বা আমি এগুলি উদাসীনভাবে ব্যবহার করতে পারি? (উদাঃ সম্ভবত তাদের মধ্যে কোনও আইই 6, বা একই রকমের সাথে কাজ করে না ...)
— প্যাট্রিক
1
@ পেট্রিক, আপনি যদি আপনার প্রশ্নটি আরও বিকাশ করতে চান তবে 'সম্পাদনা' লিঙ্কটিতে (প্রশ্নের বর্তমান লেখার নীচে) ক্লিক করুন এবং আরও প্রশ্ন যুক্ত করুন। কনভেনশনটি এমন কিছু ব্যবহার করার পরামর্শ দেয় <strong>Edited</strong>$Reason_for_revising_question...যা আপনার ফোকাসে কোনও বড় পরিবর্তন বা সংযোজন ঘটলে পরিবর্তনগুলি প্রতিফলিত করতে আপনার প্রশ্নের শিরোনাম পরিবর্তন করতে হতে পারে। =)
— ডেভিড মনিকা
4
এছাড়াও আপনি কখনোই বন্ধ divসঙ্গে ট্যাগ id='container'। এটি কিছু সমস্যার কারণ হতে পারে।
— ব্যাটকিনস
@ পেট্রিক, আপনার কাছে .clearক্লাসের জন্য সিএসএস নেই । আপনি কি এটি ভুলে গেছেন, না এটি আপনার মূল কোডটিতে রয়েছে? .clearযে বর্গ brখুবই গুরুত্বপূর্ণ, কারণ @jennyfofenny তাদের উত্তর উল্লেখ করেছে নেই।
— Cannસાઈড

উত্তর:

280

ডিভ বন্ধ clear:bothহওয়ার আগে আপনাকে একটি জোর করে নেওয়া দরকার #main_content। আমি সম্ভবত সরাতে হবে <br class="clear" />;মধ্যে #main_contentdiv ও সিএসএস সেট হওয়ার:

.clear { clear: both; }

আপডেট: এই প্রশ্নটি এখনও ট্র্যাফিকের যথেষ্ট পরিমাণে পায়, তাই আমি CSS3 এ একটি নতুন লেআউট মোড ব্যবহার করে একটি আধুনিক বিকল্প দিয়ে উত্তরটি আপডেট করতে চেয়েছিলাম যার নাম ফ্লেক্সিবল বাক্স বা ফ্লেক্সবক্স :

body {
  margin: 0;
}

.flex-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  background-color: #3F51B5;
  color: #fff;
}

section.content {
  flex: 1;
}

footer {
  background-color: #FFC107;
  color: #333;
}
<div class="flex-container">
  <header>
    <h1>
     Header   
    </h1>
  </header>

  <section class="content">
    Content
  </section>

  <footer>
    <h4>
      Footer
    </h4>
  </footer>
</div>
স্নিপেট প্রসারিত করুন

বেশিরভাগ আধুনিক ব্রাউজারগুলি বর্তমানে ফ্লেক্সবক্স এবং ভিউপোর্ট ইউনিটগুলিকে সমর্থন করে তবে আপনাকে যদি পুরানো ব্রাউজারগুলির জন্য সমর্থন বজায় রাখতে হয় তবে নির্দিষ্ট ব্রাউজার সংস্করণের জন্য সামঞ্জস্যতা পরীক্ষা করে দেখতে ভুলবেন না।

— jennyfofenny
সূত্র
4
সিএসএসের স্পষ্ট সম্পত্তি সম্পর্কিত w3schools নিবন্ধ এখানে । মূলত, স্পষ্টর অর্থ হল যে উপাদানটি পরিষ্কারের জন্য প্রয়োগ করা হয় তার প্রবাহে ভাসমানের নীচে শুরু হয় (হয় কেবল বাম, কেবল ডান বা উভয়)।
— jennyfofenny
230

এটা চেষ্টা কর: overflow: auto;

এটি আমার সমস্যার জন্য কাজ করেছে ..

— sipőcz péter
সূত্র
10
+1, এই সমাধানটি মার্জিত এবং আপনার পৃষ্ঠায় একটি অদৃশ্য ট্যাগ যুক্ত করে না। এই ঝাঁকুনি
— নাবিল কাদিমি
5
ওভারফ্লো অটো আমার জন্য ভাল কাজ করেছে। এফওয়াইআই যদি ওভারফ্লো অটো কন্টেইনারটির উচ্চতা ভিতরের সামগ্রীর চেয়ে কম হয় তবে এটি একটি স্ক্রোল বার যুক্ত করবে। এটি খুব বেশি আকার দিন বা উচ্চতা নির্ধারণ করুন: ওভারফ্লো এর সাথে অটোও।
— ব্রায়ান মায়ার্স
@ Roozbeh15 display: block;এটি যুক্ত করুন
— BadAtPHP
2
সেরা এবং সহজ সমাধান ... আপনি আমার দিনটি বাঁচিয়েছেন। ধন্যবাদ
— কাশ্যপ কোটক
পবিত্র শিট এটি আশ্চর্যজনকভাবে কাজ করে। এটি কেন কাজ করে তার নীচের প্রক্রিয়াটি বোঝানোর জন্য কেউ চিন্তা করে?
— মার্চুরিয়াল
86

নিম্নলিখিত যোগ করুন:

overflow:hidden;
height:1%;

আপনার প্রধান ডিভ <br />পরিষ্কারের জন্য অতিরিক্তের প্রয়োজনীয়তা দূর করে ।

— শুভক্ষণ
সূত্র
কি দারুন! আমি যা আশা করতাম তার ঠিক বিপরীতটিই এটি করেছিল! ওভারফ্লো: লুকানো = কন্টেন্ট ফিট করতে প্রসারিত! আমি কখনই অনুমান করতাম না!
— মুল্লহাউসন
হ্যাঁ, এটি আমার পক্ষেও কাজ করেছে এবং এটি কেন পুরোপুরি তা বোঝায় না। 'উচ্চতা 1%' এবং 'ওভারফ্লো লুকানো' কেন কাজ করে তার কোনও ব্যাখ্যা?
— একারলন
1
সত্যিই এটি কীভাবে এবং এমনকি এটি কেন কাজ করে, যদি কোনও উচ্চতা নির্ধারণ না করা হয় তবে কেন ওভারফ্লো লুকানো থাকে না কেবল সমস্ত কিছু লুকায় না (কারণ উচ্চতা 0 হয়) তবে নিজের প্রসারিত হয়, এর কোনও ব্যাখ্যা আছে বা কেবল বিশ্বাস এবং খুশি হতে পারে?
— ম্যাক্স ইয়ারি
1
ওভারফ্লো: hidden চামড়া স্ক্রোলবারগুলি কিন্তু ব্লকের মাপ রাখে
— authentictech
আমার জন্য কেবল 'ওভারফ্লো: লুকানো' তবে 'ওভারফ্লো: অটো' নিয়ে কাজ করেছে এবং স্ক্রোলবারগুলি প্রদর্শন করে নি।
— ঘূর্ণি991
60

বিকল্প উপায় হিসাবে আপনি এটি চেষ্টা করতে পারেন যা কিছু পরিস্থিতিতে কার্যকর হতে পারে 

display:table;

jsFiddle

— h0mayun
সূত্র
24

আমি শুধু ব্যবহার করতে হবে

height: auto;

আপনার বিভাগে হ্যাঁ, আমি জানি আমি কিছুটা দেরি করেছি তবে আমি বুঝতে পেরেছিলাম যে এটি কারওর মতো হতে পারে যদি এটি এখানে থাকত তবে আমাকে সাহায্য করেছিল।

— চার্লস
সূত্র
height: auto;নীচে সমস্ত আইটেম শীর্ষে স্থানান্তর করে তোলে। আমার মূল বিষয়বস্তু ডিভের এই সম্পত্তিটির সাথে, আমার পৃষ্ঠার পাদচরণটি উপরের দিকে সরে গেছে যাতে এটি শিরোনামকে স্পর্শ করে এবং আমার সামগ্রী ডিভকে ওভারল্যাপ করে।
— অ্যারন ফ্রেঙ্ক
1
এটি আমার জন্য সমাধান ছিল। ধন্যবাদ!
— নিক হামার-এলিস
14

নিম্নলিখিত নিম্নলিখিত কাজ করা উচিত:

.main #main_content {
    padding: 5px;
    margin: 0px;
    overflow: auto;
    width: 100%; //for some explorer browsers to trigger hasLayout
}
— Steerpike
সূত্র
ওভারফ্লো যুক্ত করে: অটো কাজ করেছে, যদিও আমি প্রস্থটিও যুক্ত করেছি: 100%, যার ফলে ডিভ (# মেইন_ কনটেন্ট) তার পিতামাতার বিভাজনের তুলনায় কিছুটা বড় হতে পারে। পাইনি কেন!
— প্যাট্রিক
2
এর কারণ প্যাডিং নির্দিষ্ট প্রস্থ ছাড়াও গণনা করা হয়, সুতরাং আপনার উপাদানটির প্রস্থ 100% + 5px বাম প্যাডিং + 5px ডান প্যাডিং
— নিকভি
1
উপচে পড়া: অটো; আমার জন্য কাজ করেছেন, আপনাকে অনেক ধন্যবাদ।
— কসকো টেক 13'15
8

এর সাথে display:inline-blockসংযুক্ত সিএসএস সহ স্প্যান ট্যাগটি ব্যবহার করুন । এরপরে আপনি সিএসএস ব্যবহার করতে পারেন এবং এটিকে অনেকগুলি উপায়ে ডিভের মতো চালিত করতে পারেন তবে যদি আপনি এটি অন্তর্ভুক্ত না করেন widthবা heightএটি প্রসারিত এবং এর সামগ্রীর উপর ভিত্তি করে প্রত্যাহার করে।

আশা করি এইটি কাজ করবে.

— অন্ধকার মার্ক
সূত্র
আপনার আশাকরি কাজ করেছে: এটি অন্তত আমাকে সাহায্য করেছে! :) বিটিডব্লিউ, আমি আমার উপাদানটিকে ক এর divপরিবর্তে ছেড়ে দিয়েছি spanতবে display: inline-blockএখনও আমার ক্ষেত্রে (ক্রোমিয়াম) কাজ করেছি।
— স্ন্যাপফ্র্যাক্টলপপ
6

সাধারণত আমি মনে করি এটির clear:bothশেষ সন্তানের উপাদানগুলির উপর একটি নিয়ম জোর করে সমাধান করা যেতে পারে #items_list।

আপনি হয় ব্যবহার করতে পারেন:

#items_list:last-child {clear: both;}

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

<div id="list_item_20" class="last_list_item">

এবং সিএসএস

.last_list_item {clear: both; }
— ডেভিড বলছেন মনিকা পুনরুদ্ধার করুন
সূত্র
6

যখন কোনও পিতামাতার ডিভের শিশু উপাদানগুলি ভাসমান হয় তখন এই সমস্যা দেখা দেয়। এখানে সমস্যার সর্বশেষ সমাধান :

আপনার সিএসএস ফাইলে সিউডো সিলেক্টর সহ .clearfix নামে নিম্নলিখিত ক্লাসটি লিখুন : পরে 

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

তারপরে, আপনার এইচটিএমএলে, আপনার পিতামাতার ডিভের সাথে .clearfix ক্লাস যুক্ত করুন । উদাহরণ স্বরূপ:

<div class="clearfix">
    <div></div>
    <div></div>
</div>

এটা সবসময় কাজ করা উচিত। আপনি ক্লাসের নামটিকে .cararfix এর পরিবর্তে .group হিসাবে কল করতে পারেন , কারণ এটি কোডটিকে আরও শব্দার্থক করে তুলবে। মনে রাখবেন যে, ডাবল উদ্ধৃতি "" এর মধ্যে বিন্দু বা সামগ্রীর মানতে কোনও স্থান যোগ করার প্রয়োজন নেই । এছাড়াও, উপচে পড়া: অটো; সমস্যাটি সমাধান করতে পারে তবে এটি অন্যান্য সমস্যার মতো স্ক্রোল-বারটি দেখায় এবং এটির প্রস্তাব দেওয়া হয় না।

সূত্র: লিসা কাতালানো এবং ক্রিস কোয়েরিয়ার ব্লগ

— ইফতি মাহমুদ
সূত্র
5

ডিভিতে একটি ভাসমান সম্পত্তি যুক্ত করুন #main_content- এরপরে এর ভাসমান সামগ্রীগুলি প্রসারিত হবে

— রশ্মি
সূত্র
থ্যাঙ্কস রে, এটি কাজ করেছে যদিও এটি তার সামগ্রী (#items_list) আকারে ডিভ সঙ্কুচিত করেছে যার প্রস্থ: 400px; আপনার সমাধানটি যদি খুব ভাল হয় তবে আমি # মেইন_ কনটেন্টকে এর সম্পূর্ণ প্রস্থে থাকতে পারি - কোনও পরামর্শ?
— প্যাট্রিক
@ রে এবং কয়েক বছর পরে এবং এটি ঠিক একই ধরণের সমস্যার সাথে আমার একটি সম্ভাব্য মাথাব্যথা বাঁচিয়েছে। ধন্যবাদ!
— জন এইচ
4

সিএসএস নিয়মের জন্য কিছু পরীক্ষা করার আগে:

{ position:absolute }

উপস্থিত থাকলে অপসারণ করুন এবং তাদের প্রয়োজন নেই।

— onalbi
সূত্র
2
কারণ "পরম অবস্থানযুক্ত উপাদানগুলি প্রবাহ থেকে সরিয়ে ফেলা হয়, এইভাবে অন্যান্য উপাদানগুলি এড়ানো হয় So সুতরাং আপনি কোনও ঠিক অবস্থানযুক্ত উপাদান অনুযায়ী পিতামাতার উচ্চতা নির্ধারণ করতে পারবেন না।" stackoverflow.com/questions/12070759/…
— ফেডারিকো
4

ভাসমান উপাদানগুলি মূল উপাদানগুলির অভ্যন্তরের স্থান দখল করে না, নাম অনুসারে তারা ভাসমান! সুতরাং যদি উচ্চমাত্রার স্পষ্টভাবে কোনও উপাদানকে তার সন্তানের উপাদানগুলি ভাসমান অবস্থায় সরবরাহ করা না হয়, তবে পিতামণ্ডলটি সংকোচিত হয়ে প্রদর্শিত হবে এবং শিশু উপাদানটির মাত্রা গ্রহণ করবে না, এমনকি যদি এটির দেওয়া overflow:hidden;শিশুরা পর্দায় উপস্থিত নাও হতে পারে। এই সমস্যাটি মোকাবেলার একাধিক উপায় রয়েছে:

  1. clear:both;সম্পত্তি সহ ভাসমান উপাদানটির নীচে অন্য একটি উপাদান sertোকান , বা ভাসমান উপাদানটির ব্যবহার clear:both;করুন :after।

  2. ব্যবহার display:inline-block;বা flex-boxপরিবর্তে float।

— অপুরভ শ্রীবাস্তব
সূত্র
3

দেখে মনে হচ্ছে এটি কাজ করে

html {
 width:100%;
 height:auto;
 min-height:100%
}

এটি সর্বনিম্ন হিসাবে পর্দার আকার নেয় এবং যদি সামগ্রীটি প্রসারিত হয় তবে এটি বৃদ্ধি পায়।

— SubstanceMX
সূত্র
2

সিএসএসে: #clear_div{clear:both;}

অভ্যন্তরীণ ডিভের ডিভ ট্যাগের পরে এই নতুন নিম্নলিখিত ডিভ যুক্ত করুন 

<div id="clear_div"></div>

আরও তথ্যের জন্য http://www.w3schools.com/cssref/pr_class_clear.asp :

— Ingrid
সূত্র
2

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

আমার নতুন sectionসিএসএস এর মতো দেখাচ্ছে:

section {
    // min-height so it looks good on big screen
    // but resizes on a small-screen
    min-height: 100%;
    min-height: 100vh;
    width:100%;
    width:100vh;
}

ধরা যাক আপনার একটি বিভাগ রয়েছে যা একটি নির্দিষ্ট রঙ। ব্যবহার করে min-height, যদি ছোট স্ক্রিনের কারণে বিভাগটির প্রস্থ সঙ্কুচিত হয় তবে বিভাগটির উচ্চতা প্রসারিত হবে, সামগ্রীটি বিভাগের মধ্যেই থাকবে এবং আপনার পটভূমি পছন্দসই রঙে থাকবে।

— আদ্রিয়ান
সূত্র
2

আপনি কি গতানুগতিকভাবে চেষ্টা করেছেন? প্রধান ধারক উচ্চতা দিন: অটো

#container{height:auto}

আমি এটি ব্যবহার করেছি এবং এটি আমার সাথে বেশিরভাগ সময় কাজ করেছিল।

— মিশেল ডিমওয়াইট
সূত্র
1

আমি নিজেই একটি প্রকল্পের মধ্যে এটি চালাচ্ছি - আমার একটি ডিভের ভিতরে একটি টেবিল ছিল যা ডিভের নীচে থেকে ছড়িয়ে পড়ছিল। আমি যে উচ্চতা ফিক্সের চেষ্টা করেছি সেগুলির মধ্যে কোনওটিই আমি কাজ করার চেষ্টা করি নি, তবে এর জন্য আমি একটি অদ্ভুত ফিক্স পেয়েছি, এবং এটি হল একটি ডিগ্রির নীচে একটি প্যারাগ্রাফটি এতে কেবল একটি পিরিয়ড সহ। তারপরে ধারকের পটভূমির মতো পাঠ্যটির "রঙ" স্টাইল করুন। আপনি দয়া করে ঝরঝরে কাজ করেছেন এবং জাভাস্ক্রিপ্টের প্রয়োজন নেই required একটি বিরতিহীন স্থান কাজ করবে না - বা স্বচ্ছ চিত্রও দেয় না।

স্পষ্টতই এটি কেবল এটি দেখার জন্য টেবিলের নীচে কিছু সামগ্রী রয়েছে তা দেখার দরকার ছিল। আমি ভাবছি যদি এটি অন্য কারও জন্য কাজ করে।

এটি ডিজাইনের টেবিল-ভিত্তিক লেআউটগুলিকে অবলম্বন করে তোলে - আমি এই স্টাফটি খুঁজে বের করতে এবং ক্রস ব্রাউজারকে সামঞ্জস্যপূর্ণ করে তুলতে পেরেছি এমন সময় আমাকে পাগল করে দিচ্ছে।

— ন্যানসি হেস্টিংস-ট্রু
সূত্র
সিএসএস দিয়ে এটি করার কিছু উপায় অবশ্যই হতে হবে তবে তা কী হবে তা আমার কোনও ধারণা নেই। এটি আমার পক্ষে কাজ করেছিল, তবে আমাকে প্রস্থ যুক্ত করতে হয়েছিল: 100%; উচ্চতা: স্বয়ং; মিনিট-উচ্চতা: 100%; অবস্থান: আপেক্ষিক;
— যৌক্তিক
0

আপনি যদি jQuery UI ব্যবহার করে থাকেন তবে তাদের ইতিমধ্যে একটি ক্লাস রয়েছে যা কেবলমাত্র একটি আকর্ষণীয় ডিভের <div>নীচের অংশে height:auto;একটি ডি যুক্ত করুন যা আপনি প্রসারিত করতে চান তারপরে একটি শ্রেণীর নাম ইউআই-সহায়ক-ক্লিয়ারফিক্স যুক্ত করুন বা এই শৈলীর বৈশিষ্ট্যটি যুক্ত করুন এবং ঠিক নীচের মতো যুক্ত করুন :

<div style=" clear:both; overflow:hidden; height:1%; "></div>

ক্লিয়ার ডিভের জন্য jQuery UI ক্লাস যুক্ত করুন, আপনি যে ডিভটি প্রসারিত করতে চান তা নয়।

— লুকাস এম অলিভিরা ira
সূত্র
0

আমি জানি এটি এক ধরণের পুরানো থ্রেড, তবে, এটি min-heightএকটি পরিষ্কার উপায়ে সিএসএস সম্পত্তি দ্বারা অর্জন করা যেতে পারে , তাই ভবিষ্যতের রেফারেন্সের জন্য এটি এখানে রেখে যাব:

আমি এখানে ওপি পোস্ট করা কোডের উপর ভিত্তি করে একটি ফিডাল তৈরি করেছি: http://jsfiddle.net/U5x4T/1/ , আপনি ভিতরে ডিভগুলি অপসারণ এবং যুক্ত করার সাথে সাথে লক্ষ্য করবেন যে ধারকটি কীভাবে আকারে প্রসারিত বা হ্রাস পাবে

এটি অর্জনের জন্য আপনার কেবলমাত্র দুটি জিনিস প্রয়োজন, ওপি কোডের অতিরিক্ত এটি:

মূল পাত্রে ওভারফ্লো (ভাসমান ডিভগুলির জন্য প্রয়োজনীয়)

* ন্যূনতম উচ্চতার সিএসএস সম্পত্তি, আরও তথ্য এখানে উপলব্ধ: http://www.w3schools.com/cssref/pr_dim_min-height.asp

— জুয়ান কার্লোস আলপিজার চিন্চিলা
সূত্র
0

সংযুক্ত প্রদর্শন: ডিভের সাথে ইনলাইন করুন এবং এটি স্বয়ংক্রিয়ভাবে বেড়েছে (স্ক্রোল স্টাফ নয়) যখন উচ্চতার সামগ্রীটি বড় হয়ে যায় তখন সেট সেট ডিভি উচ্চতা 200px

— Jelle
সূত্র
1
এটি প্রশ্নের স্পষ্ট উত্তর নয়। মন্তব্যগুলির জন্য, দয়া করে মন্তব্য ফাংশনটি ব্যবহার করুন।
— ksbg
0

আপনি সিএসএস গ্রিড লেআউট ব্যবহার করতে পারেন । এই মুহুর্তে সমর্থন বরং প্রশস্ত: এটি ক্যানিউসে পরীক্ষা করে দেখুন ।

এখানে jsfiddle উপর উদাহরণ । এছাড়াও উদাহরণ টেক্সট জিনিস রয়েছে সঙ্গে।

এইচটিএমএল কোড:

<div class="container">
  <div class="header">
   Header
  </div>
  <div class="content">
   Content
  </div>
  <div class="footer">
   Footer
  </div>
</div>

সিএসএস কোড: 

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

.container {
  width: 100%;
  height: 100%;

  display: grid;
  grid-template-rows: 100px auto 150px;
  grid-template-columns: auto;
}
// style stuff
— শারিকভ ভ্লাদিস্লাভ
সূত্র
0

আমি উপরে তালিকাভুক্ত প্রতিটি পরামর্শ বেশ চেষ্টা করেছি এবং সেগুলির কোনওটিই কাজ করে নি। তবে, "প্রদর্শন: টেবিল" আমার জন্য কৌশলটি করেছে।

— PongGod
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.