টুইটার বুটস্ট্র্যাপ 3 উচ্চ স্তরের পূর্ণ উচ্চতা

Question

আমি টুইটার বুটস্ট্র্যাপ 3 দিয়ে দ্বি-কলাম পূর্ণ উচ্চতার বিন্যাস তৈরি করার চেষ্টা করছি It মনে হচ্ছে টুইটার বুটস্ট্র্যাপ 3 সম্পূর্ণ উচ্চতার বিন্যাস সমর্থন করে না। আমি কি করতে চাই:

  +-------------------------------------------------+
  |                     Header                      |
  +------------+------------------------------------+
  |            |                                    |
  |            |                                    |
  |Navigation  |         Content                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  +------------+------------------------------------+

যদি বিষয়বস্তু বৃদ্ধি পায় তবে ন্যাভও বাড়তে হবে।

• প্রতিটি পিতামাতার জন্য উচ্চতা 100% কাজ করে না কারণ এমন একটি বিষয় রয়েছে যেখানে সামগ্রীতে একটি লাইন থাকে।
• অবস্থান নিখুঁত ভুল উপায় বলে মনে হচ্ছে
• display: tableএবং display:table-cellসমস্যাটি সমাধান করুন, তবে এটি মার্জিতভাবে নয়

এইচটিএমএল:

    <div class="container">
      <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-9"></div>
      </div>
    </div>

এটি ডিফল্ট টুইটার বুটস্ট্র্যাপ 3 ক্লাস দিয়ে তৈরি করার উপায় আছে ?

Comments

সেই নেভিগেশন + বিষয়বস্তু উপাদানটির কি অবশিষ্ট ভিউপোর্ট (পর্দা) উচ্চতাটি আবরণ করতে হবে?

— শেখর কে শর্মা

হ্যাঁ. কেবল সাফ করার জন্য: শিরোনাম + সামগ্রী = ভিউপোর্টের 100%, যদি সামগ্রীর উচ্চতা <= ভিউপোর্ট উচ্চতা বিয়োগ শিরোনামের উচ্চতা। দরিদ্র

— ইংলিশের

আমি বুঝতে পারছি না, আপনি কেবল .row কে ব্যাকগ্রাউন্ড দিতে পারবেন না এবং কল-এমডি -9 কে অংশটি coverাকতে বা তদ্বিপরীত করতে দিতে পারবেন? সারিটিকে উচ্চতা 100% প্রদানের ক্ষেত্রে কীভাবে এনএভি উচ্চতা 100% দেওয়া এবং কেবল কল-এমডি -9 গতিশীলভাবে বাড়তে দেওয়া যায়?

— ক্রিস পিটারসন

Answer 1

সম্পাদনা: ইন বুটস্ট্র্যাপ 4 , নেটিভ শ্রেণীর করতে পুরো উচ্চতা COLUMNS (উত্পাদন ডেমো ) কারণ তারা পরিবর্তিত তাদের গ্রিড সিস্টেম flexbox করতে। (বুটস্ট্র্যাপ 3 পড়ুন)

---

নেটিভ বুটস্ট্র্যাপ 3.0.০ ক্লাস আপনার বর্ণনার যে লেআউটটিকে সমর্থন করে না, তবুও আমরা কিছু কাস্টম সিএসএস সংহত করতে পারি যা এটি অর্জনের জন্য সিএসএস টেবিল ব্যবহার করে ।

বুটপ্লি ডেমো / কোডপেন

মার্কআপ:

<header>Header</header>
<div class="container">
    <div class="row">
        <div class="col-md-3 no-float">Navigation</div>
        <div class="col-md-9 no-float">Content</div>
    </div>
</div>

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

html,body,.container {
    height:100%;
}
.container {
    display:table;
    width: 100%;
    margin-top: -50px;
    padding: 50px 0 0 0; /*set left/right padding according to needs*/
    box-sizing: border-box;
}

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

.row .no-float {
  display: table-cell;
  float: none;
}

উপরের কোডটি পূর্ণ উচ্চতার কলামগুলি অর্জন করবে (আমরা সংযুক্ত কাস্টম CSS-টেবিল বৈশিষ্ট্যের কারণে) এবং এর সাথে ) এবং মাঝারি স্ক্রিনের প্রস্থের জন্য এবং তার উপরের অনুপাত 1: 3 (নেভিগেশন: সামগ্রী) - (বুটস্ট্র্যাপের ডিফল্ট ক্লাসগুলির কারণে: কল-এমডি) -3 এবং কল-এমডি -9)

বিশেষ দ্রষ্টব্য:

