কীভাবে একটি <ডিভি> সবসময় পূর্ণ পর্দা তৈরি করবেন?

170

এটির বিষয়বস্তু কেমন No

এটা করা কি সম্ভব?

html css responsive

2

এখানে প্রচুর দুর্দান্ত উত্তর রয়েছে, তবে আমি ফ্লেক্সবক্সের কোনও উল্লেখ দেখতে পাচ্ছি না, তাই আমি ভেবেছিলাম যে আমি এই 2 সেন্ট ভাগ করব: পিতামাতার ডিভ 100% হওয়া একটি জিনিস, তবে যদি সময়টি আসে তবে ব্যবস্থা করুন , এবং ডিভের কিছু বিষয়বস্তুকে কেন্দ্র করে, আপনি ফ্লেক্সবক্সটি দেখতে চাইবেন। css-tricks.com/snippets/css/a-guide-to-flexbox

— ArleyM

146

এটি সর্বদা আমার পক্ষে কাজ করে:

<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
        html, body {
            height: 100%;
            margin: 0;
        }

        #wrapper {
            min-height: 100%; 
        }
    </style>
    <!--[if lte IE 6]>
    <style type="text/css">
        #container {
            height: 100%;
        }
    </style>
    <![endif]-->
</head>

<body>
    <div id="wrapper">some content</div>
</body>

এটি সম্ভবত এই সমস্যার সহজ সমাধান। কেবলমাত্র চারটি সিএসএস অ্যাট্রিবিউট সেট করতে হবে (যদিও এর মধ্যে একটি কেবল আইইকে খুশি করার জন্য)।

— অ্যাডাম হার্টে
সূত্র

1

@ অ্যাডাম হার্ট আপনি সিএসএস থেকে 'এইচটিএমএল' নির্বাচনকারীকে সরিয়ে দিলে কেন এটি কাজ করে না? → শরীর {উচ্চতা: 100%; মার্জিন: 0; ।

— অ্যালেক্স প্রুট

2

@ পি.এলেক্স ম্যাথ! যদি আপনার এইচটিএমএল ট্যাগগুলির উচ্চতা এর সামগ্রীতে ফিট করতে প্রসারিত হয়, তবে দেহের উচ্চতা তার পিতামাতার 100% হয়, তবে আপনি এটি উপলব্ধ স্থানের 100% এ জোর করবেন না।

— অ্যাডাম হার্টে

1

আমি কেবল সেফশার্প ক্রোমিয়াম ব্যবহার করে ডাব্লুপিএফ-তে এটি চেষ্টা করেছি এবং এটি কাজ করে :)

— অ্যাডমিনসফটডকে

106

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

IE9 +, ফায়ারফক্স 13+, ক্রোম 21+ এ পরীক্ষিত

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title> Fullscreen Div </title>
  <style>
  .overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(51,51,51,0.7);
    z-index: 10;
  }
  </style>
</head>
<body>
  <div class='overlay'>Selectable text</div>
  <p> This paragraph is located below the overlay, and cannot be selected because of that :)</p>
</body>
</html>

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

— মিহাই চিকু
সূত্র

58

এটি এটি করার সবচেয়ে স্থিতিশীল (এবং সহজ) উপায় এবং এটি সমস্ত আধুনিক ব্রাউজারে কাজ করে:

.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: auto;
  background: lime; /* Just to visualize the extent */
  
}

<div class="fullscreen">
  Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa. Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa. Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa. Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa.
</div>

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

_{ফায়ারফক্স, ক্রোম, অপেরা, ভিভালদি, আই 7 + (আইই 11 তে অনুকরণের ভিত্তিতে) কাজ করার জন্য পরীক্ষিত।}

— সম্ভ্রম
সূত্র

1

আপনি নিম্নলিখিতটি ব্যবহার করলে এটি আরও ভাল কাজ করে: position: fixed; top: 0; left: 0;এবং এখন যে অংশটি আলাদা width: 100%; height: 100%;। এটি আসলে পুরানো ব্রাউজারগুলিতেও ত্রুটিহীনভাবে কাজ করে।

— আর্ট ডেন ব্র্যাবার 17'17

1

নীচে এবং ডান ব্যবহারের চেয়ে প্রস্থ এবং উচ্চতা ব্যবহার করা কেন ভাল? আপনি যদি প্রস্থ এবং উচ্চতা ব্যবহার করেন এবং কিছু প্যাডিং এবং / অথবা সীমানা চান তবে আপনারও তা নিশ্চিত box-sizing: border-box;করতে হবে অন্যথায় আপনি আরও বড় বাক্স পাবেন যা স্ক্রোলিংয়ের কারণ হবে। এই দেখুন ।

