কীভাবে ব্রাউজার উইন্ডোটির উচ্চতা 100% উচ্চতা তৈরি করবেন

2135

আমার দুটি কলামের একটি লেআউট রয়েছে - একটি বাম divএবং ডান div।

ডানদিকে divধূসর বর্ণ রয়েছে background-colorএবং এটি ব্যবহারকারীর ব্রাউজার উইন্ডোর উচ্চতার উপর নির্ভর করে উল্লম্বভাবে প্রসারিত করা দরকার। এখনই background-colorসামগ্রীর শেষ টুকরোটির প্রান্তটি div।

আমি চেষ্টা করেছি height:100%, min-height:100%;ইত্যাদি

html  css  height 
— মাইক
সূত্র
7
আপনি এই প্রশ্নটি ব্যবহার
— পুরো স্ট্যাকওভারফ্লো.com/ প্রশ্নগুলি / 1366548/…
যাওয়ার ভাল উপায়, তবে ভিএইচ, ভিডাব্লু ইত্যাদি ইউনিটগুলি বগী হিসাবে পরিচিত। আপনার প্রয়োজন হলে এই লাইটওয়েট জেএস
— তীক্ষ্ণ
heightশতাংশের মান সহ সিএসএস সম্পত্তি সম্পর্কে এখানে একটি সহজ এবং স্পষ্ট ব্যাখ্যা : স্ট্যাকওভারফ্লো.com
— মাইকেল বেঞ্জামিন
4
আপনি উচ্চতা ব্যবহার করতে পারেন: 100vh; সিএসএস সম্পত্তি
— বিষ্ণু চৌহান

উত্তর:

2830

এখানে সিএসএস 3 পরিমাপের একক দুটি দম্পতি রয়েছে:

ভিউপোর্ট-শতাংশ (বা ভিউপোর্ট-সম্পর্কিত) দৈর্ঘ্য

ভিউপোর্ট-শতাংশের দৈর্ঘ্য কী?

উপরে লিঙ্কযুক্ত ডাব্লু 3 প্রার্থীর সুপারিশ থেকে:

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

এই ইউনিটগুলি vh(ভিউপোর্টের উচ্চতা), vw(ভিউপোর্টের প্রস্থ), vmin(ভিউপোর্টের সর্বনিম্ন দৈর্ঘ্য) এবং vmax(ভিউপোর্ট সর্বাধিক দৈর্ঘ্য)।

কীভাবে এটি ব্রাউজারের উচ্চতা পূরণ করতে একটি ডিভাইডার তৈরি করতে ব্যবহার করা যেতে পারে?

এই প্রশ্নের জন্য আমরা ব্যবহার করতে পারি vh: 1vhভিউপোর্টের উচ্চতার 1% এর সমান। এটি বলতে 100vhগেলে, ডিওএম গাছের যে উপাদানটি রয়েছে তা নির্বিশেষে ব্রাউজার উইন্ডোটির উচ্চতার সমান:

এইচটিএমএল

<div></div>

সিএসএস

div {
    height: 100vh;
}

এটি আক্ষরিক প্রয়োজন যা প্রয়োজন। এখানে এটি ব্যবহারের একটি জেএসফিডাল উদাহরণ ।

ব্রাউজারগুলি এই নতুন ইউনিটগুলিকে সমর্থন করে?

এটি বর্তমানে অপেরা মিনি বাদে সমস্ত আপ টু ডেট প্রধান ব্রাউজারগুলিতে সমর্থিত। পরীক্ষা করে দেখুন আমি ব্যবহার করতে পারেন ... আরো সমর্থনের জন্য।

একাধিক কলাম সহ এটি কীভাবে ব্যবহার করা যেতে পারে?

বাম এবং ডান বিভাজক সমন্বিত হাতে প্রশ্ন ক্ষেত্রে, এখানে একটি হল JSFiddle উদাহরণ উভয় জড়িত দুই কলাম বিন্যাস দেখাচ্ছে vhএবং vw।

কিভাবে 100vhআলাদা 100%?

উদাহরণস্বরূপ এই বিন্যাসটি নিন:

<body style="height:100%">
    <div style="height:200px">
        <p style="height:100%; display:block;">Hello, world!</p>
    </div>
</body>