1) বুটস্ট্র্যাপের নেটিভ কলামের ক্লাসগুলিতে গোলমাল না করার জন্য আমরা no-floatমার্কআপের মতো আরও একটি ক্লাস যুক্ত করি এবং কেবল সেট করে display:table-cellএবং float:noneএই ক্লাসে (যেমন কলামের ক্লাসগুলিতে নিজেরাই প্রয়োগ করা হয়)।

2) যদি আমরা কেবল একটি নির্দিষ্ট ব্রেক-পয়েন্টের জন্য (মিডিয়াম স্ক্রিনের প্রস্থ এবং উপরে বলে) সিসিএস-টেবিল কোডটি ব্যবহার করতে চাই তবে মোবাইল স্ক্রিনগুলির জন্য আমরা আমাদের কাস্টম সিএসএসের মধ্যে আমাদের কাস্টম সিএসএস মোড়ানোর চেয়ে সাধারণ বুটস্ট্র্যাপ আচরণে ফিরে যেতে চাই want মিডিয়া ক্যোয়ারী, বলুন:

@media (min-width: 992px) {
  .row .no-float {
      display: table-cell;
      float: none;
  }
}

কোডপেন ডেমো

এখন, ছোট পর্দার জন্য, কলামগুলি ডিফল্ট বুটস্ট্র্যাপ কলামগুলির মতো আচরণ করবে (প্রতিটি সম্পূর্ণ প্রশস্ততা পাচ্ছে)।

3) যদি সমস্ত স্ক্রিনের প্রস্থের জন্য 1: 3 অনুপাতের প্রয়োজন হয় - তবে বুটস্ট্র্যাপের কল-এমডি- * ক্লাসগুলি মার্কআপ থেকে অপসারণ করা আরও ভাল কারণ সেগুলি কীভাবে ব্যবহার করা হয় তা বোঝানো হয় না।

কোডপেন ডেমো

Comments

হুঁ। এটি আসলে যা আমি খুঁজছি তা নয়, দেশীয় বুটস্ট্র্যাপ 3 ক্লাসের সাথে কোনও সমাধান থাকতে পারে? যাই হোক ধন্যবাদ!

— uladzimir

ভাসা যোগ করার পরে আমার পক্ষে কাজ করে: কিছুই নয়; কলামগুলিতে, তবে জেএসে এটি প্রয়োজনীয় নয়। কেন? আপডেট: @ মিডিয়া - কারণ

— uladzimir

@ জুবজব - আমি আমার উত্তর আপডেট করেছি এবং বুটপ্লাই করছি। কলম-এমডি -3 এবং কল-এমডি -9 - নেটিভ ক্লাসগুলিতে একটি অতিরিক্ত ক্লাস যুক্ত করে আমরা নিশ্চিত করতে পারি যে এটি অন্য কোডগুলিকে গোলমাল করবে না।

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

সুতরাং উত্তরটি হবে: "না আপনি এটি বক্সের বাইরে বুটস্ট্র্যাপ ক্লাস দিয়ে করতে পারবেন না"?

— ইরান otzap

@ মেগলিয়ো দয়া করে আমার সম্পাদিত উত্তরটি পড়ুন - তা উল্লেখ করার জন্য ধন্যবাদ

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

Answer 2

আপনি padding-bottom: 100%; margin-bottom: -100%;কৌতুক দিয়ে যা চান তা অর্জন করতে পারেন , আপনি কি এই ঝাঁকুনিতে দেখতে পাচ্ছেন ?

আমি আপনার এইচটিএমএলকে কিছুটা পরিবর্তন করেছি, তবে আপনি নিম্নলিখিত কোড সহ নিজের HTML এর সাথে একই ফলাফল অর্জন করতে পারেন

.col-md-9 {
    overflow: hidden;
}

.col-md-3 {
    padding-bottom: 100%;
    margin-bottom: -100%;
}

Comments

ঠিক আছে. আমি প্রশ্ন আপডেট করব। আমার ডায়নামিক পৃষ্ঠা রয়েছে (কল-এমডি -9 বাড়তে পারে), সুতরাং আপনার রূপটি কাজ করা উচিত নয়, তবে আমি এটি পরীক্ষা করব। ধন্যবাদ

— uladzimir

আমি প্রশ্নে যা বোঝাতে চাইছি তা নয়। আমি পূর্ণ উচ্চতার কলামগুলি চাই, যদি কল-এমডি -9 এর পাঠ্য উচ্চতার এক লাইন থাকে তবে সমস্ত একই পরিমাণ 100% হওয়া উচিত - শিরোনামের উচ্চতা বা সরল 100%। আমি এই কৌশলটি চেষ্টা করেছি, শুধুমাত্র 10000px, -10000px এর মতো মান সহ। তবে আপনার উত্তরের জন্য ধন্যবাদ।

