<body> পুরো পর্দা পূরণ করবেন?

129

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

background-image: -webkit-gradient(radial, 100% 100%, 10, 90% 90%, 600, from(#ccc), to(#000));

এটি কাজ করে, তবে যখন সামগ্রীটি পুরো পৃষ্ঠাটি পূরণ করে না তখন গ্রেডিয়েন্টটি কেটে যায়। আমি কীভাবে <body>উপাদানটি সর্বদা পুরো পৃষ্ঠাটি পূরণ করতে পারি ?

html css radial-gradients

— রাই-
সূত্র

2

এবং body { width: 100%; height: 100%; }কাজ করে না?

— অ্যালেক্স

বিএসএসের সেই বিটটি কি বডি ট্যাগের জন্য প্রয়োগ করা হয়? এটি আমার পক্ষে আপ-টু-ডেট ক্রোম jsfiddle.net/kdjFD/ebded/result এ দুর্দান্ত কাজ করে । আপনি কোন ব্রাউজারটি পরীক্ষা করছেন?

— লেআরয়

4

না, body { width: 100%; height: 100%; }কাজ করে না আমার ধারণা আমি এটি প্রয়োগ করতে <html>হবে।

— রাই-

পুরানো-ওয়েবকিট-সিনট্যাক্স ব্যবহার করবেন না। অফিসিয়াল ডাব্লু 3 সি সিনট্যাক্সটি ব্যবহার করুন

— টিম এনগুইন

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

— রাই-

201

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

— capdragon
সূত্র

18

দেখে মনে হচ্ছে এটি যা লাগে তা html { height: 100%; }আসলে।

— রাই-

30

আমরাও html { height: 100%; }না body { height: 100%; }আমার জন্য যথেষ্ট ছিল (অপেরা একটি পরীক্ষা হিসেবে অন্তর্ভুক্ত) কী পরিশ্রম সেরা ইনিংস html, body { min-height: 100%; }মিনিট-উচ্চতা উচ্চতা ব্যবহার পরিবর্তে আমার পটভূমি সাদা বাম / O W পটভূমি-রঙ প্রয়োগ যখন আমি আমার পৃষ্ঠার মাঝখানে কিছু কলাপসিবল আছে divs প্রসারিত করা হয়েছে। min-heightএটি স্থির।

— স্টিফেন পি

1

ব্যাকগ্রাউন্ড ব্যবহার করার সময় এই সমস্যাটি কেন ঘটছে: লিনিয়ার গ্রেডিয়েন্ট এবং সাধারণ পটভূমিতে নয়

— এএসএন

@ এ্যাসেন আপনি কি কখনও বুঝতে পারেন যে এটি কেন?

— lacy

2

যদি এটি এখনও কারও জন্য কাজ না করে তবে কেবল এতে পরিবর্তন 100%করুন 100vh।

— পলিমারফিজম

27

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

html {
   margin: 0px;
   height: 100%;
   width: 100%;
}

body {
   margin: 0px;
   min-height: 100%;
   width: 100%;
}

heightজন্য htmlএবং min-heightজন্য body।

— jwatts1980
সূত্র

1

তাদের কারও দরকার নেই width: 100%;।

— রাই-

1

প্রদর্শনের কারণে: ব্লক প্রকৃতি

— ভ্যালেন

এছাড়াও margin: 0;যথেষ্ট, আপনি কোন ইউনিটের শূন্য ব্যবহার করবেন তা নির্দিষ্ট করার দরকার নেই

— কামি কোডিং

15

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

আমি এর সঠিক উত্তর দিতে স্টিফেন পি এর মন্তব্য পেয়েছি ।

html {
    /* To make use of full height of page*/
    min-height: 100%;
    margin: 0;
}
body {
    min-height: 100%;
    margin: 0;
}

শরীরের উচ্চতা পটভূমি

যখন আমার এইচটিএমএল (বা এইচটিএমএল এবং দেহ) উচ্চতাটি 100% এ সেট হয়,

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

ব্যাকগ্রাউন্ড শরীর ভরাট নয়

— সম্প্রদায়
সূত্র

12

আমাকে এইচটিএমএল এবং বডি উভয় ক্ষেত্রেই 100% প্রয়োগ করতে হয়েছিল।

— htrufan
সূত্র

4

শরীরের স্তরে পরিমাপের ভিউপোর্ট (ভিএইচ, ভিএম) ইউনিট ব্যবহার করার চেষ্টা করুন

এইচটিএমএল, বডি {মার্জিন: 0; প্যাডিং: 0; } শরীর {ন্যূনতম উচ্চতা: 100vh; }

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

আমি শরীরের মধ্যে উপাদানগুলিতে vh, vm ইউনিট ব্যবহার করে উদ্ভট ফলাফল পেয়েছি, বিশেষত পুনরায় আকার দেওয়ার সময় when

— মাইক রাইট
সূত্র

1

আমি মনে করি মূলত সঠিক উপায়ে সিএসএস স্থাপন করা:

html
{
    overflow: hidden;
}

body
{
    margin: 0;
    box-sizing: border-box;
}

html, body
{
    height: 100%;
}

— মার্টিন ওয়ানটেক
সূত্র

এর গুরুত্বপূর্ণ অংশগুলি ছয় বছর আগে গৃহীত উত্তর হিসাবে একই, দুঃখিত।

— রাই-

1

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

আমার জন্য, সমস্যাটি এই কারণেই হয়েছিল যে <header>ট্যাগটিতে একটি margin-top5 মিমি <footer>ছিল এবং এর প্রান্তিক নীচে 5 মিমি ছিল। আমি সেগুলি সরিয়ে নিয়ে এর পরিবর্তে কিছু padding(যথাক্রমে উপরে এবং নীচে) রেখেছি । আমি নিশ্চিত নই যে মার্জিনটি প্রতিস্থাপন করা সমস্যার একটি আদর্শ সমাধান ছিল, তবে মূল কথাটি হ'ল যদি আপনার প্রথম এবং শেষ উপাদানগুলি থাকে<body> কিছু আপনি এটি সন্ধান করতে এবং সেগুলি সরাতে চাইবেন।

আমার htmlএবং bodyট্যাগগুলিতে নিম্নলিখিত স্টাইল ছিল

body {
  line-height: 1;
  min-height: 100%;
  position: relative; }

html {
  min-height: 100%;
  background-color: #3c3c3c; }

— দিনিকা স্যাক্সেনা
সূত্র

1

আপনি যদি আছে একটি সীমানা বা প্যাডিং, তারপর সমাধান

html, body {
    margin: 0;
    height: 100%;
}
body {
    border: solid red 5px;
    border-radius: 2em;
}

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

অসম্পূর্ণ উপস্থাপনা উত্পাদন করে

এটি সীমানা বা প্যাডিংয়ের উপস্থিতিতে সরাসরি পেতে

পরিবর্তে ব্যবহার করুন

html, body {
    margin: 0;
    height: 100%;
}
body {
    box-sizing: border-box;
    border: solid red 5px;
    border-radius: 2em;
}

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

মার্টিন যেমন উল্লেখ করেছেন, যদিওoverflow: hidden প্রয়োজন নেই।

(2018 - ক্রোম 69 এবং আইই 11 দিয়ে পরীক্ষা করা)

— Vrokipal
সূত্র

আপনার উত্তরটি কেবলমাত্র আপনার জন্য প্রাসঙ্গিক এবং কারণ আপনি bodyট্যাগটিতে একটি সীমানা যুক্ত করেছেন । এই সীমানা ব্যতীত, bodyভিউপোর্টের ঠিক 100% পূরণ করবে, উদাহরণস্বরূপ আপনি এটি পটভূমির রঙের সাথে দেখতে পারেন। এই প্রশ্নের সঠিক উত্তর 7 বছর আগে গৃহীত হয়েছিল এখনও বৈধ।

— নিস

-1

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

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title> Fullscreen Div </title>
  <style>
  .test{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 10;
  }
  </style>
</head>
<body>
  <div class='test'>Some text</div>
</body>
</html>

— GigiProve
সূত্র

প্রশ্ন কি ছিল না, দুঃখিত। খুশী হয়ে আপনি এমন কিছু খুঁজে পেয়েছেন যা আপনার জন্য কাজ করে।

— রাই-