বাকী স্ক্রিন জায়গার উচ্চতা পূরণ করুন একটি ডিভ করুন

Question

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

পৃষ্ঠায় একটি শিরোনাম রয়েছে, এতে একটি লোগো এবং অ্যাকাউন্ট সম্পর্কিত তথ্য রয়েছে। এটি একটি স্বেচ্ছাসেবী উচ্চতা হতে পারে। আমি কনটেন্ট ডিভটি বাকী পৃষ্ঠাটি নীচে পূরণ করতে চাই want

আমার একটি শিরোনাম divএবং একটি সামগ্রী রয়েছেdiv । এই মুহুর্তে আমি লেআউটের জন্য এমন একটি টেবিল ব্যবহার করছি:

সিএসএস এবং এইচটিএমএল

#page {
    height: 100%; width: 100%
}

#tdcontent {
    height: 100%;
}

#content {
    overflow: auto; /* or overflow: hidden; */
}

<table id="page">
    <tr>
        <td id="tdheader">
            <div id="header">...</div>
        </td>
    </tr>
    <tr>
        <td id="tdcontent">
            <div id="content">...</div>
        </td>
    </tr>
</table>

পৃষ্ঠার পুরো উচ্চতা পূরণ করা হয়েছে এবং কোনও স্ক্রোলিংয়ের প্রয়োজন নেই।

কনটেন্ট ডিভের ভিতরে যে কোনও কিছুর জন্য, সেটিংটি top: 0;এটি শিরোনামের নীচে রাখবে। কখনও কখনও বিষয়বস্তু একটি বাস্তব টেবিল হতে হবে, যার উচ্চতা 100% এ সেট করা আছে। headerভিতরে রাখলে contentএটি কাজ করতে দেয় না।

এটি ব্যবহার না করে একই প্রভাব অর্জন করার কোনও উপায় আছে কি table?

হালনাগাদ:

সামগ্রীর অভ্যন্তরের উপাদানগুলির divশতকরা হারগুলিও উচ্চতায় সেট হবে। সুতরাং 100% এর অভ্যন্তরে এমন কিছু divযা নীচে পূরণ করবে। হিসাবে 50% এ দুটি উপাদান হবে।

আপডেট 2:

উদাহরণস্বরূপ, শিরোনাম যদি পর্দার উচ্চতার 20% উপরে নিয়ে যায় তবে 50% ভিতরে নির্দিষ্ট করা একটি টেবিল #contentস্ক্রিনের জায়গার 40% গ্রহণ করতে পারে। এখনও অবধি, পুরো জিনিসটিকে একটি টেবিলের মধ্যে মোড়ানো কেবলমাত্র কাজ করে।

Comments

ভবিষ্যতে এখানে হোঁচট খাওয়ার জন্য, আপনি বেশিরভাগ ব্রাউজারগুলিতে পছন্দসই টেবিল বিন্যাসটি টেবিল চিহ্ন-আপ ছাড়াই, ব্যবহার display:tableএবং সম্পর্কিত বৈশিষ্ট্যগুলি দ্বারা পেতে পারেন, খুব অনুরূপ প্রশ্নের এই উত্তরটি দেখুন ।

— অমেলিয়াবিআর

আমি আপনার সেটআপটি পুনরুদ্ধার করার চেষ্টা করেছি - jsfiddle.net/ceELs - তবে এটি কাজ করছে না, আমি কী মিস করছি?

— গিল বেটস

@জনাব. এলিয়েনের উত্তরটি সহজ এবং দরকারী, এটি পরীক্ষা করে দেখুন http://stackoverflow.com/a/23323175/188784

— গোহান

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

— ড্যামিয়েন

@ গিলবেটস আপনি jsfiddle.net/ceELs/5

— মিশাল ভৌত

Answer 1

2015 আপডেট: ফ্লেক্সবক্স পদ্ধতির

আরও দুটি উত্তর সংক্ষিপ্তভাবে ফ্লেক্সবক্সের উল্লেখ রয়েছে ; তবে এটি দুই বছরেরও বেশি আগে ছিল এবং তারা কোনও উদাহরণ দেয় না। ফ্লেক্সবক্সের স্পেসিফিকেশনটি এখন অবশ্যই স্থির হয়েছে।

দ্রষ্টব্য: সিএসএস নমনীয় বক্স লেআউট স্পেসিফিকেশন প্রার্থী সুপারিশ পর্যায়ে থাকলেও, সমস্ত ব্রাউজার এটি প্রয়োগ করে নি। ওয়েবকিট বাস্তবায়ন অবশ্যই -webkit- এর সাথে উপস্থাপিত হওয়া উচিত; ইন্টারনেট এক্সপ্লোরার -ms- এর উপসর্গযুক্ত, স্পেকের একটি পুরানো সংস্করণ প্রয়োগ করে; অপেরা 12.10, প্রাক-পূর্বনির্ধারিত অনুসারটির সর্বশেষতম সংস্করণ প্রয়োগ করে। একটি আপ-টু-ডেট সামঞ্জস্যতার স্থিতির জন্য প্রতিটি সম্পত্তিটিতে সামঞ্জস্যতা টেবিলটি দেখুন।

( https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/ নমনীয়_বক্সেস থেকে নেওয়া )

সমস্ত বড় ব্রাউজার এবং আই 1111 + ফ্লেক্সবক্স সমর্থন করে। আইই 10 বা ততোধিক বয়সের জন্য আপনি ফ্লেক্সিজেএস শিম ব্যবহার করতে পারেন।

বর্তমান সমর্থন পরীক্ষা করতে আপনি এখানে দেখতে পারেন: http://caniuse.com/#feat=flexbox

কাজের উদাহরণ

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

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

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.box .row {
  border: 1px dotted grey;
}

.box .row.header {
  flex: 0 1 auto;
  /* The above is shorthand for:
  flex-grow: 0,
  flex-shrink: 1,
  flex-basis: auto
  */
}

.box .row.content {
  flex: 1 1 auto;
}

.box .row.footer {
  flex: 0 1 40px;
}

<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->

<div class="box">
  <div class="row header">
    <p><b>header</b>
      <br />
      <br />(sized to content)</p>
  </div>
  <div class="row content">
    <p>
      <b>content</b>
      (fills remaining space)
    </p>
  </div>
  <div class="row footer">
    <p><b>footer</b> (fixed height)</p>
  </div>