— uladzimir

আমার কলামগুলি বেশি ছিল, সুতরাং আমাকে প্যাডিং-ডাউনটি সংশোধন করতে হয়েছিল: 10000%; মার্জিন-নীচে: -10000%; এবং এটি কৌতুক করেছে। অন্যথায় আমার ধারণা 100% পৃষ্ঠার উচ্চতা নিয়ে কাজ করেছে

— টুলকিট

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

— টিম

Answer 3

খাঁটি সিএসএস সমাধান

ওয়ার্কিং ফিডল

কেবল CSS2.1 ব্যবহার করে, কোনও উচ্চতা বা প্রস্থ নির্দিষ্ট না করেই সমস্ত ব্রাউজারগুলির সাথে (IE8 +) কাজ করুন।

এর অর্থ হ'ল যদি আপনার শিরোনাম হঠাৎ করে আরও দীর্ঘ হয়, বা আপনার বাম নেভিগেশনটি আরও বড় করতে হবে, আপনাকে কোনও কিছু ঠিক করতে হবে না ।

সম্পূর্ণরূপে প্রতিক্রিয়াশীল, সহজ এবং পরিষ্কার এবং পরিচালনা করা খুব সহজ।

<div class="Container">
    <div class="Header">
    </div>
    <div class="HeightTaker">
        <div class="Wrapper">
            <div class="LeftNavigation">
            </div>
            <div class="Content">
            </div>
        </div>
    </div>
</div>

ব্যাখ্যা: ধারক divশরীরের 100% উচ্চতা লাগে, এবং তিনি 2 বিভাগে বিভক্ত করা হচ্ছে। শিরোনাম বিভাগটি তার প্রয়োজনীয় উচ্চতা পর্যন্ত ছড়িয়ে HeightTakerযাবে এবং বাকি অংশটি নেবে। এটি কীভাবে অর্জিত হয়? ধারকটির সাথে 100% উচ্চতা (ব্যবহার করে :before) এর পাশ দিয়ে একটি খালি উপাদান ভাসিয়ে HeightTakerদিয়ে এবং শেষে পরিষ্কার শুল্ক (ব্যবহার করে :after) দিয়ে খালি উপাদানটি দিয়ে । সেই উপাদানটি ভাসমান উপাদানগুলির সাথে একই লাইনে থাকতে পারে না, তাই তিনি শেষ অবধি ঠেলাঠেলি করেন। যা নথির ঠিক 100%।

এটির সাথে HeightTakerআমরা কোনও নির্দিষ্ট উচ্চতা / মার্জিন উল্লেখ না করেই স্প্যানটিকে বাকী ধারক উচ্চতার বাকি অংশটি তৈরি করি।

এর অভ্যন্তরে HeightTakerআমরা একটি সামান্য পরিবর্তন সহ একটি সাধারণ ভাসমান বিন্যাস (প্রদর্শনের মতো কলামটি অর্জন করতে) তৈরি করি .. আমাদের একটি Wrapperউপাদান রয়েছে, যা প্রয়োজন100% উচ্চতাটি কাজ করার ।

হালনাগাদ

বুটস্ট্র্যাপ ক্লাস সহ ডেমো এখানে । (আমি আপনার লেআউটে মাত্র একটি ডিভ যুক্ত করেছি)

Comments

হ্যাঁ, এটি সর্বাধিক সৌন্দর্য সমাধান। আপনি কি এটি বুটস্ট্র্যাপ ক্লাসের জন্য তৈরি করতে পারেন?

— uladzimir

এবং দয়া করে ব্যাখ্যা করুন, এটি কীভাবে কাজ করে। বর্তমানে এটি অনুমোদিত করা সবচেয়ে উপযুক্ত

— uladzimir

আমি বুটস্ট্র্যাপ জানি না .. দুঃখিত। তবে এটি ব্যবহার করা এত সহজ .. আপনি নিজেরাই এটি করতে পারেন। এটি কীভাবে কাজ করে তার একটি ব্যাখ্যা আমি যুক্ত করব।

— অভ্রহামকুল

@ বাক্সেক্সাবিট আমি একটি ব্যাখ্যা যুক্ত করেছি। আপনার আরও তথ্যের প্রয়োজন হলে আমাকে বলুন।

— অভ্রহামকুল

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

— সাদেঘ

Answer 4

আমি একটি সূক্ষ্ম পরিবর্তন সম্পর্কে ভেবেছিলাম, যা ডিফল্ট বুটস্ট্র্যাপ আচরণ পরিবর্তন করে না। এবং আমি যখন এটির প্রয়োজন হবে তখনই আমি এটি ব্যবহার করতে পারি:

.table-container {
  display: table;
}

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

.table-container .table-row .table-col {
  display: table-cell;
  float: none;
  vertical-align: top;
}

সুতরাং আমি এটি এর মতো ব্যবহার করতে পারি:

<div class="container table-container">
  <div class="row table-row">
    <div class="col-lg-4 table-col"> ... </div>
    <div class="col-lg-4 table-col"> ... </div>
    <div class="col-lg-4 table-col"> ... </div>
  </div>
</div>

Comments

আমার জন্য সুন্দরভাবে কাজ করেছেন (বুটস্ট্র্যাপ 3 ব্যবহার করে)

— গ্যারি রিখটার

আমি উপরের সমাধানগুলির মধ্যে একটিরও কাজ পেতে পারি না, উল্লম্ব-সারিবদ্ধকরণ আমার জন্য কী ছিল।

— নাথান

Answer 5

আমার জ্ঞানের ভিত্তিতে আপনি এটি সম্পাদন করতে 5 টি পর্যন্ত পদ্ধতি ব্যবহার করতে পারেন:

1. CSS ডিসপ্লে টেবিল / টেবিল-সেল বৈশিষ্ট্য ব্যবহার করে বা প্রকৃত সারণী ব্যবহার করে।
2. মোড়কের ভিতরে একটি নিখুঁত অবস্থিত উপাদান ব্যবহার করা।
3. ফ্লেক্সবক্স প্রদর্শন বৈশিষ্ট্যটি ব্যবহার করে তবে আজকের হিসাবে এটির এখনও আংশিক সমর্থন রয়েছে
4. ভুল কলাম কৌশলটি ব্যবহার করে পূর্ণ কলাম উচ্চতা অনুকরণ করুন ।
5. প্যাডিং / মার্জিন কৌশল ব্যবহার করে। উদাহরণ দেখুন ।

বুটস্ট্র্যাপ: এর সাথে আমার খুব বেশি অভিজ্ঞতা নেই তবে আমি মনে করি না তারা এটির জন্য শৈলী সরবরাহ করে।

.row
{
    overflow: hidden;
    height: 100%;
}
.row .col-md-3,
.row .col-md-9 
{
    padding: 30px 3.15% 99999px; 
    float: left;
    margin-bottom: -99999px;
}
.row .col-md-3 p,
.row .col-md-9 p 
{
    margin-bottom: 30px;
}
.col-md-3
{
    background: pink;
    left:0;
    width:25%
}
.col-md-9
{
    width: 75%;
    background: yellow;
}

Comments

ধন্যবাদ, ওরিওল। তুমি দারুন. কিছু পয়েন্ট: 1), 2) হ্যাঁ, তবে আমি যা চাই না 3) এটি একটি সমাধান, তবে কেবল আধুনিক এফএফ এবং ক্রোমের জন্য। সাফারি ফ্লেক্সবক্স 4 এর পুরানো সংস্করণ সমর্থন করে) বুটস্ট্র্যাপ ক্লাস 5 নয়) ডান কলামগুলি বাড়তে পারে। সুতরাং ওভারফ্লো: লুকানো একটি গুরুত্বপূর্ণ লাইন ক্রপ করবে। এটি দুর্দান্ত নয় :) আমি আপনার কোডটি চেষ্টা করব

— uladzimir

Answer 6

আধুনিক এবং খুব সহজ সমাধান:

এইচটিএমএল:

<div class="container">
  <div class="row">
    <div class="col-md-3"></div>
    <div class="col-md-9"></div>
  </div>
</div>

সিএসএস:

.row{
    display: flex;
}

Answer 7

একটি খাঁটি সিএসএস সমাধান যথেষ্ট সহজ এবং এটি কবজ ক্রস ব্রাউজারের মতো কাজ করে।

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

এইচটিএমএল

<div class="container">

  <div class="row">
    <div class="col-xs-12 header"><h1>Header</h1></div>
  </div>

  <div class="row col-wrap">

    <div class="col-md-3 col">
      <h1>Nav</h1>
    </div>

    <div class="col-md-9 col">
      <h1>Content</h1>
    </div>

  </div>
</div>

সিএসএস

.col{
margin-bottom: -99999px;
padding-bottom: 99999px;
}

.col-wrap{
overflow: hidden; 
}  

শুভকামনা!

Comments

দুঃখিত তবে এটি দেখতে ভয়ঙ্কর হ্যাকের মতো যা আপনাকে সন্তানের ধারকের নীচে কোনও উপাদানকে পরম অবস্থানের বিকল্প দেয় না।

— মাত্তিজ