এখানে pট্যাগটি 100% উচ্চতায় সেট করা আছে তবে divএটিতে 200 পিক্সেল উচ্চতা রয়েছে বলে 200 পিক্সেলের 100% 200 পিক্সেল হয়ে যায়, উচ্চতার 100% নয়body । ব্যবহার 100vhপরিবর্তে এর মানে হল যে pট্যাগের 100% উচ্চতা হতে হবে bodyনির্বিশেষে divউচ্চতা। পার্থক্যটি দেখতে সহজেই এই জেএসফিডেলের সাথে একবার দেখুন!

— জেমস ডোনেলি
সূত্র
35
উপাদানটি ভিউপোর্টের চেয়ে লম্বা হলে স্ক্রোলিংয়ের সাথে অদ্ভুত আচরণ। ধারকটি ভিউপোর্টের উচ্চতা বজায় রাখে এবং সামগ্রীটি ধারক থেকে প্রবাহিত হয়। min-height:100vhএই চারপাশে কাজ বলে মনে হচ্ছে।
— wdm
8
@ ডিজিডিডি এটি আইওএস সাফারি 6+, অ্যান্ড্রয়েড ব্রাউজার 4.4+, ব্ল্যাকবেরি ব্রাউজার 10.0 এবং আইএমবাইল 10.0 এ কাজ করে। আপনি কোন মোবাইল ব্রাউজারটি উল্লেখ করছেন তা আমি জানি না, তবে 4 টি মোবাইল ব্রাউজার 90% এর বেশি ব্যবহার করে। এই প্রশ্নটি মোবাইল ব্রাউজারগুলিতে কাজ করার জন্য কোনও প্রয়োজনীয়তা নির্দিষ্ট করে না।
— জেমস ডোনেলি
1
@ robross0606 আবার এটি আমি এখানে উত্তর দিয়েছি এমন প্রশ্ন নয়। : তা কোন অন্য প্রশ্নের পুরাপুরি, যার উত্তর প্রকৃতপক্ষে ব্যবহার flexbox আসে যায় stackoverflow.com/questions/90178/...
— জেমস ডনেলি
1
@ জেমসডোনেলি হ্যাঁ, আমি জানি। তবে এটি এই প্রশ্নের উত্তর নয়। ব্রাউজার উইন্ডো উচ্চতায় নাবারের উচ্চতা অন্তর্ভুক্ত। এটি আরও ভাল হবে, কারণ মোবাইল ব্রাউজারগুলিতে, ভিবারপোর্টের উচ্চতা প্রতিবার নাভিবার দেখায় / লুকায় changes
— রেডক্লুভার
3
মোবাইল সতর্কতা: ক্রোম মোবাইলের সাথে vh মেস ব্যবহার করা যা এটির নাবারটি বিবেচনা করে না। এটি এর পরে এটি আপনার পৃষ্ঠার শীর্ষটি coverেকে দেয়। গুরুতর সমস্যা যদি আপনার সেখানে মেনু থাকে ...
— অফারমো
567

আপনি যদি কোনও <div>বা কোনও উপাদানের উচ্চতা নির্ধারণ করতে চান তবে আপনার উচ্চতা <body>এবং <html>100% এও সেট করা উচিত । তারপরে আপনি 100% :) দিয়ে উপাদানটির উচ্চতা নির্ধারণ করতে পারবেন

এখানে একটি উদাহরণ:

body, html {
  height: 100%;
}

