ডিভ উচ্চতা 100% এবং সামগ্রীতে ফিট করার জন্য প্রসারিত হয়

Question

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

এখানে আমার সিএসএসের সরলীকরণ রয়েছে:

body {
    height:100%;
    background:red;
}

#some_div {
    height:100%;
    background:black;
}

আমি পৃষ্ঠাটি একবার স্ক্রোল করলে, কালোভাব শেষ হয়ে যায় এবং সামগ্রীটি লাল পটভূমিতে প্রবাহিত হয়। আমি পোস্টটিটোনটিকে # সুম_ডিভ-তে আপেক্ষিক বা নিখুঁতভাবে সেট করি কিনা তা বিবেচ্য নয়, সমস্যাটি যেভাবেই ঘটে। #Some_div এর লিখিত সামগ্রীটি বেশিরভাগ ক্ষেত্রে একেবারে স্থিত হয় এবং এটি একটি ডাটাবেস থেকে গতিশীলভাবে উত্পন্ন হয় যাতে এর উচ্চতা আগে থেকে জানা যায় না।

সম্পাদনা: সমস্যার একটি স্ক্রিনশট এখানে:

Comments

এটি কয়েক সপ্তাহ আগে জিজ্ঞাসা করা হয়েছিল। আমি এই প্রশ্নটি খুঁজে পেতে পারি কিনা তা দেখতে পাব। আমি বিশ্বাস করি যে আমি এটিতে মন্তব্য করেছি। সম্পাদন করা আমি বিশ্বাস করি আপনার প্রশ্নের এই অনুরূপ: stackoverflow.com/questions/9398313/...

— jmbertucci

আরও ভাল বোঝার জন্য আপনার কোড দয়া করে

— সন্দীপ 18

আপনি কি আপনার সম্পূর্ণ কোড pls পোস্ট করতে পারেন

— সোভেন বিদার

আপনি পিএইচপি কোড, সিএসএস এবং জাভাস্ক্রিপ্টের আমার হাজার হাজার লাইন চান? আমি প্রশ্নের সাথে প্রাসঙ্গিক CSS এর অংশটি পোস্ট করেছি ...

— জোয়

NECROPOST একটি Go: ওভারফ্লো প্রপার্টি সেট করা সাধারণত এই জাতীয় সমস্যার সমাধান করে যেখানে কোনও ডিভের ভিতরে থাকা বিষয়বস্তু এটি পূর্ববর্তী overflow: hidden;, ( overflow: scroll;, ইত্যাদি) প্রসারিত করে ।

— অ্যালবার্টেঞ্জেলবি

Answer 1

মূলত সিএসএস শৈলীতে আপনার কী করা উচিত তা এখানে div

display: block;
overflow: auto;

আর স্পর্শ করবেন না height

Comments

দুর্দান্ত কাজ করেছেন যদিও পর্যাপ্ত সামগ্রী ছিল না তখন উচ্চতা পূরণ করার জন্য আমাকে যুক্ত height: 100%করতে html, bodyএবং কনটেইনার ডিভের প্রয়োজন।

— নিকো হুইসামেন

আশ্চর্যজনক সমাধান তবে আপনি যদি উচ্চমাত্রাকে কোনও প্রতিক্রিয়াযুক্ত উইন্ডো ফিটিংয়ের মতো কিছু করতে পারেন তবে আপনি আসলে উচ্চতা স্পর্শ করতে পারেন

— অ্যালেক্সিস রাবাগো কারভাজাল

display: block;দরকার কি ? ডিভগুলি ইতিমধ্যে ব্লক-স্তরের উপাদান।

— ম্যাক্স হাইবার

এটি আমার জন্য একটি অভ্যন্তরীণ স্ক্রোলবার যুক্ত করেছে (উভয় অনুভূমিক এবং উল্লম্ব)

— নাথান এইচ

আপনি যদি এখনও বাচ্চাদের উপাদানগুলির তুলনায় পিতামণ্ডল উপাদানটি খানিকটা লম্বা হন তবে কোনও অতিরিক্ত স্পেস এবং / অথবা  , তাদের সরিয়ে নিন। লাইন-উচ্চতা সামঞ্জস্য করার চেষ্টা করুন। উদাহরণস্বরূপ আমি রেখেছি line-height: 0, কারণ আমার পাঠ্যের দরকার নেই, কেবল একটি চিত্র দেখানোর জন্য।