</div>

উপরে সিএসএস সালে আনমন সম্পত্তি shorthands আনমন-হত্তয়া , আনমন-সঙ্কুচিত এবং আনমন-ভিত্তিতে বৈশিষ্ট্য আনমন আইটেম নমনীয়তা প্রতিষ্ঠা করতে। মোজিলার নমনীয় বাক্সগুলির মডেলটির ভাল পরিচয় রয়েছে ।

Comments

flex: 0 1 30px;বৈশিষ্ট্যটি কেন এটি box .rowপ্রতিটি বিভাগে ওভাররাইড হয়?

— এরদল জি।

এখানে ফ্লেক্সবক্সের জন্য ব্রাউজার সমর্থন - সমস্ত সবুজ দেখতে ভাল লাগছে

— ব্রায়ান বার্নস

ফ্লেক্সি.জেএস-এর লিঙ্কটি মারা গেছে। এখানে গিথুব

— ses3ion

অবশ্যই এটি একটি খুব ভাল পদ্ধতির এবং এটি প্রায় কাজ করে;) যখন বিভক্ত বিষয়বস্তুর কোনও সামগ্রী একটি মূল ফ্লেক্স-এড উচ্চতা ছাড়িয়ে যায় তখন একটি ছোট সমস্যা হয়। বর্তমান বাস্তবায়নে "পাদলেখ" কম চাপ দেবে এবং এটি বিকাশকারীরা প্রত্যাশা করে না;) সুতরাং আমি খুব সহজ সমাধান করেছি। jsfiddle.net/przemcio/xLhLuzf9/3 আমি ধারক এবং ওভারফ্লো স্ক্রোলগুলিতে অ্যাডিশিয়াল ফ্লেক্স যুক্ত করেছি।

— przemcio

@ প্রজেমসিও চমৎকার পয়েন্ট, তবে আমি মনে করি না যে স্ক্রোলযোগ্য সামগ্রী হ'ল প্রতিটি বিকাশকারী আশা করেন;) - তবে আপনার যা প্রয়োজন তা অর্জন overflow-y: autoকরার .row.contentজন্য আপনার কেবল যোগ করার প্রয়োজন।

— পেব্ল

Answer 2

সিএসএসে এটি করার জন্য সত্যিই কোনও শব্দ, ক্রস ব্রাউজার নেই। আপনার লেআউটটিতে জটিলতা রয়েছে তা ধরে নিয়ে, উপাদানটির উচ্চতা নির্ধারণ করতে আপনার জাভাস্ক্রিপ্ট ব্যবহার করতে হবে। আপনাকে যা করতে হবে তার সারাংশটি হ'ল:

Element Height = Viewport height - element.offset.top - desired bottom margin

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

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

Comments

এটাই আমার সন্দেহ হয়েছিল। যাইহোক, অ্যাপ্লিকেশনটি জাভাস্ক্রিপ্ট বন্ধ হয়ে গেলেও কাজ করবে, তাই আমার ধারণা আমি কেবল সারণীটি ব্যবহার করব।

— ভিনসেন্ট ম্যাকনাব

ভিনসেন্ট, আপনার মাঠ দাঁড়ানোর উপায়। আমি ঠিক একই জিনিসটি করতে চাইছিলাম এবং এটি CSS এর দ্বারা সম্ভব নয় বলে মনে হচ্ছে? আমি নিশ্চিত নই তবে নির্বিশেষে অন্য যে কোনও সমাধান আপনি বর্ণনা করেছেন সেভাবেই তা করেন না। জাভাস্ক্রিপ্ট একমাত্র এই সময়ে সঠিকভাবে কাজ করে।

— ট্র্যাভিস

উইন্ডোটির উচ্চতা পরিবর্তন হলে কী হবে

— টেকসিন

মানে ... আমরা কেন 2013 সালে ক্যালক ব্যবহার করছি না?

— কামি

উচ্চতা: ক্যালক (100vh - 400px); একটি বৈধ সিএসএস শৈলী যা এই পোস্টটি সম্পর্কে ঠিক কী করে। অন্যান্য সমস্ত সমাধান একটি নির্দিষ্ট পিতামাতার উচ্চতা বা ব্লক প্রদর্শন থাকার উপর নির্ভর করে।

— উইলিয়ামএক্স

Answer 3

মূল পোস্টটি 3 বছরেরও বেশি আগের। আমার ধারণা অনেক লোক যারা আমার মতো এই পোস্টে আসে তারা অ্যাপের মতো একটি লেআউট সমাধান খুঁজছে, কোনওরকম স্থির শিরোনাম, পাদলেখ এবং পুরো স্ক্রিনটি বিশ্রামের পর্দা তুলে ধরে বলে। যদি তা হয় তবে এই পোস্টটি সাহায্য করতে পারে, এটি আই 7+ ইত্যাদিতে কাজ করে

http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/

এবং এই পোস্ট থেকে কিছু স্নিপেট এখানে দেওয়া হয়েছে:

@media screen { 
  
  /* start of screen rules. */ 
  
  /* Generic pane rules */
  body { margin: 0 }
  .row, .col { overflow: hidden; position: absolute; }
  .row { left: 0; right: 0; }
  .col { top: 0; bottom: 0; }
  .scroll-x { overflow-x: auto; }
  .scroll-y { overflow-y: auto; }

  .header.row { height: 75px; top: 0; }
  .body.row { top: 75px; bottom: 50px; }
  .footer.row { height: 50px; bottom: 0; }
  
  /* end of screen rules. */ 
}

<div class="header row" style="background:yellow;">
    <h2>My header</h2>
</div> 
<div class="body row scroll-y" style="background:lightblue;">
    <p>The body</p>
</div> 
<div class="footer row" style="background:#e9e9e9;">
    My footer
</div>

Comments

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

— রোমান Starkov

আমার একটি 55px শিরোনাম এবং একটি ডিভ দরকার যা নথির বাকী উচ্চতা পূরণ করে। এটাই সমাধান!

— মাতাসাস কেনেপা

আপনি বোমা, আমি এত দিন ধরে এটি চেষ্টা করে এসেছি এবং এটিই আমার একমাত্র সমাধান। শীর্ষে আমার পিএইচ উপাদানটি 60px উচ্চতা এবং 100% পর্যন্ত ছড়িয়ে থাকা বাকি থাকতে হবে, এটি এটিকে সমাধান করেছে।