#right {
  height: 100%;
}
— আরিওনা রিয়ান
সূত্র
109
আমি যদি ভুল হয়ে থাকি তবে আমাকে সংশোধন করুন, তবে আমি মনে করি আপনার অবশ্যই ডিভের সমস্ত পিতামাতার উচ্চতা নির্ধারণ করতে হবে, প্রকৃতপক্ষে কাজ করার জন্য
— ড্যানি ওয়াই
যদি আমি ধারাবাহিক ডিজাইন ব্যবহার করি: পৃষ্ঠা 6000px উচ্চতা, পৃষ্ঠাগুলির প্রতিনিধিত্বকারী ব্লক সহ এটি ব্যবহার করবে না। আমি চাই একটি ব্লক ভিউপোর্টের উচ্চতা হ'ল।
— কিওয়ারটি
@ ড্যানিওয়াই, আপনি ঠিক বলেছেন আপনাকে স্ক্রিনের উচ্চতা থাকা সমস্ত কিছুর অন্তর্ভুক্তির সাথে ডিভের সমস্ত পিতামাতার কাছে উচ্চতা নির্ধারণ করতে হবে। এখানে একটি উদাহরণ ।
— টোটো_টিকো
এই কৌশলটি কিছু ক্ষেত্রে কাজ করে তবে এটি কিছু ক্ষেত্রেও কার্যকর হবে না, আপনি যদি সামঞ্জস্যতা বা আরও প্রস্তাবিত উপায়ে অনুসন্ধান করেন তবে আপনি উপরে @ জেমসের উত্তর দেখতে পারেন :) ভিউপোর্ট পার্সেন্টেজ পদ্ধতি ব্যবহার করে :), এটিও কাজ করা উচিত। চিয়ার্স
— অ্যারিয়ানা রিয়ান
8
@ কিওয়ার্টি, সমাধান এখানে। তাই হিসাবে সেট CSS: html { height: 100%*number of blocks; }, body { height: 100%;}, #div { height: 100%/number of blocks; }। সুতরাং আপনার যদি 3 টি বিভাগ থাকে তবে তা হবেhtml { height: 300%; } body { height: 100%; } #div { height: 33.3% }
— ক্যামেরোনজোনসভেব
283

আপনি যদি পুরোপুরি আপনার উপাদানগুলি অবস্থান করতে সক্ষম হন তবে

position: absolute;
top: 0;
bottom: 0;

এটা করতে হবে।

— Tinister
সূত্র
16
এটি নথির প্রবাহের উপাদানটিকে বাইরে নিয়ে গিয়ে এর নীচের মানটিকে তার পিতামাতার উচ্চতায় সিমেন্ট করে কাজ করে। আপনার সামগ্রী যখন তার পিতামাতার উচ্চতা ছাড়িয়ে যায় তখন এটি আদর্শ নয়।
— রিকি বয়েস
1
এটি কার্যকর হয় না, যখন এর পিতা-মাতার একজন সেট করে দেওয়া হয় position:relativeএবং এর উচ্চতা ভিউপোর্টের 100% নয়। এটি এর পরবর্তী আপেক্ষিক বা পরম পূর্ব পুরুষের উপরের এবং নীচে সামঞ্জস্য করবে।
— Seika85
141

আপনি সিএসএসে ভিউ-পোর্ট ইউনিটটি ব্যবহার করতে পারেন:

এইচটিএমএল:

<div id="my-div">Hello World!</div>

সিএসএস:

#my-div {
    height: 100vh; /* vh stands for view-port height, 1vh is 1% of screen height */
}
— MrGeek
সূত্র
1
@ লামার এটি হওয়া * { box-sizing: border-box; }থেকে রোধ করতে আপনার ব্যবহার করা উচিত ।
— লুকা স্টেব
2
ভিউপোর্ট ইউনিটগুলিতে ব্রাউজার সমর্থনের জন্য ক্যানিয়াসের মূল্য নির্ধারণ করা হচ্ছে: ক্যানিউজ
— ডেভ এভারিট
132

আপনি vhএই ক্ষেত্রে যা ভিউপোর্টের উচ্চতার 1% এর সাথে তুলনামূলকভাবে ব্যবহার করতে পারেন ...

এর অর্থ যদি আপনি উচ্চতাটি কভার করতে চান তবে কেবল ব্যবহার করুন 100vh।

নীচের চিত্রটি দেখুন এখানে আমি আপনার জন্য আঁকা:

কীভাবে ব্রাউজার উইন্ডোটির উচ্চতা 100% উচ্চতা তৈরি করবেন?

নীচে হিসাবে আপনার জন্য তৈরি করা স্নিপেট ব্যবহার করে দেখুন:

.left {
  height: 100vh;
  width: 50%;
  background-color: grey;
  float: left;
}

.right {
  height: 100vh;
  width: 50%;
  background-color: red;
  float: right;
}
<div class="left"></div>
<div class="right"></div>
স্নিপেট প্রসারিত করুন