আপনার নীচের সীমানার ব্যাসার্ধ বা ডিভ ব্যাকগ্রাউন্ডে কোনও ধরণের ভিজ্যুয়াল সম্পদ থাকলে ভাল সমাধান নয়।

— র্যান্ডমবয়

Answer 8

সমাধান দুটি উপায়ে অর্জন করা যেতে পারে

1. প্রদর্শন ব্যবহার করে: টেবিল এবং প্রদর্শন: টেবিল-ঘর
2. প্যাডিং এবং নেতিবাচক মার্জিন ব্যবহার করে।

উপরের সমাধানটি পেতে যে ক্লাসগুলি ব্যবহার করা হয় সেগুলি বুটস্ট্র্যাপ ৩ তে সরবরাহ করা হয় না display নেতিবাচক মার্জিন এবং প্যাডিং ক্লাসগুলিও নেই।

সুতরাং এটি অর্জনে আমাদের কাস্টম সিএসএস ব্যবহার করতে হবে।

নীচে প্রথম সমাধান

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

<div class="container">
  <div class="row">
    <div class="col-md-12">
        <div class="page-header">
            <h3>Page-Header</h3>
        </div>
    </div>
  </div>
  <div class="row tablewrapper">
    <div class="col-md-12 tablerowwrapper">
        <div class="col-md-3 sidebar pad_top15">
            <ul class="nav nav-pills nav-stacked">
                <li class="active"><a href="#">Submenuone</a></li>
                <li><a href="#">Submenutwo</a></li>
                <li><a href="#">Submenuthree</a></li>
            </ul>
        </div>
        <div class="col-md-9 content">
            <div class="col-md-12">
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
            </div>
        </div>
    </div>
  </div>

</div>

সংশ্লিষ্ট সিএসএস:

html,body,.container{
        height:100%;
    }
    .tablewrapper{
        display:table;
        height:100%;
    }
    .tablerowwrapper{
        display:table-row;
    }
    .sidebar,.content{
        display:table-cell;
        height:100%;
        border: 1px solid black;
        float:none;
    }
    .pad_top15{
        padding-top:15px;
    }

নীচে দ্বিতীয় সমাধান

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

 <div class="container">
  <div class="row">
    <div class="col-md-12">
        <div class="page-header">
            <h3>Page-Header</h3>
        </div>
    </div>
  </div>
  <div class="row ovfhidden bord_bot height100p">
    <div class="col-md-3 sidebar pad_top15">
            <ul class="nav nav-pills nav-stacked">
                <li class="active"><a href="#">Submenuone</a></li>
                <li><a href="#">Submenutwo</a></li>
                <li><a href="#">Submenuthree</a></li>
            </ul>
        </div>
        <div class="col-md-9 content pad_top15">
            <div class="col-md-12">

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
            </div>
        </div> 
  </div>

</div>

সংশ্লিষ্ট সিএসএস:

html,body,.container{
        height:100%;
    }
    .sidebar,.content{
        /*display:table-cell;
        height:100%;*/
        border: 1px solid black;
        padding-bottom:8000px;
        margin-bottom:-8000px;
    }
    .ovfhidden{
        overflow:hidden;
    }
    .pad_top15{
        padding-top:15px;
    }
    .bord_bot{
        border-bottom: 1px solid black;
    }

Comments

কলামগুলির ভিউপোর্টের 100% উচ্চতা নেই

— uladzimir