— আদম ওয়েট

আমার সামান্য সমস্যা ব্যতীত এটি ভালভাবে কাজ করে - যদি আমি display: tableশরীরে কোনও উপাদান রাখি তবে মনে হয় এটি শরীরকে উপচে ফেলেছে। সুতরাং করছেন height: 100%সঠিক উচ্চতা উত্পাদন করে না।

— জিএসটিআর

.colব্যবহৃত হয় না, তাই না?

— স্লারতিদান

Answer 4

মার্কআপে সারণীগুলি ব্যবহার না করে আপনি CSS টেবিল ব্যবহার করতে পারেন।

মার্কআপ

<body>    
    <div>hello </div>
    <div>there</div>
</body>

(প্রাসঙ্গিক) সিএসএস

body
{
    display:table;
    width:100%;
}
div
{
    display:table-row;
}
div+ div
{
    height:100%;  
}

FIDDLE1 এবং FIDDLE2

এই পদ্ধতির কিছু সুবিধা হ'ল:

1) কম মার্কআপ

2) মার্কআপটি টেবিলের চেয়ে বেশি শব্দার্থক, কারণ এটি ট্যাবুলার ডেটা নয়।

3) ব্রাউজার সমর্থন খুব ভাল : আইই 8 +, সমস্ত আধুনিক ব্রাউজার এবং মোবাইল ডিভাইস ( ক্যানিজ )

---

কেবলমাত্র সম্পূর্ণতার জন্য, সিএসএস টেবিল মডেলের জন্য সিএসএস বৈশিষ্ট্যের সমতুল্য এইচটিএমএল উপাদানগুলি এখানে রয়েছে

table    { display: table }
tr       { display: table-row }
thead    { display: table-header-group }
tbody    { display: table-row-group }
tfoot    { display: table-footer-group }
col      { display: table-column }
colgroup { display: table-column-group }
td, th   { display: table-cell }
caption  { display: table-caption } 

Comments

আমি কেবল সিএসএস টেবিলের কৌশলটির দিকে দৃষ্টি নিবদ্ধ করেছিলাম । ইতিমধ্যে উত্তরটি ইতিমধ্যে এই উত্তর দেওয়া প্রশ্নের উত্তর সক্রিয় করে। এই সবচেয়ে ভালো সমাধান; এটি পরিষ্কারভাবে সঠিক, মার্জিত এবং সঠিক সরঞ্জামটি ব্যবহার করে। সিএসএস সারণী

— ইয়ান বয়ড

ফিডল কোডটি এখানে উত্তরের সাথে বেশ মেলে না। যোগ html, body { height: 100%, width: 100% }করা আমার পরীক্ষাগুলিতে গুরুত্বপূর্ণ মনে হয়েছিল।

— mlibby

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

— কোডিং হয়েছে

আপনি সর্বদা টেবিল সারি উপাদানটির মধ্যে একেবারে অবস্থানযুক্ত ধারক যুক্ত করতে পারেন তার প্রস্থ এবং উচ্চতা 100% এ সেট করুন। পাশাপাশি টেবিল-সারি উপাদানটিতে আপেক্ষিকটির অবস্থান নির্ধারণ করতে ভুলবেন না।

— মাইক মেলর

@ মাইকমেলর আইই ১১ তে কাজ করে না যদিও এটি এলিমেন্টের relativeঅবস্থানের বিষয়টি উপেক্ষা করে বলে মনে হচ্ছে table-rowতাই এটি কোনও টেবিল উপাদান নয় এমন প্রথম অবস্থানে আরোহণের উচ্চতা নিয়ে যায়।

— বাসিন্দা

Answer 5

সিএসএসের শুধুমাত্র পন্থা (উচ্চতা জানা থাকলে / স্থির থাকে)

আপনি যখন মধ্য পৃষ্ঠাটি পুরো পৃষ্ঠ জুড়ে উল্লম্বভাবে ছড়িয়ে দিতে চান, আপনি calc()CSS3 এ প্রবর্তিত ব্যবহার করতে পারেন ।

ধরে নিলাম আমাদের একটি নির্দিষ্ট উচ্চতা header এবং footerউপাদান রয়েছে এবং আমরা sectionট্যাগটি সম্পূর্ণ উপলব্ধ উল্লম্ব উচ্চতা নিতে চাই ...

ডেমো

ধরে নেওয়া মার্কআপ এবং আপনার সিএসএস হওয়া উচিত

html,
body {
  height: 100%;
}

header {
  height: 100px;
  background: grey;
}

section {
  height: calc(100% - (100px + 150px));
  /* Adding 100px of header and 150px of footer */
  background: tomato;
}

footer {
  height: 150px;
  background-color: blue;
}

<header>100px</header>
<section>Expand me for remaining space</section>
<footer>150px</footer>

সুতরাং এখানে, আমি যা করছি তা হচ্ছে উপাদানগুলির উচ্চতা যুক্ত করা এবং 100%ব্যবহার থেকে বাদ দেওয়াcalc() ফাংশনটি ।

আপনি height: 100%;অবশ্যই পিতামাতার উপাদানগুলির জন্য ব্যবহার করছেন তা নিশ্চিত করুন ।

Comments

ওপি বলেছিল যে শিরোনামটি একটি স্বেচ্ছাসেবী উচ্চতা হতে পারে। সুতরাং আপনি যদি উচ্চতা আগে থেকে জানেন না তবে আপনি ক্যালক ব্যবহার করতে পারবেন না :(

— ড্যানিয়েল্ড

@ ড্যানিয়েল্ড এ কারণেই আমি স্থির উচ্চতা উল্লেখ করেছি :)

— মিঃ এলিয়েন

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

— jlyonsmith

অপ বলেন, 'এটি একটি নির্বিচার উচ্চতা হতে পারে'। নির্বিচারে অর্থ ডিজাইনার দ্বারা সিদ্ধান্ত নেওয়া হয়, এইভাবে স্থির। এই সমাধান এখন পর্যন্ত সেরা এক।

— জ্যাক 18

Answer 6

ব্যবহার করা হয়েছে: height: calc(100vh - 110px);