— আলিরেজা
সূত্র
100vh দেওয়া পৃষ্ঠার জন্য একটি উল্লম্ব স্ক্রোল যুক্ত করেছে, সুতরাং এটি অনুসরণ করুন তবে কার্যকর হয়নি। stackoverflow.com/questions/44645465/… । উল্লম্ব স্ক্রোল এড়ানোর কোনও উপায় আছে এবং কোনও সামগ্রী ছাড়াই ডিভিটি নীচে স্পর্শ করা আছে?
— ডিলিপ করুন
@ IDLEEPTHOMAS বিদ্যমান সন্ধান করুনpaddings/margins
— কিংবদন্তি
@ মূল ফাইলটিতে লেজেন্ডস আমি * {মার্জিন: 0, প্যাডিং: 0 as হিসাবে দেওয়ার চেষ্টা করেছি কিন্তু কাজ করে নি
— থোমাসকে
1
@ IDLEEPTHOMAS আলিরিজা দ্বারা প্রদত্ত এই উদাহরণটি একবার দেখুন, এটিতে একটি স্ক্রোলবারও রয়েছে কারণ দেহের উপাদানগুলির একটি প্রান্তিকতা রয়েছে। আপনি মার্জিনটি সরিয়ে ফেললে স্ক্রোলবারটি চলে যায়। এটির বিভিন্ন কারণ থাকতে পারে তবে এটি প্রথমে আমি চেকআউট করব।
— কিংবদন্তি
101

ফ্লেক্স মডেল সমাধানের vhতুলনায় শীর্ষে ভোট দেওয়া সহ অন্যান্য সমস্ত সমাধান সাব-অনুকূল হয় ।

সিএসএস ফ্লেক্স মডেলের আবির্ভাবের সাথে সাথে 100% উচ্চতার সমস্যা সমাধান করা খুব সহজ, খুব সহজ হয়ে যায়: height: 100%; display: flexপিতামাতার এবং flex: 1সন্তানের উপাদানগুলিতে ব্যবহার করুন । তারা নিজের পাত্রে সমস্ত উপলব্ধ স্থান স্বয়ংক্রিয়ভাবে গ্রহণ করবে।

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

ফ্লেক্স মডেলটি সমস্ত বড় ব্রাউজারগুলির পাশাপাশি আইই 11 + দ্বারা সমর্থিত ।

html, body {
  height: 100%;
}
body {
  display: flex;
}

.left, .right {
  flex: 1;
}

.left {
  background: orange;
}

.right {
  background: cyan;
}
<div class="left">left</div>
<div class="right">right</div>
স্নিপেট প্রসারিত করুন

এখানে ফ্লেক্স মডেল সম্পর্কে আরও জানুন ।

— Airen
সূত্র
3
সতর্কতার শব্দ: যখন বাম / ডান ধারকগুলির একটির সামগ্রী মূল দেহের উচ্চতা ছাড়িয়ে যায়, তখন বিপরীত ধারকটি পুনরায় আকার দেয় না, সুতরাং ধারকগুলি বিভিন্ন উচ্চতা দিয়ে শেষ করে।
— স্কেলম্যাক্স
1
: সমস্যা উদাহরণ Schellmax পয়েন্ট আউট jsfiddle.net/Arete/b4g0o3pq
— পর্বতের সূক্ষ্মাগ্র শৈলশিরা
নকশার উপর নির্ভর করে overflow-y: auto;"পাত্রে মূল দেহের উচ্চতা ছাড়িয়ে যাওয়া" এড়ানো যেতে পারে।
— এভি গান
54

আপনি কয়েকটি গুরুত্বপূর্ণ বিশদ যেমন উল্লেখ করেন না:

  • লেআউট স্থির প্রস্থ?
  • উভয়ই কলাম দুটিই প্রস্থের স্থির?

এখানে একটি সম্ভাবনা রয়েছে:

body,
div {
  margin: 0;
  border: 0 none;
  padding: 0;
}

html,
body,
#wrapper,
#left,
#right {
  height: 100%;
  min-height: 100%;
}

#wrapper {
  margin: 0 auto;
  overflow: hidden;
  width: 960px; // width optional
}

#left {
  background: yellow;
  float: left;
  width: 360px; // width optional but recommended 
}

#right {
  background: grey;
  margin-left: 360px; // must agree with previous width 
}
<html>
<head>
  <title>Example</title>
</head>

<body>
  <div id="wrapper">
    <div id="left">
      Left
    </div>

    <div id="right"></div>
  </div>
</body>

</html>
স্নিপেট প্রসারিত করুন

কোন কলামগুলি স্থির করা দরকার এবং কোনটি তরল on আপনি এটি নিখুঁত অবস্থানের সাথেও করতে পারেন তবে আমি সাধারণত এর পরিবর্তে ফ্লোট ব্যবহার করে আরও ভাল ফলাফল (বিশেষত ক্রস ব্রাউজারের ক্ষেত্রে) পেয়েছি।