দুঃখিত একটি প্রাথমিক শৈলী এইচটিএমএল, শরীর, ধারক {উচ্চতা: 100%; forgot ভুলে গেছেন এই শৈলীটি প্রথম

— দ্রবণটিতে যুক্ত করুন

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

— uladzimir

ওভারফ্লো অপসারণ: সারি থেকে লুকানো। লুকানো সামগ্রী রয়েছে jsfiddle.net/gMPXG/7/ebded/result

— uladzimir

তাতে সমস্যা কী ??

— ব্যবহারকারী 2594152

Answer 9

ঠিক আছে, আমি বুটস্ট্র্যাপ 3.0 ব্যবহার করে একই জিনিস অর্জন করেছি

সর্বশেষতম বুটস্ট্র্যাপের সাথে উদাহরণ

http://jsfiddle.net/HDNQS/1/

এইচটিএমএল:

<div class="header">
    whatever
</div>
<div class="container-fluid wrapper">
    <div class="row">
        <div class="col-md-3 navigation"></div>
        <div class="col-md-9 content"></div>
    </div>
</div>

এসসিএসএস:

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

$headerHeight: 43px;

.navigation, .content {
    display: table-cell;
    float: none;
    vertical-align: top;
}

.wrapper {
    display: table;
    width: 100%;
    margin-top: -$headerHeight;
    padding-top: $headerHeight;
}

.header {
    height: $headerHeight;
}

.row {
    height: 100%;
    margin: 0;
    display: table-row;
    &:before, &:after {
        content: none;
    }
}

.navigation {
    background: #4a4d4e;
    padding-left: 0;
    padding-right: 0;
}

Comments

হ্যাঁ, তবে এটি অনুমোদিত উত্তর হিসাবে একই। ধন্যবাদ

— uladzimir

হ্যাঁ, এটি বেশিরভাগ ক্ষেত্রে একই তবে আপনাকে কিছুটা "টুইটকিংস" যুক্ত করতে হবে (দেখুন content:noneএবং অন্যান্য ছোট জিনিসগুলি)। আমি একটি 'ড্রপ-ইন' প্রতিস্থাপন পোস্ট করতে চেয়েছিলাম যা আমি পাশাপাশি কপিপস্ট করতে পারি

— VAShhh

"উল্লম্ব-সারিবদ্ধ: শীর্ষ" যুক্ত করার জন্য +1। আমি এটি যোগ না করা পর্যন্ত আমার বাম হাতের কলামটি পৃষ্ঠার নীচে আটকে ছিল।

— নয়েজওয়েভ

Answer 10

সুতরাং মনে হচ্ছে আপনার সেরা বিকল্পটি padding-bottomনেতিবাচক margin-bottomকৌশল দ্বারা পাল্টানো সাথে চলেছে ।

আমি দুটি উদাহরণ তৈরি করেছি। একটি <header> ভেতরের সাথে .container , এবং এর বাইরে অন্যটি ।

উভয় সংস্করণ সঠিকভাবে কাজ করা উচিত। নিম্নলিখিত @mediaকোয়েরির ব্যবহারটি নোট করুন যাতে এটি ছোট পর্দার অতিরিক্ত প্যাডিং সরিয়ে দেয় ...

@media screen and (max-width:991px) {
    .content { padding-top:0; }
}

তা ছাড়া, এই উদাহরণগুলির দ্বারা আপনার সমস্যাটি ঠিক করা উচিত।

Comments

আরও ছোট পর্দার অতিরিক্ত প্যাডিং অপসারণ করার জন্য জিও

— ডেভিড মান

বাইরের শিরোলেখের সাথে মিতালটির জন্য থাম্বস আপস, এটিই কেবল আমার মামলার জন্য কাজ করছে।

— টিনুস টেট

Answer 11

আপনি যদি উদ্বিগ্ন সমস্তরাই রঙটি রাখেন তবে এটি করার একটি সহজ উপায় রয়েছে।

এটিকে প্রথমে বা সর্বশেষে আপনার বডি ট্যাগে রাখুন

<div id="nfc" class="col col-md-2"></div>

এবং আপনার সিএসএস এ

#nfc{
  background: red;
  top: 0;
  left: 0;
  bottom: 0;
  position: fixed;
  z-index: -99;
}

আপনি কেবল একটি আকৃতি তৈরি করছেন, পৃষ্ঠার পিছনে এটি পিন করে এবং পুরো উচ্চতায় প্রসারিত করছেন। বিদ্যমান বুটস্ট্র্যাপ ক্লাস ব্যবহার করে, আপনি সঠিক প্রস্থ পাবেন এবং এটি প্রতিক্রিয়াশীল থাকবে।

এই পদ্ধতি ofc এর সাথে কিছু সীমাবদ্ধতা রয়েছে তবে এটি যদি পৃষ্ঠার মূল কাঠামোর জন্য হয় তবে এটি সেরা উত্তর।

Comments

কেন তুমি আছে position: absoluteতারপর, position: fixed?

— এডিটিসি

ফোগিস্ট, টাইপো নেই :)

— সাইমন স্টিভেনস

সুন্দর সমাধান। যাইহোক, আমি শুধুমাত্র এটি ব্যবহার সঠিকভাবে লাইন আপ পেতে পারেন .container-fluid। আমি ব্যবহার করতে চান সেটি .container। ধারনা?

— Jibran

.containerবা এর সাথে .container-fluidমোটেই কোনও প্রাসঙ্গিকতা নেই। .col.col-md-2সেট প্রস্থ বুটস্ট্র্যাপ ব্যবহার করে। আমার উপরের সিএসএস পর্যাপ্ত নেতিবাচক জেড-ইনডেক্স সহ ডিভকে পুরো উচ্চতায় নিয়ে গেছে, এটি নিশ্চিত করার জন্য এটি সবকিছুর পিছনে রয়েছে। উপরে উল্লিখিত হিসাবে, এটি আপনার <body>ট্যাগের মধ্যে খুব প্রথম বা শেষ উপাদান হওয়া উচিত

