টুইটার বুটস্ট্র্যাপ: 100% উচ্চতা সহ ধারক মধ্যে ডিভ


129

টুইটার বুটস্ট্র্যাপ (2) ব্যবহার করে আমার কাছে একটি এনএভি বার সহ একটি সাধারণ পৃষ্ঠা রয়েছে এবং containerআমি ভিতরে 100% উচ্চতা (পর্দার নীচে) দিয়ে একটি ডিভি যুক্ত করতে চাই। আমার সিএসএস-ফু মরিচা, এবং আমি এটি কাজ করতে পারি না।

সাধারণ এইচটিএমএল:

<body>
  <div class="navbar navbar-fixed-top">
   <!-- Rest of nav bar chopped from here -->
  </div>
  <div class="container fill">
    <div id="map"></div> <!-- This one wants to be 100% height -->
  </div>
</body>

বর্তমান সিএসএস:

#map {
    width: 100%;
    height: 100%;
    min-height: 100%;
}

html, body {
    height: 100%;
}

.fill { 
    min-height: 100%;
}
  • সম্পাদনা করুন *

নীচের পরামর্শ অনুসারে আমি ফিল ক্লাসে উচ্চতা যুক্ত করেছি। তবে, সমস্যাটি হল আমি শীর্ষে স্থির নববারের জন্য অ্যাকাউন্টে দেহের জন্য প্যাডিং-টপ যুক্ত করব। এটি "মানচিত্র" বিভাগের 100% উচ্চতাকে প্রভাবিত করে এবং এর অর্থ একটি স্ক্রোলবারটি যুক্ত হয়ে গেছে - যেমনটি এখানে দেখা হয়েছে: http://jsfiddle.net/S3Gvf/2/ কেউ আমাকে কীভাবে ঠিক করতে পারেন?


1
সুতরাং আপনি কেবল যে দিকটি সব দিকে প্রসারিত করতে চান?
আন্দ্রেস ইলিচ

1
হ্যাঁ, আমি এটি এনএভি ডিভের পরে বাকি স্থানটি পূরণ করতে চাই
ম্যাট রবার্টস

উত্তর:


129

বর্গ সেট .fillকরতেheight: 100%

.fill { 
    min-height: 100%;
    height: 100%;
}

JSFiddle

(আমি এর জন্য একটি লাল পটভূমি রেখেছি #mapযাতে আপনি দেখতে পান যে এটি 100% উচ্চতা নেয়)


ধন্যবাদ, পরে চেষ্টা করে আবার রিপোর্ট করব। বিশ্বাস করতে পারি না আমি সেই সহজ ফিক্সটি মিস করেছি :)
ম্যাট রবার্টস

2
ধন্যবাদ, এই ধরণের কাজ, তবে টুইটার বুটস্ট্র্যাপ ন্যাভ, যা স্থির অবস্থান, মানচিত্রটি নীচে চলে যায় - আপনাকে নীচে স্ক্রোল করতে হবে। পুরো উপলব্ধ স্ক্রিন স্পেসে নাইন বারের বার বার ডিভ স্প্যান কীভাবে তৈরি করতে হয় তা আমি জানি না।
ম্যাট রবার্টস

2
jsfiddle.net/S3Gvf/4box-sizing:border-box; একটি সহজ কাজের জন্য প্যাডিং (বডি ট্যাগ) সহ উপাদানটিতে ব্যবহার করুন
হোরেেন

1
আমি কীভাবে CSS3 ভুডু কাজ করে তা খুব নিশ্চিত নই, তবে এটি কাজ করে :) অনেক অনেক ধন্যবাদ!
ম্যাট রবার্টস

1
এই উদাহরণে # ম্যাপটি আসলে নভবারের পিছনে অস্পষ্ট।
দেখুন Picture Window

37

2019 আপডেট করুন

ইন বুটস্ট্র্যাপ 4 , flexbox একটি পেতে ব্যবহার করা যেতে পারে পূর্ণ উচ্চতা লেআউট অবশিষ্ট স্থান fills।

প্রথমত, ধারক (পিতামাতাকে) পূর্ণ উচ্চতা হওয়া দরকার:

বিকল্প 1_ এর জন্য একটি শ্রেণি যুক্ত করুন min-height: 100%;। মনে রাখবেন যে পিতামাতার একটি সংজ্ঞায়িত উচ্চতা থাকলে ন্যূনতম উচ্চতা কেবলমাত্র কাজ করবে :

html, body {
  height: 100%;
}

.min-100 {
    min-height: 100%;
}

https://www.codeply.com/go/dTaVyMah1U

বিকল্প 2_ vhইউনিট ব্যবহার করুন :

.vh-100 {
    min-height: 100vh;
}

https://www.codeply.com/go/kMahVdZyGj

তারপরে, ধারকটিতে d-flex flex-columnএবং flex-grow-1যে কোনও শিশু ডিভ (যেমন row:) -এ আপনি অবশিষ্ট উচ্চতা পূরণ করতে চান তার উপর ফ্লেক্সবক্স দিকনির্দেশ কলামটি ব্যবহার করুন ।

আরও দেখুন:
বুটস্ট্র্যাপ 4 নববার এবং সামগ্রীগুলি উচ্চতা পূর্ণ করুন ফ্লেক্সবক্স
বুটস্ট্র্যাপ - শিরোনাম এবং পাদচরণের মধ্যে তরল ধারকটি পূরণ করুন
কীভাবে সারি প্রসারিত অবশিষ্ট উচ্চতা তৈরি করবেন


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

আপনি কি সত্যিই ভাবেন যে এটি একটি ডাউনটাউটের যোগ্য? "কেবলমাত্র দ্বিতীয় পাত্রে তৈরি করা যা উইন্ডোর নীচের উচ্চতাটির বাকি অংশটি নিয়ে যায়" .. কীভাবে এটি কাজ করবে তার উদাহরণ আপনার আছে? পুরো পয়েন্টটি height:100%কেবল নীচের উচ্চতার বাকী অংশ গ্রাস করে না, বরং এর পরিবর্তে উল্লম্ব স্ক্রোলবার তৈরি করে ভিউপোর্ট উচ্চতার 100% গ্রাস করে। এজন্য মানচিত্রে গৃহীত উত্তরের নীচে স্কলিং করা দরকার।
জিম

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

1
ঠিক আছে, উত্তরে বর্ণিত হিসাবে "ধারকটিতে ফ্লেক্সবক্স দিকনির্দেশ কলাম ডি-ফ্লেক্স ফ্লেক্স-কলাম ব্যবহার করুন এবং যে কোনও শিশু ডিভ (যেমন: সারি) -এ আপনি অবশিষ্ট উচ্চতা পূরণ করতে চান" তে ফ্লেক্স-গ্রো -1 ব্যবহার করুন "... পিতামাতার
বর্ণিত

3

এটা খুব সহজ। তুমি ব্যবহার করতে পার

.fill .map 
{
  min-height: 100vh;
}

আপনি আপনার প্রয়োজন অনুযায়ী উচ্চতা পরিবর্তন করতে পারেন।


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