— cletus
সূত্র
34

এটিই আমার পক্ষে কাজ করেছে:

<div style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; background: red;"> </div>
স্নিপেট প্রসারিত করুন

এর position:fixedপরিবর্তে position:absolute, আপনি বিভাগটি স্ক্রোল করে স্ক্রিনের শেষে প্রসারিত হবে এমনভাবে ব্যবহার করুন।

— Majda
সূত্র
"অবস্থান: [স্থির | পরম]" সহ এই কোডটি পপআপগুলির পটভূমির জন্য দুর্দান্ত (যেমন আপনি যখন কোনও ছবিতে জুম করার জন্য ক্লিক করেন) তবে আপনার যখন সত্যিকার অর্থে নিচে নামার দরকার হয় তখন ক্ষেত্রে তেমন নিশ্চিত হন না। তবুও দরকারী ময়দা!
— মানিফ্যাটবয়
29

উচ্চতার জন্য এখানে একটি স্থির।

আপনার সিএসএস ব্যবহারে:

#your-object: height: 100vh;

সমর্থন করে না এমন ব্রাউজারের জন্য মডার্নজার vh-unitsব্যবহার করুন।

এই স্ক্রিপ্টটি যুক্ত করুন (এর জন্য সনাক্তকরণ যুক্ত করতে vh-units)

// https://github.com/Modernizr/Modernizr/issues/572
// Similar to http://jsfiddle.net/FWeinb/etnYC/
Modernizr.addTest('cssvhunit', function() {
    var bool;
    Modernizr.testStyles("#modernizr { height: 50vh; }", function(elem, rule) {   
        var height = parseInt(window.innerHeight/2,10),
            compStyle = parseInt((window.getComputedStyle ?
                      getComputedStyle(elem, null) :
                      elem.currentStyle)["height"],10);

        bool= !!(compStyle == height);
    });
    return bool;
});

#your-objectব্রাউজারটি সমর্থন না করে তবে ভিউপোর্টের উচ্চতা যুক্ত করতে অবশেষে এই ফাংশনটি ব্যবহার করুন vh-units:

$(function() {
    if (!Modernizr.cssvhunit) {
        var windowH = $(window).height();
        $('#your-object').css({'height':($(window).height())+'px'});
    }
});
— জোনাস স্যান্ডস্টেট
সূত্র
23

100% প্রস্থ এবং উচ্চতার জন্য আলাদাভাবে কাজ করে।

আপনি যখন নির্দিষ্ট করেন width: 100%, তার অর্থ "উইন্ডোটির মূল উপাদান বা প্রস্থের থেকে উপলব্ধ প্রস্থের 100% গ্রহণ করুন।"

আপনি যখন নির্দিষ্ট করেন height: 100%, তার অর্থ কেবলমাত্র "প্যারেন্ট উপাদান থেকে উপলব্ধ উচ্চতার 100% গ্রহণ করুন।" এর অর্থ যদি আপনি শীর্ষ স্তরের উপাদানগুলিতে কোনও উচ্চতা নির্দিষ্ট না করেন তবে সমস্ত বাচ্চার 0উচ্চতা হয় পিতা বা মাতার উচ্চতা এবং ততই আপনাকে min-heightউইন্ডো উচ্চতার জন্য শীর্ষতম উপাদানটি সেট করতে হবে ।

আমি সর্বদা 100vh এর ন্যূনতম উচ্চতা পেতে শরীরকে নির্দিষ্ট করি এবং এটি অবস্থান এবং গণনাগুলি সহজ করে তোলে,

body {
  min-height: 100vh;
}
— দীনেশ পান্ডিয়ান
সূত্র
16

min-height: 100%একটি উচ্চতা যোগ করুন এবং নির্দিষ্ট করবেন না (অথবা এটি স্বয়ংক্রিয়ভাবে লাগান)। এটি পুরোপুরি আমার পক্ষে কাজটি করেছে:

.container{     
    margin: auto;
    background-color: #909090;
    width: 60%;
    padding: none;
    min-height: 100%;
}
— রিমাস সিমিয়ন
সূত্র
16

100vw === ভিউপোর্টের প্রস্থের 100%।

100vh === ভিউপোর্টের উচ্চতার 100%।