কোড:

  
.header { height: 60px; top: 0; background-color: green}
.body {
    height: calc(100vh - 110px); /*50+60*/
    background-color: gray;
}
.footer { height: 50px; bottom: 0; }
  

<div class="header">
    <h2>My header</h2>
</div> 
<div class="body">
    <p>The body</p>
</div> 
<div class="footer">
    My footer
</div>

Comments

আমার মতে সবচেয়ে পরিষ্কার সমাধান। এটি অবশ্যই জাভাস্ক্রিপ্ট যুক্ত করার চেয়ে ভাল। (তবে উত্তরটি ইতিমধ্যে অন্য কেউ পোস্ট করেছেন 2015)

— বিভিডিবি

এটি অনেক পরিস্কার মনে হয়।

— theprogrammer

Answer 7

ফ্লেক্সবক্স ব্যবহার করে একটি সহজ সমাধান:

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.content {
  flex-grow: 1;
}

<body>
  <div>header</div>
  <div class="content"></div>
</body>

কোডপেনের নমুনা

একটি বিকল্প সমাধান, যা কন্টেন্ট ডিভের মধ্যে ডিভ কেন্দ্রিক

Comments

এটি নিশ্চিতভাবে সেরা উত্তর। নায়ক-ইমগ হোম পেজগুলির জন্য আকর্ষণীয় বা আপনার

— নবারের

jsfiddle.net/31ng75du/5 ক্রোম, এফএফ, এজ,

— ভিভালদি

এটি সহজ এবং সেরা।

— দেব আনন্দ

Answer 8

কিভাবে আপনি কেবল ব্যবহার করেন সে বিষয়ে vhযা ঘোরা view heightমধ্যে সিএসএস ...

এ লুক কোড স্নিপেট আমি নীচে আপনার জন্য তৈরি করেছেন এবং এটি চালানোর:

body {
  padding: 0;
  margin: 0;
}

.full-height {
  width: 100px;
  height: 100vh;
  background: red;
}

<div class="full-height">
</div>

এছাড়াও, নীচের চিত্রটি দেখুন যা আমি আপনার জন্য তৈরি করেছি:

Comments

এটি কেবলমাত্র যদি আপনি উইন্ডোর পুরো উচ্চতা বিস্তৃত করতে একটি ডিভ চান। এখন এটির উপরে একটি অজানা উচ্চতা দিয়ে একটি হেডার ডিভি রাখুন।

— ল্যারিবুড 9:58

@ ল্যারিবুড আপনি ঠিক বলেছেন, এটি মোড়ক ডিভ করে তোলে, তাই সমস্ত কিছু এই ডিভের ভিতরে চলে যাওয়া উচিত ...

— আলিরিজা

Answer 9

CSS3 সরল উপায় Way

height: calc(100% - 10px); // 10px is height of your first div...

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

Comments

আপনি যদি অন্যান্য উপাদানগুলির উচ্চতা না জানেন তবে এটি কাজ করে না (উদাহরণস্বরূপ যদি তাদের মধ্যে শিশু উপাদানগুলির একটি চলক সংখ্যক থাকে)।

— এজেজ এরসোজ

আপনি যে কেউ এটি করছেন, আপনি 100 ভিএইচও ব্যবহার করতে পারেন: বিয়োগ এবং উপাদানগুলির মধ্যে ফাঁকা স্থান নিশ্চিত করে রাখুন

— htafoya

Answer 10

এটি বিশুদ্ধভাবে CSSব্যবহার করে করা যেতে পারে vh:

#page {
    display:block; 
    width:100%; 
    height:95vh !important; 
    overflow:hidden;
}

#tdcontent {
    float:left; 
    width:100%; 
    display:block;
}

#content {      
    float:left; 
    width:100%; 
    height:100%; 
    display:block; 
    overflow:scroll;
}

এবং HTML

<div id="page">

   <div id="tdcontent"></div>
   <div id="content"></div>

</div>

আমি এটা চেক করা থাকে, এটা সব প্রধান ব্রাউজার কাজ করে: Chrome, IE, এবংFireFox

Comments

বাহ, এর আগে কখনও শুনিনি vhএবং vwইউনিটগুলি। আরও তথ্য: snook.ca/archives/html_and_css/vm-vh-units

— স্টিভ বেনেট

