দেহের উচ্চতা 100% উল্লম্ব স্ক্রোলবার প্রদর্শন করছে

Question 1

কৌতূহলের বাইরে, নীচের উদাহরণটি বিবেচনা করে, কেন # কনটেনার ডিভের উপর মার্জিন থাকা ব্রাউজারে উল্লম্ব স্ক্রোলবার প্রদর্শিত হতে পারে? ধারকটি দৈহিক উচ্চতার চেয়ে উচ্চতায় অনেক ছোট যা সেটাকে 100% সেট করা হয়েছে।

আমি # কন্টেইনার ব্যতীত সমস্ত উপাদানগুলির জন্য প্যাডিং এবং মার্জিন 0 তে সেট করে রেখেছি। নোট করুন যে আমি ইচ্ছাকৃতভাবে # কন্টেইনার ডিভের উপর নিখুঁত অবস্থান বাদ দিয়েছি। এই ক্ষেত্রে ব্রাউজার কীভাবে শরীরের উচ্চতা গণনা করছে এবং মার্জিন কীভাবে এটি প্রভাব ফেলছে?

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* { padding:0; margin:0;}
html, body { height:100%; }
#container
{
  padding:10px;
  margin:50px;
  border:1px solid black;
  width: 200px;
  height: 100px;
}
</style>
</head>
<body>
  <div id='container'>
  </div>
</body>
</html>

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

Question 2

আপনি যদি এর ব্যাকগ্রাউন্ডগুলি আঁকেন htmlএবং body(প্রত্যেককে তার নিজস্ব রঙ দেওয়া) , আপনি দ্রুত লক্ষ্য করবেন যে bodyএটি পাশাপাশি সরিয়ে চলেছে #container, এবং এটি #containerনিজেই একেবারে শীর্ষ থেকে অফসেট bodyনয়। এটি মার্জিন ধসের একটি পার্শ্ব প্রতিক্রিয়া , যা আমি এখানে বিস্তারিত কভার করছি (যদিও উত্তরটি কিছুটা আলাদা সেটআপের বর্ণনা দেয়)।

আপনি bodyএই উচ্চতাটি 100% ঘোষণা করেছেন যেহেতু এটিই এই আচরণের ফলে স্ক্রোলবারটি প্রদর্শিত হচ্ছে html। মনে রাখবেন যে আসল উচ্চতাটি bodyপ্রভাবিত হয় না, কারণ মার্জিনগুলি কখনই উচ্চতার গণনায় অন্তর্ভুক্ত হয় না।

Question 3

@ বোল্টক্লক'এর উত্তরের ভিত্তিতে, আমি এটিকে মার্জিন শূন্য করে ঠিক করেছি ...
তাই

html,body, #st-full-pg {
   height: 100%;
   margin: 0;
}

"st-full-pg" id কাজ করে যেখানে প্যানেল ডিভকে নির্ধারিত হয় (এতে আরও প্যানেল-শিরোনাম এবং প্যানেল-বডি রয়েছে)

Question 4

কিছুটা দেরি করলেও সম্ভবত এটি কাউকে সহায়তা করে।

ডাব্লু 3 সি যেমন বলেছেন তেমনি স্ক্রোলবারটি সরানোর float: left;জন্য যুক্ত করা #container:

Flo ভাসমান বাক্স এবং অন্য কোনও বাক্সের মধ্যে মার্জিন ভেঙে যায় না (এমনকি একটি ফ্লোট এবং এর প্রবাহিত শিশুদের মধ্যেও নয়)।

Question 5

html,body {
   height: 100%;
   margin: 0;
   overflow: hidden;
}

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

Question 6

যোগ float:left;করা দুর্দান্ত, তবে কেন্দ্রীয় অনুভূমিক অবস্থান ব্যবহার করে হস্তক্ষেপ করবেmargin:auto;

আপনি যদি জানেন যে আপনার প্রান্তিকতা কত বড়, আপনি নিজের উচ্চতা শতাংশে ক্যালক ব্যবহার করে অ্যাকাউন্ট করতে পারেন:

height: calc(100% - 50px);

ব্রাউজার সমর্থনটি ভাল তবে কেবল আই 1111 + https://caniuse.com/#feat=calc

Question 7

html, body {
    height: 100%;
    overflow: hidden;
}

আপনি যদি শরীরের স্ক্রোলিং অপসারণ করতে চান তবে নীচের স্টাইলটি যুক্ত করুন:

body {
    height: 100%;
    overflow: hidden;
}

Question 8

আমি একটি সমাধান পেয়েছি: প্যাডিং যুক্ত করুন: 1 পিএক্স 0; দেহে উল্লম্ব স্ক্রোলবারগুলি উপস্থিত হতে বাধা দেয়

Question 9