— জোরগাটোন

Answer 2

সেট heightথেকে autoএবং min-heightথেকে 100%। এটি বেশিরভাগ ব্রাউজারগুলির জন্য এটি সমাধান করা উচিত।

body {
  position: relative;
  height: auto;
  min-height: 100% !important;
}

Comments

আইএমও, এই প্রশ্নের উত্তর দেয় "আমি কীভাবে ডিভকে সবসময় নীচের দিকে যেতে পারি অভ্যন্তরীণ সামগ্রীতে ফিট করতে?" বর্তমানে চিহ্নিত চিহ্নিত উত্তরের চেয়ে ভাল, যা ডিভ / বডি এর সামগ্রীতে ফিট করার জন্য প্রসারিত নিশ্চিত করার চেয়ে ওভারফ্লো-স্ক্রোলিংকে সক্রিয় করে। +1

— জামার্জ 858

আমার মামলার জন্য কাজ করেছেন। ধন্যবাদ!

— টাইসন নিরো

এটি লক্ষণীয় যে কোনও কারণে, এটি যদি heightহয় 100%এবং min-heightহয় তবে এটি কাজ করে না auto- আমি এই ক্ষেত্রে এগুলি বিনিময়যোগ্য হওয়ার প্রত্যাশা করব, তবে দেখে মনে হচ্ছে তারা তা নয়।

— পেট্রেন

Answer 3

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

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

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

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

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

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

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

Answer 4

আপনি যদি কেবল এইটি ছেড়ে যান height: 100%এবং ব্যবহার display:block;করেন divতবে এটির অভ্যন্তরের সামগ্রীর মতোই স্থান নেবে div। এইভাবে সমস্ত পাঠ্য কালো পটভূমিতে থাকবে।

Comments

আপনি কোথায় ব্যবহার করেছেন display: block? আমি আপনার প্রশ্নে এটি দেখতে পাচ্ছি না।

— অরবিট

রনি এটির পরামর্শ দেওয়ার পরে আমি এটিকে # সোমি_ডিভ-এ যুক্ত করেছি, তবে সমস্যাটি ঠিক হয়নি।

— জোয়ে

আপনি কি ভাসা যোগ করার চেষ্টা করতে পারেন: কিছুই নয়; একই #some_div CSS এ

— RonnieVDPoel

পরিবর্তে float: none;, ব্যবহার করুন clear:both;। এটি একই জিনিসটি করে তবে আরও ক্রস ব্রাউজার, @ রনিভিডিপিওয়েল

— ক্যানাইডাইড

Answer 5

এই প্রশ্নটি পুরানো হতে পারে তবে এটি আপডেটের দাবি রাখে। এটি করার আরেকটি উপায় এখানে রয়েছে:

#yourdiv {
    display: flex;
    width:100%;
    height:100%;
}

Comments

আপনি যদি কোনও পুরানো প্রশ্নে পোস্ট করতে চলেছেন তবে বর্তমান মানগুলি (একে একে ফ্লেক্সে কোনও উপসর্গ নেই) ব্যবহার করার পরামর্শ দেওয়া হচ্ছে।

— jhpratt

দুঃখিত আপনি কী সম্পর্কে কথা বলছেন তা আমি জানি না।

— user9459537

ফ্লেক্স উপসর্গগুলি বেশ কিছুদিনের জন্য প্রয়োজনীয় ছিল না।

— jhpratt

আর কোনটি?

— user9459537

Answer 6

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

body { 
    min-height:100%; 
    background:red; 
} 

#some_div {
    min-height:100%; 
    background:black; 
} 

আই 6 এবং পূর্ববর্তী সংস্করণগুলি ন্যূনতম-উচ্চতার সম্পত্তি সমর্থন করে না।

আমি মনে করি সমস্যাটি হ'ল আপনি যখন দেহের উচ্চতা ১০০% করার কথা বলছেন, তখন এটির পটভূমিটি কেবলমাত্র একটি ব্রাউজারের "ভিউপোর্ট" এর হাইগেটের মতো লম্বা হতে পারে (দেখার ক্ষেত্র যা ব্রাউজারের সরঞ্জামদণ্ড এবং স্থিতি বার এবং মেনুবারগুলি বাদ দেয় না এবং উইন্ডো প্রান্ত)। যদি সামগ্রীটি একটি ভিউপোর্টের চেয়ে লম্বা হয় তবে এটি ব্যাকগ্রাউন্ডে উত্সর্গীকৃত উচ্চতা উপচে পড়বে।

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