আপনি যদি divব্রাউজার-উইন্ডো-আকারের 100% প্রস্থ বা উচ্চতা সেট করতে চান তবে আপনার ব্যবহার করা উচিত:

প্রস্থের জন্য: 100vw

উচ্চতার জন্য: 100vh

অথবা আপনি যদি এটি আরও ছোট আকার সেট করতে চান তবে CSS calcফাংশনটি ব্যবহার করুন । উদাহরণ:

#example {
    width: calc(100vw - 32px)
}
— Руслан
সূত্র
12

এক <div>থেকে 100% উচ্চতা নির্ধারণের জন্য বিভিন্ন পদ্ধতি উপলব্ধ ।

পদ্ধতি (ক):

html,
body {
  height: 100%;
  min-height: 100%;
}
.div-left {
  height: 100%;
  width: 50%;
  background: green;
}
.div-right {
  height: 100%;
  width: 50%;
  background: gray;
}
<div class="div-left"></div>
<div class="div-right"></div>
স্নিপেট প্রসারিত করুন

ভিএইচ ব্যবহার করে পদ্ধতি (খ):

html,
body {
  height: 100%;
  min-height: 100%;
}
.div-left {
  height: 100vh;
  width: 50%;
  background: green;
  float: left;
}
.div-right {
  height: 100vh;
  width: 50%;
  background: gray;
  float: right;
}
<div class="div-left"></div>
<div class="div-right"></div>
স্নিপেট প্রসারিত করুন

পদ্ধতি (সি) ফ্লেক্স বক্স ব্যবহার করে:

html,
body {
  height: 100%;
  min-height: 100%;
}
.wrapper {
  height: 100%;
  min-height: 100%;
  display: flex;
}
.div-left {
  width: 50%;
  background: green;
}
.div-right {
  width: 50%;
  background: gray;
}
<div class="wrapper">
  <div class="div-left"></div>
  <div class="div-right"></div>
</div>
স্নিপেট প্রসারিত করুন

— সন্তোষ খলসে
সূত্র
12

এটি আমার পক্ষে কাজ করেছে:

html, body {
    height: 100%; /* IMPORTANT!!! Stretches viewport to 100% */
}

#wrapper {
    min-height: 100%; /* Minimum height for a modern browser */
    height:auto !important; /* Important rule for a modern browser */
    height:100%; /* Minimum height for Internet Explorer */
    overflow: hidden !important; /* Firefox scroll-bar */
}

এই পৃষ্ঠা থেকে নেওয়া ।

— পরীক্ষামূলক
সূত্র
11

সেট করার চেষ্টা করুন height:100%মধ্যে html&body 

html, 
body {
    height: 100%;
}

এবং আপনি যদি 2 ডিভি উচ্চতা একই ব্যবহার করতে চান বা পিতামুক্ত উপাদান display:flexসম্পত্তি সেট করুন ।

— মোহাম্মদ জাভেদ
সূত্র
9

এমনকি এখানে সমস্ত উত্তর সহ, আমি অবাক হয়ে দেখেছি যে সত্যিই কেউ সমস্যার সমাধান করেনি। আমি যদি 100vh height/ ব্যবহার করি min-heightতবে সামগ্রীটি পৃষ্ঠার চেয়ে দীর্ঘ হলে লেআউটটি ভেঙে যায়। আমি যদি এর পরিবর্তে 100% height/min-height তবে পৃষ্ঠার উচ্চতার চেয়ে সামগ্রী কম থাকলে লেআউটটি ভেঙে যায়।

আমি যে সমাধানটি পেয়েছি, যা উভয় ক্ষেত্রেই সমাধান করেছিল তা ছিল শীর্ষ দুটি উত্তর একত্রিত করা:

html, body, #mydiv {
  height: 100%;
  min-height: 100vh;
}
— machineghost
সূত্র
1
আমার কাছে 90px উচ্চতার একটি নবনির্ধারণ স্থির হয়েছে সুতরাং আমাকে আপনার "100vh" পরিবর্তন করে "ক্যালক (100vh - 90px)" করতে হয়েছিল
— মার্ক জ্যাকসন
8

"Px" এর পরিবর্তে "ভিএইচ" ইউনিটটি ব্যবহার করুন, যার অর্থ ভিউ-পোর্ট উচ্চতা। 

height: 100vh;
— khalifeh
সূত্র
7

অবরুদ্ধ উপাদানগুলি ডিফল্টরূপে তাদের পিতামাতার পূর্ণ প্রস্থ গ্রহণ করে।