— সাইমন স্টিভেনস

Answer 12

আমি পূর্ণ প্রস্থ এবং উচ্চতার টেবিলগুলি তৈরি করতে বুটস্ট্র্যাপের সাথে সামঞ্জস্য করা একটি সাধারণ সিএসএস লিখেছি:

ফিডল: https://jsfiddle.net/uasbfc5e/4/

মূলনীতিটি হ'ল:

• একটি প্রধান ডিআইভিতে "টেবিলফুল" যুক্ত করুন
• তারপরে স্পষ্টতই, নীচের ডিআইভি সারি তৈরি করবে
• এবং তারপরে সারিগুলির নীচে ডিআইভি কোষ হবে
• আপনি শিরোনাম বা অনুরূপ জন্য ক্লাস "টেবিল শিরোনাম" ব্যবহার করতে পারেন

এইচটিএমএল:

<div class="tablefull">
    <div class="tableheader">
        <div class="col-xs-4">Header A</div>
        <div class="col-xs-4">B</div>
        <div class="col-xs-4">C</div>
    </div>
    <div>
        <div class="col-xs-6">Content 50% width auto height</div>
        <div class="col-xs-6">Hello World</div>
    </div>
    <div>
        <div class="col-xs-9">Content 70% width auto height</div>
        <div class="col-xs-3">Merry Halloween</div>
    </div>
</div>

সিএসএস:

div.tablefull {
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 100%;
}

div.tablefull>div.tableheader, div.tablefull>div.tableheader>div{
    height: 0%;
}

div.tablefull>div {
    display: table-row;
}

div.tablefull>div>div {
    display: table-cell;
    height: 100%;
    padding: 0;
}

Comments

সিএসএস মিনিফায়ার থেকে সাবধান থাকুন, কিছু সময় তারা পরিবর্তিত 0%;হয় 0;যা একেবারেই আলাদা। যদি এটি হয় তবে আপনি 1%;পরিবর্তে ব্যবহার করতে পারেন ।

— গিলিয়াম এফ।

Answer 13

চেষ্টা

<div class="container">
    <div class="row">
        <div class="col-md-12">header section</div>

    </div>
     <div class="row fill">
        <div class="col-md-4">Navigation</div>
        <div class="col-md-8">Content</div>

    </div>
</div>

সিএসএস .ফিল ক্লাসের জন্য নীচে

 .fill{
    width:100%;
    height:100%;
    min-height:100%;
    padding:10px;
    color:#efefef;
    background: blue;
}
.col-md-12
{
    background: red;

}

.col-md-4
{
    background: yellow;
    height:100%;
    min-height:100%;

}
.col-md-8
{
    background: green;
    height:100%;
    min-height:100%;

}

আপনার রেফারেন্সের জন্য কেবল ফিডলটি দেখুন।

Comments

আপনার উত্তরের জন্য ধন্যবাদ, কিন্তু আমি টুইটার বুটস্ট্র্যাপ 3, না 2. ব্যবহার করুন, পড়া getbootstrap.com/getting-started/#migration

— uladzimir

বুটস্ট্র্যাপ 3, কোনও স্প্যান ব্যবহৃত হয় না, পরিবর্তিত হয়ে থাকে to

— কুকি 3

ঠিক আছে. কলামগুলির উচ্চতা কলামগুলির সামগ্রীর উচ্চতা হিসাবে হবে তবে আমার কেবল একটি লাইন থাকতে পারে।

— uladzimir

ধন্যবাদ @ কুকি 3। স্রেফ পরিবর্তন spanকরুন col-md-এবং দেখুন কী হয়<div class="container"> <div class="row"> <div class="col-md-12">header section</div> </div> <div class="row"> <div class="col-md-4">Navigation</div> <div class="col-md-8">Content</div> </div> </div>

— কৃষ্ণ রানী সাহু

কাজ করে না আপনি আমার মন্তব্য পড়েন? jsfiddle.net/YQUQd/1/eded/result

— uladzimir

Answer 14

এটা চেষ্টা কর

 <div class="container">
     <!-- Header-->         
  </div>
</div>
 <div class="row-fluid">
     <div class="span3 well">
         <ul class="nav nav-list">
             <li class="nav-header">Our Services</li>
                <!-- Navigation  -->
             <li class="active"><a href="#">Overview</a></li>
             <li><a href="#">Android Applications</a></li>
             <li class="divider"></li>
         </ul>
     </div>
     <div class="span7 offset1">
      <!-- Content -->         
     </div>
 </div>