দুর্ভাগ্যক্রমে, এটি IE8 সমর্থন করে না :(

— স্কট

আমি এই পদ্ধতির চেষ্টা করেছি, কিন্তু height: 100%উপর #contentতার উচ্চতা সৃষ্ট যে মেলে #page, উপেক্ষা #tdcontentপুরাপুরি এর উচ্চতা। প্রচুর সামগ্রী সহ, স্ক্রোল বারটি পৃষ্ঠার নীচে অতিক্রম করে।

— ব্র্যান্ডন

Answer 11

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

.table {
  display: table;
}

.table-row {
  display: table-row;
}

.table-cell {
  display: table-cell;
}

.container {
  width: 400px;
  height: 300px;
}

.header {
  background: cyan;
}

.body {
  background: yellow;
  height: 100%;
}

.body-content-outer-wrapper {
  height: 100%;
}

.body-content-inner-wrapper {
  height: 100%;
  position: relative;
  overflow: auto;
}

.body-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

<div class="table container">
  <div class="table-row header">
    <div>This is the header whose height is unknown</div>
    <div>This is the header whose height is unknown</div>
    <div>This is the header whose height is unknown</div>
  </div>
  <div class="table-row body">
    <div class="table-cell body-content-outer-wrapper">
      <div class="body-content-inner-wrapper">
        <div class="body-content">
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
        </div>
      </div>
    </div>
  </div>
</div>

মূল উত্স: সিএসএসে ওভারফ্লো হ্যান্ডল করার সময় একটি ধারকের অবশিষ্ট উচ্চতা পূরণ করা

জেএসফিডেল লাইভ পূর্বরূপ

Comments

ধন্যবাদ!!! আমি সমস্ত নন-টেবিল, নন-ফ্লেক্সবক্স উত্তরগুলির চেষ্টা করেছি এবং এটি কেবলমাত্র 100% সঠিকভাবে কাজ করেছে। একটি প্রশ্ন: মূল উত্সটিতে কেবল একটি রয়েছে body-content-wrapperএবং জিনিসগুলি ডাবল মোড়ক ছাড়াই (কোনও প্রকার ছাড়াই table-cell) ঠিক কাজ করে বলে মনে হচ্ছে । সেভাবে এটি করতে সমস্যা আছে?

— ব্র্যান্ডন

@ ব্র্যান্ডনমিন্টার্ন যদি আপনার টেবিল-কোষ না থাকে তবে এটি আইই 8 এবং আই 9 তে কাজ করে না। (মূল নিবন্ধে মন্তব্য দেখুন।)

— জন Kurlak

হ্যাঁ, সেলগুলি আইই 10 তেও প্রয়োজনীয়। দুর্ভাগ্যক্রমে, আইই 10 এবং তার চেয়ে কম বয়সী .bodyউচ্চতা সেট হিসাবে সমান উচ্চতা হিসাবে সমাপ্ত হয় .container। উল্লম্ব স্ক্রোলবারটি এখনও সঠিক জায়গায় রয়েছে তবে .containerশেষগুলি আমাদের চেয়ে বড় প্রসারিত হচ্ছে। এটি যখন পূর্ণ পর্দায় থাকে তখন নীচের .bodyঅংশটি স্ক্রিনের নীচে থাকে।

— ব্র্যান্ডন

আপনাকে ধন্যবাদ, জনকুরলাক এটিই একমাত্র সমাধান যা আমার পরিস্থিতিতে কাজ করেছিল (আমার ক্লায়েন্টের ব্যবহৃত ক্রোমের বিশেষ সংস্করণে বগি আচরণ দ্বারা ফ্লেক্সবক্সের পথ অবরুদ্ধ করা হয়েছিল)

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

পবিত্র ****! আমি এত দিন ধরে এই উত্তরটি খুঁজছিলাম! তোমাকে অনেক ধন্যবাদ. ফ্লেক্সবক্স এখানে কাজ করে না, তবে টেবিল-ঘরগুলি প্রকৃতপক্ষে করেছিল। অ্যামেজিং।

— অবিবিসিএসমিথ

Answer 12

আমি এটির জন্য একটি উত্তরও অনুসন্ধান করেছি। আপনি যদি ভাগ্যবান হন আইই 8 এবং তার চেয়ে বেশি লক্ষ্যবস্তু করতে সক্ষম হন তবে আপনি ডিভ display:tableসহ ব্লক-স্তরের উপাদানগুলির সাথে সারণীর রেন্ডারিং বিধিগুলি পেতে এবং সম্পর্কিত মানগুলি ব্যবহার করতে পারেন ।

আপনি যদি আরও ভাগ্যবান হন এবং আপনার ব্যবহারকারীরা শীর্ষ স্তরের ব্রাউজারগুলি ব্যবহার করছেন (উদাহরণস্বরূপ, এটি আমার নিয়ন্ত্রণ করা কম্পিউটারগুলিতে একটি অন্তর্নিহিত অ্যাপ্লিকেশন, যেমন আমার সর্বশেষ প্রকল্পটি), আপনি CSS3 এ নতুন ফ্লেক্সিবল বক্স লেআউটটি ব্যবহার করতে পারেন !

Answer 13

আমার জন্য যা কাজ করেছে (অন্য ডিভের মধ্যে একটি ডিভের সাথে এবং আমি অন্যান্য সমস্ত পরিস্থিতিতে ধরে নিই) হ'ল নীচের প্যাডিংটি 100% এ সেট করা। অর্থাৎ এটি আপনার সিএসএস / স্টাইলশিটে যুক্ত করুন:

padding-bottom: 100%;

Comments

100% কি? যদি আমি এটি চেষ্টা করি তবে আমি একটি বিশাল ফাঁকা জায়গা পেয়েছি এবং স্ক্রোলিং ঘটতে শুরু করে।

— mlibby

ভিউপোর্টের আকারের 100% হতে পারে @ এমিলিবিই। আপনি যদি এইচটিএমএল এবং বডিটি 100% উচ্চতায়ও সেট করেন তবে ডিভটি 100% যেতে পারে। শুধুমাত্র একটি একক ডিভের সাথে, 100% ডিভ সামগ্রীর সাথে আপেক্ষিক হবে। আমি নেস্টেড ডিভ দিয়ে চেষ্টা করিনি।

— জেস

এর অর্থ উপাদানটির উচ্চতার 100% (উপাদানটির প্যাডিং হিসাবে যুক্ত), যা এটি উচ্চতা দ্বিগুণ করে। কোনও পৃষ্ঠায় ভরবে না এমন কোনও আশ্বাস, এবং অবশ্যই প্রশ্নের উত্তর নয়। এটি ইতিমধ্যে নোটটি ভিউপোর্টের চেয়ে বেশি পূরণ করতে পারে।

— মার্টিন

প্যাডিং-নীচে: 100% উচ্চতা সেট করে + পিতামাতার ধারক প্রস্থের

— রোমেনো

ডাব্লু 3 স্কুল থেকে: উপাদানটির প্রস্থের শতাংশের নীচে প্যাডিং নির্দিষ্ট করে। w3schools.com/cssref/pr_padding-bottom.asp

— mehdi.loa

Answer 14

দাবি অস্বীকার: গৃহীত উত্তরটি সমাধানটির ধারণা দেয়, তবে আমি এটি একটি অপ্রয়োজনীয় মোড়ক এবং সিএসএস বিধি দ্বারা কিছুটা পুষ্পিত অবস্থায় খুঁজে পাচ্ছি। নীচে খুব কম সিএসএস বিধি সহ একটি সমাধান রয়েছে।

এইচটিএমএল 5

<body>
    <header>Header with an arbitrary height</header>
    <main>
        This container will grow so as to take the remaining height
    </main>
</body>

সিএসএস

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;       /* body takes whole viewport's height */
}

main {
  flex: 1;                 /* this will make the container take the free space */
}

উপরের সমাধানটি ভিউপোর্ট ইউনিট এবং ফ্লেক্সবক্স ব্যবহার করে এবং তাই আই 10 10, আপনাকে IE10 এর জন্য পুরানো বাক্য গঠন ব্যবহার করে।

সাথে কোডেপেন খেলুন: কোডপেনের লিঙ্ক

বা এটির জন্য, মূল পাত্রে প্রয়োজনীয় লোকেরা উপচে পড়া বিষয়বস্তুর ক্ষেত্রে স্ক্রোলযোগ্য হতে পারে: কোডপেনের লিঙ্ক