এইভাবে তারা তাদের নকশার প্রয়োজনীয়তা পূরণ করে, যা উল্লম্বভাবে স্ট্যাক করা।

9.4.1 ব্লক বিন্যাস প্রসঙ্গ

একটি ব্লক বিন্যাস প্রসঙ্গে, বাক্সগুলি একের পর এক উল্লম্বভাবে একটি ব্লকযুক্ত শীর্ষে শুরু হয় beginning

এই আচরণটি উচ্চতা পর্যন্ত প্রসারিত করে না।

ডিফল্টরূপে, বেশিরভাগ উপাদানগুলি তাদের সামগ্রীর উচ্চতা (height: auto )।

প্রস্থের সাথে ভিন্ন নয়, আপনার অতিরিক্ত স্থান চাইলে আপনাকে উচ্চতা নির্দিষ্ট করতে হবে।

অতএব, এই দুটি বিষয় মাথায় রাখুন:

  • আপনি সম্পূর্ণ প্রস্থ না চাইলে আপনার একটি ব্লক উপাদানটির প্রস্থ নির্ধারণ করতে হবে
  • আপনি যদি সামগ্রীর উচ্চতা না চান তবে আপনাকে কোনও উপাদানের উচ্চতা নির্ধারণ করতে হবে

.Contact {
  display: flex;     /* full width by default */
  min-height: 100vh; /* use full height of viewport, at a minimum */
}

.left {
  flex: 0 0 60%;
  background-color: tomato;
}

.right {
  flex: 1;
  background-color: pink;
}

body { margin: 0; } /* remove default margins */
<div class="Contact">
  <section class="left">
    <div class="">
      <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h1>
    </div>
  </section>
  <section class="right">
    <img />
  </section>
</div>
স্নিপেট প্রসারিত করুন

— মাইকেল বেঞ্জামিন
সূত্র
7

এখানে এমন কিছু যা আপনার আগের উত্তরগুলির মতো ঠিক নয় তবে এটি কারওর পক্ষে সহায়ক হতে পারে:

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0px;
}

#one {
  background-color: red;
}

#two {
  margin-top: 0px;
  background-color: black;
  color: white;
  overflow-y: scroll;
}

https://jsfiddle.net/newdark/qyxkk558/10/

— newdark এটা
সূত্র
6

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

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

— robross0606
সূত্র
6

বিকল্পগুলির মধ্যে একটি হ'ল সিএসএস টেবিল ব্যবহার করা। এটির দুর্দান্ত ব্রাউজার সমর্থন এবং এমনকি ইন্টারনেট এক্সপ্লোরার 8 এ কাজ করে।

জেএসফিডাল উদাহরণ

html, body {
  height: 100%;
  margin: 0;
}
.container {
  display: table;
  width: 100%;
  height: 100%;
}
.left, .right {
  display: table-cell;
  width: 50%;
}
.right {
  background: grey;
}
<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>
স্নিপেট প্রসারিত করুন

— স্টিকারসমূহ
সূত্র
6

এটি ব্যবহার করে দেখুন - পরীক্ষিত:

body {
  min-height: 100%;
}

#right, #left {
  height: 100%;
}

সম্পাদনা করুন: 2020 আপডেট:

আপনি vhএখন ব্যবহার করতে পারেন :

#right, #left {
  height: 100vh
}
— lukaszkups
সূত্র
5

আপনি ব্যবহার করতে পারেন display: flexএবংheight: 100vh

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

.left, .right {
  flex: 1;
}

.left {
  background: orange;
}

.right {
  background: cyan;
}
<div class="left">left</div>
<div class="right">right</div>
স্নিপেট প্রসারিত করুন

— থুক এনগুইন
সূত্র
ইতিমধ্যে এখানে বেশ কয়েকটি ফ্লেক্সবক্স সমাধান পোস্ট করা হয়েছে, এর মধ্যে এই উত্তরটির ঠিক ২ 26 দিন আগে পোস্ট করা হয়েছে এই সঠিক বাস্তবায়ন সহ।
— টাইলারহান
5

আপনাকে দুটি জিনিস করতে হবে, একটি হ'ল উচ্চতা সেট করা যা আপনি ইতিমধ্যে করেছিলেন% দ্বিতীয়টি পরম স্থানে সেট করা হয়। কৌতুক করা উচিত।