— বিস্মিত

31

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

ভিউপোর্ট-শতাংশ দৈর্ঘ্য ভিউপোর্টের দৈর্ঘ্যের উপর ভিত্তি করে। আমরা এখানে দুটি ইউনিট ব্যবহার করবvh (ভিউপোর্টের উচ্চতা) এবং vw(ভিউপোর্টের প্রস্থ)। 100vhভিউপোর্টের উচ্চতার 100vw100% সমান এবং ভিউপোর্টের প্রস্থের 100% এর সমান।

নিম্নলিখিত এইচটিএমএল ধরে নিচ্ছেন:

<body>
    <div></div>
</body>

আপনি নিম্নলিখিত ব্যবহার করতে পারেন:

html, body, div {
    /* Height and width fallback for older browsers. */
    height: 100%;
    width: 100%;

    /* Set the height to match that of the viewport. */
    height: 100vh;

    /* Set the width to match that of the viewport. */
    width: 100vw;

    /* Remove any browser-default margins. */
    margin: 0;
}

এখানে একটি জেএসফিডাল ডেমো রয়েছে যা divফলাফল ফ্রেমের উচ্চতা এবং প্রস্থ উভয়ই পূরণ করে এমন উপাদান দেখায় । আপনি যদি ফলাফলের ফ্রেমের আকার পরিবর্তন করেন তবে divউপাদানটি সেই অনুসারে আকার পরিবর্তন করে ।

— জেমস ডোনেলি
সূত্র

18

আমার কাছে IE জোশ নেই, আপনি কি আমার জন্য এটি পরীক্ষা করতে পারেন? ধন্যবাদ।

<html>
<head>
    <title>Hellomoto</title>
    <style text="text/javascript">
        .hellomoto
        {
            background-color:#ccc;
            position:absolute;
            top:0px;
            left:0px;
            width:100%;
            height:100%;
            overflow:auto;
        }
        body
        {
            background-color:#ff00ff;
            padding:0px;
            margin:0px;
            width:100%;
            height:100%;
            overflow:hidden;
        }
        .text
        {
            background-color:#cc00cc;
            height:800px;
            width:500px;
        }
    </style>
</head>
<body>
<div class="hellomoto">
    <div class="text">hellomoto</div>
</div>
</body>
</html>

— Tubbe
সূত্র

আপনার প্রস্থগুলি 100% এ সেট করতে হবে না

— অ্যাডাম হার্ট

আমি পাই না; আপনি ডিআইভিতে 800px উচ্চতার কঠোর কোডিং করছেন। ওপি চায় এটি গতিশীল হোক।

— জোশ স্টোডোলা

ওহ দুঃখিত, ওখানে (বা উপরে / বাম) চুপচাপ দেখেনি। ঠিক আছে তবে ঠিক আছে :)

— অ্যাডাম হার্ট

একটি সাইড নোট হিসাবে, আপনি ব্যবহার করতে পারেন position: fixedপরিবর্তে পৃষ্ঠায় স্ক্রোল করতে পারেন, কিন্তু আপনি মনে রাখবেন যে এটি কিছু মোবাইল ব্রাউজারে কাজ করে না caniuse.com/#feat=css-fixed

— luiges90

1

আমি শুনেছি এটি সমাধানের আরও আধুনিক উপায় রয়েছে। @ টুবে আপনি কি জানেন যে এটি সত্য কিনা?

— bzlm

8

আমি কি সেরা মার্জিত উপায় খুঁজে পেয়েছে নিচের মত, এখানে সবচেয়ে কৌতুক করতে হয় divএর position: fixed।

.mask {
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

<html>
  <head>
  <title>Test</title>
  </head>
  <body>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <div class="mask"></div>
    </body>
  </html>

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

— জেফ টিয়ান
সূত্র

8

পরিবর্তন bodyএকটি মধ্যে উপাদান flex containerএবং divএকটি মধ্যে flex item:

body {
  display: flex;
  height: 100vh;
  margin: 0;
}

div {
  flex: 1;
  background: tan;
}

<div></div>

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

— মরি
সূত্র

8

এর উপর ভিত্তি করে এখানে সংক্ষিপ্ততম সমাধান vh। দয়া করে মনে রাখবেন যে vhএটি কিছু পুরানো ব্রাউজারগুলিতে সমর্থিত নয় ।

সিএসএস:

div {
    width: 100%;
    height: 100vh;
}

এইচটিএমএল:

<div>This div is fullscreen :)</div>