Answer 7

পুরানো প্রশ্ন, তবে আমার ক্ষেত্রে আমি এটি position:fixedআমার জন্য সমাধানটি ব্যবহার করে খুঁজে পেয়েছি । আমার পরিস্থিতি যদিও কিছুটা আলাদা ছিল। divপৃষ্ঠাটি লোড করার সময় আমার এটির প্রয়োজনীয় লোডিং অ্যানিমেশন সহ একটি ওভারলেড আধা স্বচ্ছ ছিল। সুতরাং ব্যবহার height:auto / 100%বা min-height: 100%উভয়ই উইন্ডো পূরণ করেছে তবে অফ-স্ক্রিন অঞ্চল নয়। position:fixedব্যবহারকারীর সাথে এই ওভারলে স্ক্রোলটি তৈরি করে , তাই এটি সর্বদা দৃশ্যমান অঞ্চলটি coveredেকে রাখে এবং আমার প্রিললোডিং অ্যানিমেশনটিকে স্ক্রিনের কেন্দ্রিক করে রাখে।

Answer 8

আপনার সিএসডি আইডি # সুম_ডিভ - এ এই দুটি লাইন যুক্ত করুন

display: block;
overflow: auto;

এর পরে আপনি যা খুঁজছেন তা পাবেন!

Answer 9

আমি পুরোপুরি নিশ্চিত নই যে আমি প্রশ্নটি বুঝতে পেরেছি কারণ এটি মোটামুটি সরল উত্তর, তবে এখানে যায় ... :)

আপনি কি ধারকটির ওভারফ্লো সম্পত্তিটি দৃশ্যমান বা অটোতে সেট করার চেষ্টা করেছেন ?

#some_div {
    height:100%;
    background:black; 
    overflow: visible;
    }

আপনার গতিশীল ধারকটির যে পরিমাণ আকার প্রয়োজন তা কালো পাত্রে চাপ দেওয়া উচিত যা যুক্ত করা। আমি অটোতে দৃশ্যমান পছন্দ করি কারণ অটো স্ক্রোল বারগুলি নিয়ে আসে বলে মনে হয় ...

Answer 10

আধুনিক ব্রাউজারগুলি "ভিউপোর্ট উচ্চতা" ইউনিটকে সমর্থন করে। এটি উপলব্ধ ভিউপোর্টের উচ্চতায় ডিভটি প্রসারিত করবে। আমি এটি অন্য যে কোনও পদ্ধতির চেয়ে বিশ্বাসযোগ্য বলে মনে করি।

#some_div {
    height: 100vh;
    background: black;
}

Answer 11

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

display:block;
overflow:auto;
height: 100%;

এতে সামগ্রী হিসাবে আপনার প্রতিটি গতিশীল ডিভ অন্তর্ভুক্ত থাকবে। ধরুন আপনার ক্লাসের সাথে একটি সাধারণ ডিভ থাকলে এটি সামগ্রী অনুযায়ী প্রতিটি গতিশীল ডিভের উচ্চতা বাড়িয়ে তুলবে

Answer 12

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

 display: inline-block;

আমার এই কাজ করে

Answer 13

অবস্থান ছাড়াই ওভারলে: স্থির

সাম্প্রতিক মেনুতে আমি এটি খুঁজে বের করার একটি দুর্দান্ত উপায় হ'ল শরীরটি সেট করছে:

position: relative

এবং আপনার মোড়কের ক্লাসটি এভাবে সেট করুন:

#overlaywrapper {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: #00000080;
    z-index: 100;
}

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

Answer 14

ফ্লেক্স ব্যবহার করুন

.parent{
    display: flex
}

.fit-parent{
    display: flex;
    flex-grow: 1
}

Answer 15

ঠিক আছে, আমি এরকম কিছু চেষ্টা করেছি:

শরীর (স্বাভাবিক)

#MainDiv { 
  /* where all the content goes */
  display: table;
  overflow-y: auto;
}

এটি লেখার সঠিক উপায় নয়, তবে আপনি যদি টেবিল হিসাবে প্রধান ডিভ প্রদর্শন করেন তবে এটি প্রসারিত হয় এবং তারপরে আমি স্ক্রোল বারগুলি প্রয়োগ করি।