html,
body {
  height: 100%;
  min-height: 100%;
  position: absolute;
}

সূত্র

— প্রভাকর আনডুরথি
সূত্র
3
পুরানো সমাধান। vhপরিবর্তে ব্যবহার করুন।
— হিমস্রোত 1
1
আপনি vhযদি মোবাইল ডিভাইসে প্রতিক্রিয়াশীল ডিজাইন ব্যবহার করার পরিকল্পনা করেন তবে ব্যবহার করবেন না ।
— আলেকজান্ডার কিম
5

প্রকৃতপক্ষে আমার জন্য সবচেয়ে ভাল কাজ করা vhসম্পত্তিটি ব্যবহার করা হয়েছিল ।

আমার প্রতিক্রিয়া প্রয়োগে আমি চাইছিলাম যে ডিভাইসটি পুনরায় আকার দেওয়ার পরেও পৃষ্ঠাটি উচ্চের সাথে মিলবে। আমি চেষ্টা height: 100%;, overflow-y: auto;কিন্তু তাদের কেউ কাজ করেন যখন সেটিং height:(your percent)vh;এটা হিসাবে উদ্দীষ্ট কাজ করেন।

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

.frame {
  background-color: rgb(33, 2, 211);
  height: 96vh;
  padding: 1% 3% 2% 3%;
  border: 1px solid rgb(212, 248, 203);
  border-radius: 10px;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 50px 100px minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr);
}
— JimmyFlash
সূত্র
যাইহোক, আপনি উল্লেখ করেছেন যে 'বৃত্তাকার কোণগুলি' আপনার উপাদানটির উচ্চতাকে প্রভাবিত করে, আমি আশা করি সেটিংসটি box-sizing: border-box;এটি কাটিয়ে উঠবে, এর অর্থ হ'ল উপাদানটির আকার (প্রস্থ এবং উচ্চতা) গণনা করার সময় সীমানা আকারটিও বিবেচনায় নেওয়া হবে।
— নেক
5

একবার চেষ্টা করে দেখুন ...

*{
  padding:0;
  margin:0;
}
.parent_div{
  overflow:hidden;
  clear:both;
  color:#fff;
  text-align:center;
}

.left_div {
  float: left;
  height: 100vh;
  width: 50%;
  background-color: blue;

}

.right_div {
  float: right;
  height: 100vh;
  width: 50%;
  background-color: green;

}
<div class=" parent_div">
  <div class="left_div">Left</div>
  <div class="right_div">Right</div>
</div>
স্নিপেট প্রসারিত করুন

— সুনীল রাজপুত
সূত্র
3

আপনি যদি position: absolute;jQuery ব্যবহার করেন এবং ব্যবহার করতে পারেন could

$("#mydiv").css("height", $(document).height() + "px");
— জন স্মিথ ptionচ্ছিক
সূত্র
1
জাভাস্ক্রিপ্টের প্রয়োজন নেই। আধুনিক সমাধানটি হ'ল সিএসএস ফ্লেক্স বক্স মডেলটি ব্যবহার করা ।
— ড্যান ড্যাসকলেসকু
আপনি যদি জেএস ব্যবহার করছেন তবে আমি এটি বেশ কার্যকর বলে মনে করেছি। দ্রষ্টব্য: এটিকে $ (উইন্ডো)। লোড () দিয়ে ব্যবহার করার জন্য এটি সর্বোত্তম as আরও তথ্যের জন্য এই লিঙ্কটি চেক করুন। stackoverflow.com/questions/13314058/…
— এডওয়ার্ড
2

এইচটিএমএল

   // vw: hundredths of the viewport width.
   // vh: hundredths of the viewport height.
   // vmin: hundredths of whichever is smaller, the viewport width or height.
   // vmax: hundredths of whichever is larger, the viewport width or height.

<div class="wrapper">
    <div class="left">
        Left
    </div>
    <div class="right">
        Right
    </div>
</div>

সিএসএস

<style>
    .wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        height: 100vh; // Height window (vh)
    }
    .wrapper .left{
        widht: 80%; // Width optional, but recommended
    }
    .wrapper .right{
        widht: 20%; // Width optional, but recommended
        background-color: #dd1f26;
    }
<style>
— রামনিবাস শর্মা
সূত্র
1
সম্ভাব্য ভুল বানান: widht(শেষের কাছে)
— পিটার মর্টেনসেন
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.