— olieidel
সূত্র

1

এটি সুবিধাজনক, তবে মোবাইল ব্রাউজারগুলিতে সমস্যা রয়েছে: css-tricks.com/the-trick-to-viewport-units-on-momot

— আলেকজান্ডার কিম

জটিল বিষয় কেন? এটি মোবাইল ব্রাউজারগুলিতে ডকডাকগো 5.54.0, স্যামসাং ইন্টারনেট 11.2.1.3 এবং ক্রোম 81.0.4044.138, পাশাপাশি ডেস্কটপে কাজ করেছে; সাহসী 1.10.97, ক্রোম 83.0.4103.116 এবং সাফারি 12.1.2।

— জ্যাকব

1

এই কৌশলটি আমি ব্যবহার করি। প্রতিক্রিয়াশীল ডিজাইনের জন্য ভাল। ব্যবহারকারী যখন ব্রাউজারের আকার পরিবর্তন করতে গণ্ডগোলের চেষ্টা করে তখন পুরোপুরি কাজ করে।

<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
        #container {
            position: absolute;
            width: 100%;
            min-height: 100%;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <div id="container">some content</div>
</body>

— Shardul
সূত্র

-8

দুর্ভাগ্যক্রমে, heightসিএসএসের সম্পত্তিটি যতটা নির্ভরযোগ্য হওয়া উচিত নয়। সুতরাং, জাভাস্ক্রিপ্টটি ব্যবহারকারীর ভিউপোর্টের উচ্চতায় প্রশ্নটিতে উপাদানটির উচ্চতা শৈলীর সেট করতে ব্যবহার করতে হবে। এবং হ্যাঁ, এটি নিখুঁত অবস্থান ছাড়াই করা যেতে পারে ...

<!DOCTYPE html>

<html>
  <head>
    <title>Test by Josh</title>
    <style type="text/css">
      * { padding:0; margin:0; }
      #test { background:#aaa; height:100%; width:100%; }
    </style>
    <script type="text/javascript">
      window.onload = function() {
        var height = getViewportHeight();

        alert("This is what it looks like before the Javascript. Click OK to set the height.");

        if(height > 0)
          document.getElementById("test").style.height = height + "px";
      }

      function getViewportHeight() {
        var h = 0;

        if(self.innerHeight)
          h = window.innerHeight;
        else if(document.documentElement && document.documentElement.clientHeight)
          h = document.documentElement.clientHeight;
        else if(document.body) 
          h = document.body.clientHeight;

        return h;
      }
    </script>
  </head>
  <body>
    <div id="test">
      <h1>Test</h1>
    </div>
  </body>
</html>

— জোশ স্টোডোলা
সূত্র

1

আপনি যদি jQuery (প্রস্তাবিত) এর মতো কোনও লাইব্রেরি ব্যবহার করেন তবে উচ্চতা $(window).height();পাওয়া সবচেয়ে ভাল ধারণা।

— জোশ স্টোডোলা

একটি খাঁটি CSS সমাধান আছে?

— মাস্ক

@ মাস্ক নং, নেই। এখনও হয় নি।

— জোশ স্টোডোলা

@ জেড আপনি কীভাবে ন্যূনতম উচ্চতা প্রয়োগ করার চেষ্টা করছেন: 100% এবং ম্যাক-সাফারিতে এটি ব্যবহার করে দেখুন এবং আমরা এখানে একটি সমাধান পেতে পারি। আমি মনে করি প্ল্যাটফর্মগুলি নিয়ে তর্ক করার চেয়ে এটি আরও ভাল।

— জোশ স্টোডোলা

3

এটি আই 7, ক্রোম 3 এবং সাফারি 4 এবং অপেরা 10 এ কাজ করে। সমস্ত উইন্ডোতে পরীক্ষিত। ত্রুটি হ'ল এটি জাভাস্ক্রিপ্ট ব্যবহার করে যা মাস্ক এড়াতে চেয়েছিল এমন কিছু ছিল (এই উত্তর সম্পর্কে তার মন্তব্য দেখুন)। ট্যান্ডেমএডামের উত্তরটি খাঁটি সিএসএস, এবং আমি অপেরা বাদে পরীক্ষিত সমস্ত ব্রাউজারগুলিতে কাজ করি।

— আশ্চর্য