শতাংশের উচ্চতা এইচটিএমএল 5 / সিএসএস

176

আমি সিএসএসে <div>একটি নির্দিষ্ট শতাংশের উচ্চতায় একটি সেট করার চেষ্টা করছি , তবে এটি কেবল এর অভ্যন্তরের সামগ্রীর মতোই আকারে থেকে যায়। আমি যখন এইচটিএমএল 5 সরিয়ে ফেলি তখন <!DOCTYTPE html>এটি কাজ করে, <div>পুরো পৃষ্ঠাটি পছন্দমতো গ্রহণ করা। আমি পৃষ্ঠাটি যাচাইকরণ করতে চাই, তাই আমার কী করা উচিত?

আমার এই সিএসএস আছে <div>, যার আইডি রয়েছে page:

#page {
    padding: 10px;
    background-color: white;
    height: 90% !important;
}

html css height

— ডি স্ট্রাউট
সূত্র

3

heightশতাংশের মান সহ সিএসএস সম্পত্তি সম্পর্কিত একটি সহজ এবং স্পষ্ট ব্যাখ্যা এখানে রয়েছে : stackoverflow.com/a/31728799/3597276

— মাইকেল বেনজামিন

ডক্টইপিই ইস্যুটি সম্বোধন করে: stackoverflow.com/a/32215263/3597276

— মাইকেল বেঞ্জামিন

371

আমি সিএসএসে একটি নির্দিষ্ট শতাংশ উচ্চতায় একটি ডিভি সেট করার চেষ্টা করছি

শতকরা কিসের?

শতাংশের উচ্চতা নির্ধারণ করতে, এর মূল উপাদানটির (*) অবশ্যই একটি সুস্পষ্ট উচ্চতা থাকতে হবে। এটি মোটামুটি স্ব-স্পষ্ট, যদি আপনি উচ্চতা ছেড়ে যানauto তবে ব্লকটি তার সামগ্রীর উচ্চতা গ্রহণ করবে ... তবে যদি বিষয়বস্তু নিজেই পিতামাতার শতাংশের দিক দিয়ে প্রকাশিত হয় তবে আপনি নিজেকে সামান্য তৈরি করেছেন 22 টি ধরুন The ব্রাউজারটি ছেড়ে দেয় এবং কেবল সামগ্রীর উচ্চতা ব্যবহার করে।

সুতরাং ডিভের পিতামাতার একটি স্পষ্ট heightসম্পত্তি থাকতে হবে। আপনি যদি চান তবে সেই উচ্চতাটিও শতাংশ হতে পারে, যা সমস্যাটি কেবল পরবর্তী স্তরে নিয়ে যায়।

আপনি যদি ডিভিউ উচ্চতাকে ভিউপোর্টের উচ্চতার শতকরা একটি ভাগ করতে চান তবে ডিভের প্রতিটি পূর্বপুরুষ <html>এবং এর <body>সাথে থাকতে হবেheight: 100% , তাই এখানে ডিভের সুস্পষ্ট শতাংশের উচ্চতার একটি চেইন রয়েছে।

(*: বা, ডিভিটি অবস্থান করা থাকলে 'সমন্বিত ব্লক', এটি অবস্থিত নিকটতম পূর্বপুরুষ।)

বিকল্পভাবে, সমস্ত আধুনিক ব্রাউজার এবং IE> = 9 ভিউপোর্টের উচ্চতা ( vh) এবং ভিউপোর্টের প্রস্থ ( vw) এর সাথে সম্পর্কিত নতুন সিএসএস ইউনিটকে সমর্থন করে :

div {
    height:100vh; 
}

আরও তথ্যের জন্য এখানে দেখুন ।

— bobince
সূত্র

পোর্ট্রেট স্ক্রিন ওরিয়েন্টেশন

— স্ট্যাকওভারফ্লো.com

1

দয়া করে নীচে ব্রায়ান ক্যাম্পবেলের উত্তর দেখুন আমি বিশ্বাস করি যে এটিই সঠিক সমাধান। এই উত্তরটি একদম যথাযথ বলে মনে হচ্ছে এবং আসল সমস্যাটির সমাধান করে না।

— এমজি বিকাশকারী

69

আপনাকে পাশাপাশি <html>এবং <body>উপাদানগুলিতেও উচ্চতা নির্ধারণ করতে হবে ; অন্যথায়, তারা কেবলমাত্র সামগ্রীতে ফিট করার পক্ষে যথেষ্ট পরিমাণে বড় হবে। উদাহরণস্বরূপ :

<!DOCTYPE html>
<title>Example of 100% width and height</title>
<style>
html, body { height: 100%; margin: 0; }
div { height: 100%; width: 100%; background: red; }
</style>
<div></div>

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

— ব্রায়ান ক্যাম্পবেল
সূত্র

6

._¬ আমাকে ডকুমেন্টটির উচ্চতাও 100% এ সেট করতে হয়েছিল তা নির্ধারণ করতে আমার 20 মিনিট সময় লেগেছে। আমি এটি কিছুটা দেরিতে পড়েছি, তবে এটি এখনও খুব উজ্জ্বল, এখনও আছে। দীর্ঘশ্বাস

— ফেলুন

এটি উত্তর হিসাবে ভোট দেওয়া উচিত কারণ এটি এখানে আসা প্রচুর লোককে একটি সমাধান দেয় যা ভেবে অবাক হয় যে কী করা যেতে পারে সেক্ষেত্রে প্রথম উত্তরটি দেখুন এবং এটি সম্ভব নয় বলে মনে করেন এবং এটি না পড়ে অন্য কোনও পদ্ধতি বিদ্যমান কিনা তা ভেবে

— ভ্রষ্ট হন

