html - একটি div ব্রাউজার উইন্ডো 100% উচ্চতা তৈরি করুন




css css3 (20)

এই স্টাফ আপনার ব্রাউজার অনুযায়ী স্বয়ংক্রিয়ভাবে কন্টেন্ট উচ্চতা মাপ পরিবর্তন করবে। আমি এই আপনার জন্য কাজ করবে আশা করি। শুধু bellow দেওয়া এই উদাহরণ চেষ্টা করুন।

আপনাকে শুধুমাত্র height:100% সেট করতে হবে height:100% । 

  html,body {
  height:100%;
  margin:0;
}
.content {
  height:100%;
  min-height:100%;
  position:relative;
}
.content-left {
  height:auto;
  min-height:100%;
  float:left;
  background:#ddd;
  width:50%;
  position:relative;
}

#one {
  background: url(http://cloud.niklausgerber.com/1a2n2I3J1h0M/red.png) center center no-repeat scroll     #aaa;
  width:50%;
  position:relative;
  float:left;
}

#two {
 background: url(http://cloud.niklausgerber.com/1b0r2D2Z1y0J/dark-red.png) center center no-repeat scroll #520E24;
  width:50%;
  float:left;
  position:relative;
  overflow-y:scroll;  
}
<div class='content' id='one'></div>
<div class='content-left' id='two'></div>

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

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

আমি height:100% চেষ্টা করেছি height:100% , min-height:100%; প্রভৃতি

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

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

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

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

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

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

#example { width: calc(100vw - 32px) }

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

$("#mydiv").css("height", $(document).height() + "px");

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

এইচটিএমএল: 

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

সিএসএস: 

#my-div {
    height:100vh; /*vh stands for view-port height, 1vh is 1% of screen height*/
}

আপনি একেবারে আপনার উপাদান অবস্থান করতে সক্ষম হন, 

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

এটা করতে হবে।

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

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

Source

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

  • লেআউট নির্দিষ্ট প্রস্থ কি?
  • উভয় বা উভয় কলাম নির্দিষ্ট প্রস্থ হয়?

এখানে একটি সম্ভাবনা আছে: 

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>

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

এই আমার জন্য কি কাজ করেছে: 

<div style="position:fixed; top:0px; left:0px; bottom:0px; right:0px;"> </div>

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

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

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

#your-object: height: 100vh;

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

এই স্ক্রিপ্টটি যুক্ত করুন ( 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;
});

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

$(function() {
    if (!Modernizr.cssvhunit) {
        var windowH = $(window).height();
        $('#your-object').css({'height':($(window).height())+'px'});
    }
});

এখানে এমন কিছু যা আপনার উপরে যা ছিল তা ঠিক নয় তবে কিছুকে সহায়ক হতে পারে। 

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/

কয়েকটি CSS3 পরিমাপ ইউনিট বলা আছে:

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

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

উপরে সংযুক্ত W3 প্রার্থী সুপারিশ থেকে:

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

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

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

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

এইচটিএমএল 

<div></div>

সিএসএস 

div {
    height:100vh;
}

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

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

এটি বর্তমানে অপেরা মিনি ছাড়া অন্য সকল আপ-টু-ডেট প্রধান ব্রাউজারগুলিতে সমর্থিত। চেক আউট আমি আরও সহায়তার জন্য ব্যবহার করতে পারেন ।

কিভাবে এই একাধিক কলাম সঙ্গে ব্যবহার করা যাবে?

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

কিভাবে 100vh 100% ভিন্ন?

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

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

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

নিম্নলিখিত CSS চেষ্টা করুন: 

html {
    min-height: 100%;
    margin: 0;
    padding: 0;
}

body {
    height: 100%;
}

#right {
    min-height: 100%;
}

বিকল্পগুলির মধ্যে একটি সিএসএস টেবিল ব্যবহার করা হয়। এটি ভাল ব্রাউজার সমর্থন আছে, এমনকি IE8 কাজ করে।

JSFiddle উদাহরণ 

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>

ব্লক উপাদান ডিফল্টরূপে, তাদের পিতামাতার পূর্ণ প্রস্থ ব্যবহার করে।

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

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

একটি ব্লক বিন্যাসের প্রেক্ষাপটে, বাক্সগুলি একে অপরের পর এক, উল্লম্বভাবে, একটি ধারণকারী ব্লক শীর্ষে শুরু করা হয়।

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

ডিফল্টরূপে, অধিকাংশ উপাদানগুলি তাদের সামগ্রীর height: auto ( 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>

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

height:100vh;

সহজ: 

html,
body {
  height: 100%;
  min-height: 100%;
}
body {
  position: relative;
  background: purple;
  margin: 0;
  padding: 0;
}
.fullheight {
  display: block;
  position: relative;
  background: red;
  height: 100%;
  width: 300px;
}
<html class="">

<body>
  <div class="fullheight">
    This is full height.
  </div>
</body>

</html>

FlexBox সিএসএস ব্যবহার করুন

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

<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>

পদ্ধতি (বি) ভ vh ব্যবহার করে: 

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>

height:100% সেট করার চেষ্টা করুন height:100% html ও body height:100% 

html, 
body {
    height: 100%;
}

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

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

.container{     
    margin: auto;
    background-color: #909090;
    width: 60%;
    padding: none;
    min-height: 100%;
}



html   css   css3   height  


height