Comments

প্রধান {উচ্চতা: 10px; নমনীয়: 1; উপচে পড়া: অটো}

— বাঘি

ঘন্টা নষ্ট করার এবং বেশ কয়েকটি পদ্ধতির পরীক্ষা করার পরে, এটি সেরা ছিল! এটি সংক্ষিপ্ত, সহজ এবং স্মার্ট।

— marciowb

Answer 15

উত্তর এখন এক টন, কিন্তু আমি height: 100vh;ডিভি উপাদান ব্যবহার করে পুরো সম্পূর্ণ উল্লম্ব স্থান পূরণ করা প্রয়োজন যে ব্যবহার করে দেখতে পেলাম ।

এইভাবে, আমার প্রদর্শন বা অবস্থানের সাথে চারপাশে খেলার দরকার নেই। ড্যাশবোর্ড তৈরি করতে বুটস্ট্র্যাপ ব্যবহার করার সময় এটি কার্যকর হয়েছিল যেখানে আমার একটি সাইডবার এবং একটি প্রধান ছিল। আমি প্রধানটিকে পুরো উল্লম্ব স্থানটি প্রসারিত করতে এবং পূরণ করতে চেয়েছিলাম যাতে আমি একটি পটভূমির রঙ প্রয়োগ করতে পারি।

div {
    height: 100vh;
}

আই 9 এবং আরও সমর্থন করে: লিঙ্কটি দেখতে ক্লিক করুন

Comments

তবে 100vh সমস্ত উচ্চতার মতো শোনাচ্ছে, অবশিষ্ট উচ্চতা নয়। আপনার যদি একটি শিরোলেখ থাকে এবং আপনি তারপরে

— বাকীটি

Answer 16

<!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>
<title>Test</title>
<style type="text/css">
body
,html
{
    height: 100%;
    margin: 0;
    padding: 0;
    color: #FFF;
}

#header
{
    float: left;
    width: 100%;
    background: red;
}

#content
{
    height: 100%;
    overflow: auto;
    background: blue;
}

</style>
</head>
<body>

    <div id="content">
        <div id="header">
                Header
                <p>Header stuff</p>
        </div>
            Content
            <p>Content stuff</p>
    </div>

</body>
</html>

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

Comments

বন্ধ! প্রায় আমি যা চাই তা ছাড়া, আমি অন্য জিনিসগুলিকে div... অবস্থিত রেখে যাচ্ছি ... অর্থাৎ top: 0;শিরোনামের ঠিক নীচে কিছু রাখব। আমি আমার প্রশ্নটি আবার সংশোধন করব, কারণ আপনি এটির সঠিক উত্তর দিয়েছিলেন, এবং এখনও আমি যা চাই তা নয়! আমি কেবল ওভারফ্লো লুকিয়ে রাখব কারণ বিষয়বস্তু অবশ্যই মাপসই করা উচিত।

— ভিনসেন্ট ম্যাকন্যাব

-1: এই উত্তরটি একটি ডিভ নামে পরিচিত সামগ্রী তৈরি করে যা পুরো স্ক্রিনটি কভার করে, বাকি স্ক্রিনটি নয়

— কেসব্যাশ

Answer 17

আপনি যদি পুরানো ব্রাউজারগুলি সমর্থন না করে (যেটি MSIE 9 বা তার বেশি) এর সাথে ডিল করতে পারেন তবে আপনি এটি নমনীয় বক্স লেআউট মডিউল দিয়ে করতে পারেন যা ইতিমধ্যে ডাব্লু 3 সি সিআর রয়েছে তা করতে পারেন। এই মডিউলটি অন্যান্য দুর্দান্ত কৌশলগুলিকেও পুনরায় অর্ডার করার সামগ্রী হিসাবে মঞ্জুরি দেয়।

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

আর একটি পছন্দ সিএসএস গ্রিড লেআউট হবে তবে এতে ব্রাউজারগুলির স্থিতিশীল সংস্করণগুলি থেকে কম সমর্থন রয়েছে। অনুশীলনে, কেবল এমএসআইই 10 এটি সমর্থন করে।

Answer 18

আমি কিছুক্ষণের জন্য এটির সাথে লড়াই করেছি এবং নিম্নলিখিতগুলি দিয়ে শেষ করেছি:

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

body {
    padding: 0;
    margin: 0;
    height: 100%;
    overflow: hidden;
}

#header {
    position: absolute;
    top: 0;
    left: 0;
    height: 50px;
}

#content {
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 50px;
    height: 100%;
}

Comments

আপনি যদি শীর্ষচরণের উচ্চতা না জানেন?

— যুগল জিন্দল

Answer 19

কেন শুধু এই মত না?

html, body {
    height: 100%;
}

#containerInput {
    background-image: url('../img/edit_bg.jpg');
    height: 40%;
}

#containerControl {
    background-image: url('../img/control_bg.jpg');
    height: 60%;
}

আপনাকে এইচটিএমএল এবং দেহ (সেই ক্রমে) একটি উচ্চতা দিচ্ছেন এবং তারপরে আপনার উপাদানগুলিকে কেবল উচ্চতা দেবেন?

আমার জন্য কাজ কর

Comments

জিনিসটি যদি কোনও ব্যবহারকারী এই পৃষ্ঠাটি পর্যালোচনা করতে একটি বৃহত স্ক্রিন ব্যবহার করে এবং আপনার শিরোনামের উচ্চতা হ'ল 100px স্থির করা হয়েছে যা বর্তমান উচ্চতার 40% এর চেয়ে ছোট, তবে আপনার শিরোনাম এবং বডি প্রসঙ্গে একটি বড় ফাঁকা ফাঁক থাকবে be

— সওরকিডো

Answer 20

সিএসএস গ্রিড সমাধান

কেবল bodyসহ display:gridএবং grid-template-rowsব্যবহার autoএবং frমানের সম্পত্তিটি সংজ্ঞায়িত করা হচ্ছে ।