আমি সম্মত হলাম এটি সঠিক উত্তর, উচ্চতাটি কাজ করে না কারণ দেহ এবং এইচটিএমএল যাবতীয় মূল উপাদানটি সেট করা দরকার। এই উত্তরটি গ্রহণযোগ্য উত্তর হওয়া উচিত।

— এমজি বিকাশকারী

এটি সঠিক উত্তর নয় - যদি বিষয়বস্তু স্ক্রিনের উচ্চতার সাথে ফিট করে তবে তারপরে অন্য সামগ্রীগুলি আর দেখা যায় না, সুতরাং উচ্চতাটি ব্রাউজার উইন্ডোর 100% তে সেট করা হয়নি তবে আবার 100% হয়ে গেছে বিষয়বস্তু। এটি সম্ভবত যৌক্তিক নয়, তবে এটি ফায়ারফক্স এবং ক্রোম দুটি প্রধান ব্রাউজারে ঘটবে - এটি চেষ্টা করে দেখুন। সুতরাং গৃহীত উত্তর একমাত্র সঠিক উত্তর।

— নেপদেব

15

বোবিনসের উত্তর আপনাকে জানাতে দেবে যে "ক্ষেত্রে উচ্চতা: XX%;" হবে বা কাজ করবে না।

যদি আপনি একটি সেট অনুপাত (উচ্চতা: এর নিজস্ব প্রস্থের%) দিয়ে কোনও উপাদান তৈরি করতে চান, তবে এটির সর্বোত্তম উপায় হ'ল কার্যকরভাবে উচ্চতা নির্ধারণ করে padding-bottom। বর্গক্ষেত্রের উদাহরণ:

<div class="square-container">
  <div class="square-content">
    <!-- put your content in here -->
  </div>
</div>

.square-container {  /* any display: block; element */
  position: relative;
  height: 0;
  padding-bottom: 100%; /* of parent width */
}
.square-content {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

বর্গাকার ধারকটি কেবল প্যাডিং দিয়ে তৈরি হবে এবং সামগ্রীটি ধারকটি পূরণ করার জন্য প্রসারিত হবে। এই বিষয়টি নিয়ে ২০০৯ সাল থেকে দীর্ঘ নিবন্ধ: http://alistapart.com

— ওলেক্স পোনোমারেঙ্কো
সূত্র

এটি দুর্দান্ত কাজ করে। এটি 100+ উপাদান ধারণ করে এমন একটি পৃষ্ঠা পুনরায় আকার দিলে ব্রাউজারে দ্রুত বোধ করে। ধন্যবাদ!

— ডিন গ্র্যান্ড

5

আপনি ব্যবহার করতে পারেন 100vw / 100vh। CSS3 আমাদের ভিউপোর্ট-সম্পর্কিত ইউনিট দেয়। 100vw মানে ভিউপোর্টের প্রস্থের 100%। 100vh; উচ্চতার 100%।

    <div style="display:flex; justify-content: space-between;background-color: lightyellow; width:100%; height:85vh">
        <div style="width:70%; height: 100%; border: 2px dashed red"></div>
        <div style="width:30%; height: 100%; border: 2px dashed red"></div>
    </div>

— আহমদ আhaাহাদাদে।
সূত্র

4

ওহে! শতাংশ (%) ব্যবহার করার জন্য, আপনাকে অবশ্যই এর মূল% টি সংজ্ঞায়িত করতে হবে। আপনি যদি বডি {উচ্চতা: 100% use ব্যবহার করেন তবে এটি কাজ করবে না কারণ এর পিতামাতার উচ্চতার কোনও শতাংশ নেই। সেক্ষেত্রে শরীরের উচ্চতাটি কাজ করতে আপনাকে অবশ্যই এটি এইচটিএমএল {উচ্চতায় যুক্ত করতে হবে : 100%}

অন্য ক্ষেত্রে যে নির্ধারিত পিতামাতার শতাংশ আপনি ব্যবহার করতে পারেন তা থেকে মুক্তি পেতে

শরীর {উচ্চতা: 100vh}

VH ঘোরা ভিউপোর্ট উচ্চতা

আমি মনে করি এটি সাহায্য করে

— মোঃ এ বারিক
সূত্র

2

কখনও কখনও, আপনি শর্তাধীনভাবে একটি ডিভের উচ্চতা নির্ধারণ করতে চাইতে পারেন, যেমন যখন পুরো সামগ্রীটি পর্দার উচ্চতার চেয়ে কম হয়। সমস্ত প্যারেন্ট উপাদানগুলিকে 100% এ সেট করা বিষয়বস্তুটি স্ক্রিনের আকারের চেয়ে লম্বা হলে তা কেটে যাবে।

সুতরাং, এটির কাছাকাছি যাওয়ার উপায়টি ন্যূনতম উচ্চতা নির্ধারণ করা:

প্যারেন্ট উপাদানগুলিকে স্বয়ংক্রিয়ভাবে তাদের উচ্চতা সামঞ্জস্য করতে দেওয়া চালিয়ে যান তারপরে আপনার মূল ডিভিতে, 100vh (ভিউপোর্ট ইউনিট) থেকে শিরোনাম এবং পাদচরণ ডিভের পিক্সেল আকারগুলি বিয়োগ করুন। সিএসএসে, এর মতো কিছু:

মিনিট উচ্চতা: ক্যালক (100vh - 246px);

100vh স্ক্রিনের পূর্ণ দৈর্ঘ্য, পার্শ্ববর্তী ডিভগুলি বিয়োগ করে। ন্যূনতম উচ্চতা এবং উচ্চতা নয় সেট করে, পর্দার চেয়ে দীর্ঘতর সামগ্রী প্রবাহিত না হয়ে কাটতে হবে।

— Jahmic
সূত্র