Http://www.sitepPoint.com/building-responsive-websites- using- twitter- bootstrap / দেখুন

সৈয়দকে ধন্যবাদ

Comments

ধন্যবাদ, আপনি বুটস্ট্র্যাপ 3.0 এর জন্য উদাহরণ পরিবর্তন করতে পারেন?

— uladzimir

Answer 15

যদি সারিটির পরে কোনও বিষয়বস্তু না থাকে (পুরো পর্দার উচ্চতা নেওয়া হয়), উপাদানটির position: fixed; height: 100%জন্য ব্যবহারের কৌশলটি .col:beforeভালভাবে কাজ করতে পারে:

header {
  background: green;
  height: 50px;
}
.col-xs-3 {
  background: pink;
}
.col-xs-3:before {
  background: pink;
  content: ' ';
  height: 100%;
  margin-left: -15px; /* compensates column's padding */
  position: fixed;
  width: inherit; /* bootstrap column's width */
  z-index: -1; /* puts behind content */
}
.col-xs-9 {
  background: yellow;
}
.col-xs-9:before {
  background: yellow;
  content: ' ';
  height: 100%;
  margin-left: -15px; /* compensates column's padding */
  position: fixed;
  width: inherit; /* bootstrap column's width */
  z-index: -1; /* puts behind content */
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<header>Header</header>
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-3">Navigation</div>
        <div class="col-xs-9">Content</div>
    </div>
</div>

Answer 16

অফসেটিংয়ের সাথে এখানে উল্লেখ করা হয়নি।

আপনি বাম দিকের বারের জন্য পজিশনে নিখুঁত ব্যবহার করতে পারেন।

সিএসএস

.sidebar-fixed{
  width: 16.66666667%;
  height: 100%;
}

এইচটিএমএল

<div class="row">
  <div class="sidebar-fixed">
    Side Bar
  </div>
  <div class="col-md-10 col-md-offset-2">
    CONTENT
  </div>
</div>

Answer 17

এটা চেষ্টা কর

<div class="row row-offcanvas row-offcanvas-right">
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">Nav     Content</div>
<div class="col-xs-12 col-sm-9">Content goes here</div>
</div>

এটি বুটস্ট্র্যাপ 3 ব্যবহার করে তাই অতিরিক্ত সিএসএস ইত্যাদির প্রয়োজন নেই ...

Comments

দয়া করে, ফিডল সরবরাহ করুন

— uladzimir

বুটস্ট্র্যাপ ওয়েবসাইট থেকে এটির

— ড্যান এস্পারজা

Answer 18

আপনি কি বুটস্ট্র্যাপের আফিক্সটি দেখেছেন? জাভাস্ক্রিপ্ট বিভাগে ???

আমি মনে করি এটি সেরা এবং সবচেয়ে সহজ সমাধান বউ হবে।

সেখানে একবার দেখুন: http://getbootstrap.com/javascript/#affix

Comments

আপনি দয়া করে উদাহরণ ভাগ করতে পারেন, আমি কীভাবে আফিক্স দিয়ে দুটি কলাম তৈরি করতে পারি?

— uladzimir

যাইহোক .... আপনি কি সর্বনিম্ন উচ্চতা দিয়ে চেষ্টা করেছেন ??? ? হয়তো এটা এর দরকারী, ডান @baxxabit

— Despertaweb

Answer 19

এখানে প্রদত্ত কোডটি পরীক্ষা করার পরে: বুটস্ট্র্যাপ টিউটোরিয়াল

সর্বশেষ বুটস্ট্র্যাপ ব্যবহার করে এখানে অন্য বিকল্প রয়েছে v3.0.2 রয়েছে:

মার্কআপ:

<div id="headcontainer" class="container">
           <p>Your Header</p>    
</div>
<div id="maincontainer" class="container">
      <div class="row">
         <div class="col-xs-4"> 
            <p>Your Navigation</p> 
         </div>
         <div class="col-xs-8"> 
            <p>Your Content</p> 
         </div>
      </div>
</div>

অতিরিক্ত সিএসএস:

#maincontainer, #headcontainer {
width: 100%;
}

#headcontainer {
background-color:#CCCC99; 
height: 150px
}

#maincontainer .row .col-xs-4{
background-color:gray; 
height:1000px
}

#maincontainer .row .col-xs-8{
background-color:green;
height: 1000px
}

নমুনা জেএসফিডাল

আশা করি এটি আগ্রহী যে কাউকে সহায়তা করে।

Comments

গতিশীল উচ্চতা সম্পর্কে jsfiddle.net/zHRZr/7 মূল প্রশ্ন, তবে যাইহোক ধন্যবাদ

— uladzimir