আমি এই সমস্যাটি ঠিক আগে দেখেছি যেখানে আপনি সমস্ত লিখিত সামগ্রীকে bodyমোড়কে একটি ডিভের মধ্যে রেখেছেন । মোড়কের স্টাইল সেট করা উচিত position: relative; min-height: 100%;। #containerউপরে থেকে বাম 50px অবস্থান এবং বামে একটি প্যাডিং সেট দিয়ে 50 ডিগ্রি সেট করে একটি ডিভ রাখুন p মার্জিনগুলি মোড়ানোর জন্য এবং সবেমাত্র তৈরি করা ডিভের সাথে কাজ করবে না, তবে তারা এতে #containerএবং এর ভিতরে সমস্ত কিছুতেই কাজ করবে।

এখানে আমার জিসফিল উপর ফিক্স ।

Question 10

@ বোল্টক্লক দ্বারা অনুপ্রাণিত হয়ে, আমি এটি চেষ্টা করেছিলাম এবং এটি কাজ করে এমনকি জুম আউট এবং ইন করার সময়ও।

Browser: Chrome 51

html{
  height: 100%;
}
body{
  height: 100%;
  margin: 0px;
  position: relative;
  top: -20px;
}

আমার ধারণা body20px এ স্থানান্তরিত হয়েছে।

Question 11

/*removes default margin & padding*/
html, body{
    padding: 0px !important;
    margin: 0px !important;
}

/*sets body height to max; and allows scrollbar as page content grows*/
body{
    min-height: 100vh;
}

Question 12

যারা এখানে কোডের নমুনাও অন্তর্ভুক্ত করে উত্তরটি বোঝার জন্য এখানে আসছেন তাদের পক্ষে এই উত্তরটি ( এখান থেকে অনুলিপি করা ) আপনার জন্য।

কোনও জাভাস্ক্রিপ্ট বা সুনির্দিষ্ট পিক্সেল মান (যেমন 100px) প্রয়োজন নেই, কেবল, খাঁটি সিএসএস এবং শতাংশের জন্য।

যদি আপনার ডিভটি কেবল সেখানে বসে থাকে তবে তার height: 50%অর্থ শরীরের উচ্চতা 50%। সাধারণত, কোনও দৃশ্যমান সামগ্রী ছাড়াই দেহের উচ্চতা শূন্য, সুতরাং এর 50% কেবলমাত্র, ভাল, শূন্য।

এই সমাধান (উপর ভিত্তি করে এই ) (uncomment backgroundলাইন প্যাডিং একটি ঠাহর পেতে):

/* Makes <html> take up the full page without requiring content to stretch it to that height. */

html
{
  height: 100%;
  
  /* background: green; */
}

body
{
  /*
    100% the height of <html> minus 1 multiple of the total extra height from the padding of <html>.
    This prevents an unnecessary vertical scrollbar from appearing.
  */
  height: calc(100% - 1em);
  
  /* background: blue; */
}

/* In most cases it's better to use stylesheets instead of inline-CSS. */
div
{
  width: 50%;
  height: 50%;
  
  background: red;
}

<div></div>

স্নিপেট প্রসারিত করুন

উপরেরটি এমনভাবে লেখা হয়েছিল যাতে এখনও স্বাভাবিক প্যাডিং থাকবে। আপনি লাল রঙের মাত্রা সেট করতে divপারেন 100%এবং এখনও প্রতিটি পাশ / প্রান্তে প্যাডিং দেখতে পাচ্ছেন। আপনি যদি এই প্যাডিংটি না চান তবে এটি ব্যবহার করুন (যদিও এটি দেখতে সুন্দর লাগছে না, তবে আমি আপনাকে প্রথম উদাহরণটির সাথে লেগে থাকার পরামর্শ দিই):

/* Makes <html> take up the full page without requiring content to stretch it to that height. */

html, body
{
  height: 100%;
}

/* You can uncomment it but you wouldn't be able to see it anyway. */

/*
html
{
  background: green;
}
*/

body
{
  margin: 0;
  
 /* background: blue; */
}

/* In most cases it's better to use stylesheets instead of inline-CSS */
div
{
  width: 50%;
  height: 50%;
  
  background: red;
}

<div></div>

স্নিপেট প্রসারিত করুন

Question 13

এটা আমার জন্য কাজ করে:

html,
body {
    height: 100%;
    height: -webkit-fill-available; // Chrome
}

// Firefox
@-moz-document url-prefix() {
    body {
        box-sizing: border-box; 
        margin: 0;
        padding: 1px;
    }
}

Question 14

যোগ overflow: hidden;HTML এবং শরীর থেকে।

html, body {
  height: 100%;
  overflow: hidden;
}

Question 15

আমি একটি দ্রুত সমাধান পেয়েছি: 100% এর পরিবর্তে উচ্চতা 99.99% এ সেট করার চেষ্টা করুন