* {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

header {
  padding: 1em;
  background: pink;
}

main {
  padding: 1em;
  background: lightblue;
}

footer {
  padding: 2em;
  background: lightgreen;
}

main:hover {
  height: 2000px;
  /* demos expansion of center element */
}

<header>HEADER</header>
<main>MAIN</main>
<footer>FOOTER</footer>

গ্রিডস-এর সিএসএস-ট্রিকস ডট কমের একটি সম্পূর্ণ গাইড

Answer 21

আপনি display: tableঅঞ্চলটি দুটি উপাদান (শিরোলেখ এবং সামগ্রী) এ বিভক্ত করতে ব্যবহার করতে পারেন , যেখানে শিরোনামটি উচ্চতায় পরিবর্তিত হতে পারে এবং সামগ্রী বাকী স্থানটি পূরণ করে। এটি পুরো পৃষ্ঠাটির সাথে কাজ করে, পাশাপাশি যখন অঞ্চলটি কেবল positionসেট relative, absoluteবা এর সাথে সেট থাকা অন্য উপাদানগুলির বিষয়বস্তু হয় fixed। এটি ততক্ষণ কাজ করবে যতক্ষণ প্যারেন্ট উপাদানটির উচ্চতা শূন্য নয়।

নীচের কোডটিও দেখুন

সিএসএস:

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

p {
    margin: 0;
    padding: 0;
}

.additional-padding {
    height: 50px;
    background-color: #DE9;
}

.as-table {
    display: table;
    height: 100%;
    width: 100%;
}

.as-table-row {
    display: table-row;
    height: 100%;
}

#content {
    width: 100%;
    height: 100%;
    background-color: #33DD44;
}

এইচটিএমএল:

<div class="as-table">
    <div id="header">
        <p>This header can vary in height, it also doesn't have to be displayed as table-row. It will simply take the necessary space and the rest below will be taken by the second div which is displayed as table-row. Now adding some copy to artificially expand the header.</p>
        <div class="additional-padding"></div>
    </div>
    <div class="as-table-row">
        <div id="content">
            <p>This is the actual content that takes the rest of the available space.</p>
        </div>
    </div>
</div>

Comments

একটি ভাল উত্তর, যা আমি upvated, কিন্তু দুর্ভাগ্যক্রমে, IE8 এর সাথে কাজ করে না, যা এখনও দীর্ঘ সময় ধরে থাকবে।

— ভিনসেন্ট ম্যাকনাব

জিমেইলের মতো অ্যাপ্লিকেশনগুলি সাইজিংয়ের জন্য জাভাস্ক্রিপ্ট ব্যবহার করে, যা বেশিরভাগ ক্ষেত্রেই সিএসএস এর চেয়ে ভাল সমাধান।

— ভিনসেন্ট ম্যাকনাব

আমার মনে হয় তারা জাভাস্ক্রিপ্ট ব্যবহার করছে কারণ এর চেয়ে ভাল আর কোনও ভাল ক্রস ব্রাউজার সিএসএস সমাধান নেই, কারণ এটি আরও ভাল।

— গ্রেগ

@ ভিনসেন্টএমসিএনএবিবি IE8 w3schools.com/cssref/pr_class_display.asp এ কাজ করে । শুধু প্রয়োজন! ডক্টইপিই ঘোষণা এমনকি ডিসপ্লে অ্যাট্রিবিউটের টেবিল মান সম্পর্কেও জানতাম না। শীতল সমাধান। +1

— গোবিন্দ রায়

Answer 22

 style="height:100vh"

আমার জন্য সমস্যা সমাধান। আমার ক্ষেত্রে আমি এটি প্রয়োজনীয় ডিভের জন্য প্রয়োগ করেছি

Answer 23

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

<!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>
    <title>Test</title>
    <style type="text/css">
    body, html {
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
      color: #FFF;
    }
    p {
      margin: 0;
    }

    #header {
      background: red;
    }

    #content {
      position: relative;
      height: 100%;
      background: blue;
    }

    #content #positioned {
      position: absolute;
      top: 0;
      right: 0;
    }
  </style>
</head>

<body>
  <div id="header">
    Header
    <p>Header stuff</p>
  </div>

  <div id="content">
    Content
    <p>Content stuff</p>
    <div id="positioned">Positioned Content</div>
  </div>

</body>
</html>

Comments

এরই মধ্যে ভেবেছি। তবে এটিও কাজ করে না। আমি কেবল একটি সাথে আটকে যাচ্ছি tableকারণ এটি কাজ করে। যদিও আপডেটের জন্য ধন্যবাদ।

— ভিনসেন্ট ম্যাকনাব

Answer 24

এটা চেষ্টা কর

var sizeFooter = function(){
    $(".webfooter")
        .css("padding-bottom", "0px")
        .css("padding-bottom", $(window).height() - $("body").height())
}
$(window).resize(sizeFooter);

Answer 25

মোবাইল অ্যাপের জন্য আমি কেবল ভিএইচ এবং ভিডাব্লু ব্যবহার করি

<div class="container">
  <div class="title">Title</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>

.container {
  width: 100vw;
  height: 100vh;
  font-size: 5vh;
}

.title {
  height: 20vh;
  background-color: red;
}

.content {
  height: 60vh;
  background: blue;
}

.footer {
  height: 20vh;
  background: green;
}

ডেমো - https://jsfiddle.net/u763ck92/

Comments

এটি সঠিক সমাধান নয়। vh মোবাইল ব্রাউজারগুলিতে অসঙ্গতিপূর্ণ। : আরো বিস্তারিত জানার জন্য এখানে দেখুন stackoverflow.com/questions/37112218/...

— HarshMarshmallow

Answer 26

আমি একটি বেশ সহজ সমাধান খুঁজে পেয়েছি, কারণ আমার কাছে এটি কেবল একটি ডিজাইনের সমস্যা ছিল। আমি চেয়েছিলাম বাকী পৃষ্ঠাটি লাল ফুটারের নীচে সাদা না হয়। সুতরাং আমি পৃষ্ঠাগুলির রঙ লাল করে সেট করেছি। এবং বিষয়বস্তু ব্যাকগ্রাউন্ডে সাদা। বিষয়বস্তু উচ্চতা যেমন সেট করা হয়। 20 মিমি বা 50% প্রায় খালি পৃষ্ঠা পুরো পৃষ্ঠাটি লাল ছাড়বে না।

Answer 27

আমার একই সমস্যা ছিল কিন্তু আমি উপরের ফ্লেক্সবক্সগুলি দিয়ে কাজটি সমাধান করতে পারিনি। সুতরাং আমি আমার নিজস্ব টেম্পলেট তৈরি করেছি, যার মধ্যে রয়েছে:

• একটি নির্দিষ্ট আকারের উপাদান সহ একটি শিরোনাম
• একটি পাদচরণ
• একটি স্ক্রোলবার সহ একটি পাশ বার যা অবশিষ্ট উচ্চতা দখল করে
• সন্তুষ্ট

আমি ফ্লেক্সবক্সগুলি ব্যবহার করেছি তবে আরও সাধারণ উপায়ে, কেবলমাত্র বৈশিষ্ট্য প্রদর্শন: নমনীয় এবং ফ্লেক্স-দিকনির্দেশ: সারি | কলাম :

আমি কৌণিক ব্যবহার করি এবং আমি চাই আমার উপাদানগুলির আকারগুলি তাদের প্যারেন্ট উপাদানগুলির 100% হয়।

কীটি সমস্ত পিতামাতার আকার সীমাবদ্ধ করার জন্য আকার (পার্সেন্টে) সেট করা হয়। নিম্নলিখিত উদাহরণে মাইয়াপ উচ্চতার ভিউপোর্টের 100% রয়েছে।

প্রধান উপাদানটির ভিউপোর্টের 90% অংশ রয়েছে, কারণ শিরোনাম এবং পাদচরণ 5% রয়েছে।

আমি এখানে আমার টেমপ্লেট পোস্ট করেছি: https://jsfiddle.net/abreneliere/mrjh6y2e/3

       body{
        margin: 0;
        color: white;
        height: 100%;
    }
    div#myapp
    {
        display: flex;
        flex-direction: column;
        background-color: red; /* <-- painful color for your eyes ! */
        height: 100%; /* <-- if you remove this line, myapp has no limited height */
    }
    div#main /* parent div for sidebar and content */
    {
        display: flex;
        width: 100%;
        height: 90%; 
    }
    div#header {
        background-color: #333;
        height: 5%;
    }
    div#footer {
        background-color: #222;
        height: 5%;
    }
    div#sidebar {
        background-color: #666;
        width: 20%;
        overflow-y: auto;
     }
    div#content {
        background-color: #888;
        width: 80%;
        overflow-y: auto;
    }
    div.fized_size_element {
        background-color: #AAA;
        display: block;
        width: 100px;
        height: 50px;
        margin: 5px;
    }

এইচটিএমএল:

<body>
<div id="myapp">
    <div id="header">
        HEADER
        <div class="fized_size_element"></div>

    </div>
    <div id="main">
        <div id="sidebar">
            SIDEBAR
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
        </div>
        <div id="content">
            CONTENT
        </div>
    </div>
    <div id="footer">
        FOOTER
    </div>
</div>
</body>

Answer 28

মিঃ এলিয়েনের ধারণাটি ছড়িয়ে দেওয়া ...

এটি CSS3 সক্ষম ব্রাউজারগুলির জন্য জনপ্রিয় ফ্লেক্স বক্সের চেয়ে একটি ক্লিনার সমাধান বলে মনে হচ্ছে।

কন্টেন্ট ব্লকে ক্যালক () সহ কেবল ন্যূনতম উচ্চতা (উচ্চতার পরিবর্তে) ব্যবহার করুন।

ক্যালক () 100% দিয়ে শুরু হয় এবং শিরোলেখ এবং পাদলেখের উচ্চতাগুলি বিয়োগ করে (প্যাডিং মানগুলি অন্তর্ভুক্ত করার প্রয়োজন)

"উচ্চতা" এর পরিবর্তে "ন্যূনতম উচ্চতা" ব্যবহার বিশেষভাবে কার্যকর তাই এটি জাভাস্ক্রিপ্ট রেন্ডার করা সামগ্রী এবং অ্যাঙ্গুলার 2 এর মতো জেএস ফ্রেমওয়ার্কগুলির সাথে কাজ করতে পারে। অন্যথায়, জাভাস্ক্রিপ্ট রেন্ডার করা সামগ্রীটি দৃশ্যমান হওয়ার পরে গণনা পৃষ্ঠার নীচে পাদলেখকে চাপ দেবে না।

উভয়ের জন্য 50px উচ্চতা এবং 20px প্যাডিং ব্যবহার করে এখানে শিরোনাম এবং পাদচরণের একটি সহজ উদাহরণ।

এইচটিএমএল:

<body>
    <header></header>
    <div class="content"></div>
    <footer></footer>
</body>

CSS:

.content {
    min-height: calc(100% - (50px + 20px + 20px + 50px + 20px + 20px));
}

অবশ্যই গণিত সরল করা যেতে পারে তবে আপনি ধারণাটি পেয়ে যান ...

Answer 29

বুটস্ট্র্যাপে:

সিএসএস স্টাইল:

html, body {
    height: 100%;
}

---

1) অবশিষ্ট পর্দার স্থানের উচ্চতাটি কেবল পূরণ করুন:

<body class="d-flex flex-column">
  <div class="d-flex flex-column flex-grow-1>

    <header>Header</header>
    <div>Content</div>
    <footer class="mt-auto">Footer</footer>

  </div>
</body>

---

2) অবশিষ্ট পর্দার স্থানের উচ্চতা পূরণ করুন এবং সামগ্রীর মূল উপাদানটির মাঝখানে প্রান্তিককরণ করুন:

<body class="d-flex flex-column">
  <div class="d-flex flex-column flex-grow-1">

    <header>Header</header>
    <div class="d-flex flex-column flex-grow-1 justify-content-center">Content</div>
    <footer class="mt-auto">Footer</footer>

  </div>
</body>

Answer 30

এটি পিবল এর সমাধানটির আমার ন্যূনতম সংস্করণ। আইই 11 এ কাজ করার কৌশলটি খুঁজে পেতে চিরকালের জন্য চেষ্টা করেছিল। (ক্রোম, ফায়ারফক্স, এজ এবং সাফারিতেও পরীক্ষিত)

<!DOCTYPE html>
<html>
<head>
<style>
html {
    height: 100%;
    }
body {
    height: 100%;
    margin: 0;
    }
section {
    display: flex;
    flex-direction: column;
    height: 100%;
    }
div:first-child {
    background: gold;
    }
div:last-child {
    background: plum;
    flex-grow: 1;
    }
</style>
</head>
<body>
    <section>
      <div>FIT</div>
      <div>GROW</div>
    </section>
</body>
</html>