প্যাডিং / মার্জিন সহ সিএসএস 100% উচ্চতা

813

এইচটিএমএল / সিএসএসের সাহায্যে, আমি কীভাবে এমন একটি উপাদান তৈরি করতে পারি যার প্রস্থ এবং / বা উচ্চতা যার মূল উপাদানগুলির 100% এবং এখনও সঠিক প্যাডিং বা মার্জিন রয়েছে?

"যথাযথ" দ্বারা আমার অর্থ হ'ল যদি আমার পিতামাতার উপাদানগুলি 200pxলম্বা হয় এবং আমি নির্দিষ্ট height = 100%করে padding = 5pxবলি যে আমি সমস্ত পক্ষের 190pxসাথে একটি উচ্চ উপাদান পেয়েছি border = 5px, প্যারেন্ট উপাদানকে সুন্দরভাবে কেন্দ্র করে।

এখন, আমি জানি যে স্ট্যান্ডার্ড বক্স মডেলটি কীভাবে এটি কাজ করা উচিত তা নির্দিষ্ট করে না (যদিও আমি জানতে চাই কেন, ঠিক ...), সুতরাং সুস্পষ্ট উত্তরটি কার্যকর হয় না:

#myDiv {
    width: 100%
    height: 100%;
    padding: 5px;
}

তবে এটি আমার কাছে মনে হবে যে স্বেচ্ছাসেবী আকারের একটি পিতামাতার জন্য নির্ভরযোগ্যভাবে এই প্রভাব উত্পাদন করার কিছু উপায় থাকতে হবে। কেউ কি এই (আপাতদৃষ্টিতে সহজ) কাজ সম্পাদনের কোনও উপায় জানেন?

ওহ, এবং রেকর্ডের জন্য আমি IE সামঞ্জস্যের জন্য মারাত্মকভাবে আগ্রহী নই যাতে (আশা করি) বিষয়গুলি কিছুটা সহজ করা উচিত।

সম্পাদনা: যেহেতু একটি উদাহরণের জন্য জিজ্ঞাসা করা হয়েছিল, তাই আমি ভাবতে পারি এমন সহজতমটি এখানে:

<html style="height: 100%">
    <body style="height: 100%">
        <div style="background-color: black; height: 100%; padding: 25px"></div>
    </body>
</html>

চ্যালেঞ্জটি হ'ল পেজটি স্ক্রোলবারগুলির প্রয়োজনের পর্যাপ্ত পরিমাণে বাড়ানো ছাড়াই সমস্ত প্রান্তে 25 পিক্সেল প্যাডিং সহ ব্ল্যাক বক্সটি দেখানো হবে।

css 
— Toji
সূত্র
আমি এই দুটি সমাধান সর্বাধিক নির্ভরযোগ্য হিসাবে খুঁজে পেয়েছি: http://www.xs4all.nl/~peterned/example/csslayout1.html http://themaninblue.com/experiment/footerStickAlt/ আপনার কি কোনও নির্দিষ্ট এইচটিএমএল আছে যা আমরা দেখতে এবং খেলতে পারি?
— নিক প্রেস্টা
— বেন

উত্তর:

755

আমি " পিআরএইচএমএল এবং সিএসএস ডিজাইন প্যাটার্নস " পড়তে এই ধরণের জিনিসগুলি কীভাবে করব তা শিখেছি । display:blockডিফল্ট প্রদর্শন মান div, কিন্তু আমি এটা স্পষ্ট করতে চাই। ধারকটি সঠিক ধরণের হতে হবে; positionবৈশিষ্ট্যটি হ'ল fixed, relativeবা absolute।

.stretchedToMargin {
  display: block;
  position:absolute;
  height:auto;
  bottom:0;
  top:0;
  left:0;
  right:0;
  margin-top:20px;
  margin-bottom:20px;
  margin-right:80px;
  margin-left:80px;
  background-color: green;
}
<div class="stretchedToMargin">
  Hello, world
</div>
স্নিপেট প্রসারিত করুন

নুশুর মন্তব্যে ফিডল

— ফ্র্যাঙ্ক শুইটারম্যান
সূত্র
42
চমত্কার সমাধান, এটি এক বুকমার্ক করা হবে। যে কেউ লাইভ ডেমো চায় তার জন্য এটি দ্রুত jsfiddle.net/Rpdr9 এ যুক্ত করুন । আশা করি আপত্তি করবেন না।
— নুশু
16
@ তোজি আই আই সামঞ্জস্যতা সম্পর্কে পাত্তা দিচ্ছিল না, দুর্ভাগ্যক্রমে আমার তা করতে হবে। এই সমাধানটি প্রাথমিকভাবে আই 6 এর অধীনে কাজ করে নি। পৃষ্ঠায় ডিন এডওয়ার্ডসের ' IE9.js ' যুক্ত করা এই কাজটি করেছে। এখন আমাকে কেবল আশা এবং প্রার্থনা করতে হবে যে আত্মীয় / পরম অবস্থান কোনও শিশু উপাদানগুলির সাথে কিছু না
— ক্রিস্টোফার পার্কার
24
-1 (যদিও মনে হচ্ছে আমি এখানে সংখ্যালঘু: পি)। এটি ধরে নিয়েছে যে বাক্সটি একেবারে অবস্থানযুক্ত হতে পারে; লোকেরা ইতিমধ্যে পোস্টগুলিকে অত্যধিক ব্যবহার করেছে: অ্যাবস যেমন হয়, তাদের এই গোলাবারুদ প্রয়োজন হয় না। এই উদাহরণটি ধরুন: একটি ডিভ "প্যানেল" এর ভিতরে ক্লাসের একাধিক ডিভের সাথে "প্যানেল"। "প্যানেলস" এর {ওভারফ্লো রয়েছে: লুকানো; উচ্চতা: 300px;}, এবং "প্যানেল" এর contents সীমানা সহ বিভিন্ন সামগ্রী / সামগ্রী-উচ্চতা রয়েছে: # 000 কঠিন 1px; float: left; মার্জিন ডান: 10px;}। সমস্ত "প্যানেল" কোনও বিন্দুতে সীমানা হারানো ছাড়াই "প্যানেলগুলির" উচ্চতা তৈরি করুন। "প্যানেল" বিভাগগুলি এখানে পোস্ট করা যাবে না। @ মার্কোর সমাধান এই দৃশ্যের জন্য কাজ করে, যদিও।
— Eternicode
8
ওহ, আমি পেয়েছি। top:0, bottom:0মূলত উপাদান আউট "প্রসারিত"। আমি শুধু এটা দিয়ে কাজ পেতে পারেন position:absoluteযদিও
— ম্যাট
7
আপনি কি কেবল top:20px;bottom:20px;left:20px;right:20px;মার্জিন ব্যবহারের পরিবর্তে কিছু করতে পারবেন না ?
— চৌই
391

সিএসএস 3 এ একটি নতুন সম্পত্তি রয়েছে যা আপনি বক্স মডেলটির প্রস্থ / উচ্চতা গণনা করার উপায়টি পরিবর্তন করতে ব্যবহার করতে পারেন, এটি বক্স-সাইজিং বলে।

"সীমান্ত-বাক্স" মান সহ এই সম্পত্তিটি সেট করে এটি কোনও প্যাডিং বা সীমানা যুক্ত করার সময় প্রসারিত না করার জন্য আপনি যে কোনও উপাদান প্রয়োগ করেন। আপনি যদি 100px প্রস্থ এবং 10px প্যাডিং সহ কোনও কিছু সংজ্ঞায়িত করেন তবে এটি এখনও 100px প্রশস্ত হবে।

box-sizing: border-box;

ব্রাউজার সমর্থন জন্য এখানে দেখুন । এটি আই 7 এবং নিম্নের জন্য কাজ করে না, তবে আমি বিশ্বাস করি যে ডিন এডওয়ার্ডের আই 77.js এটির জন্য সমর্থন যোগ করে। উপভোগ করুন :)

— মার্কো জারডিম
সূত্র
45
অবশেষে! আমি প্রায় 10 বছর ধরে এই সঠিক বৈশিষ্ট্যের জন্য অপেক্ষা করছি। করুণ আইই 7 এটি সমর্থন করে না তবে আমি সবসময় মনে করি যারা এখনও আই আই ব্যবহার করছেন তারা একটি সুন্দর বিন্যাসের প্রাপ্য নয়।
— ক্রোনোকলি
2
এটি আমার জন্য আইফোন / সাফারি এবং অ্যান্ড্রয়েডের ডিফল্ট ব্রাউজারে কাজ করেছে যেখানে উপরের একেবারে অবস্থানিক সমাধানটি কাজ করে না।
— স্পড
18
এটি মূলত আইই এর কুইর্কস মোড বক্স মডেলের মতো । আমি মজার বিষয় পেয়েছি যে সবাই কীভাবে IE এ এখনও ঘৃণা করে এখন border-boxসবার নায়ক :)
— ম্যাট গ্রেয়ার
14
এফওয়াইআই, বক্স-সাইজিংয়ের ব্রাউজারের উপসর্গটি এখন -মোজ ছাড়া সকলের জন্য বাদ দেওয়া হয়েছে। একটি ভাল আলোচনার জন্য পাওলিরিশ ডটকম / ২২ / বাক্স-সাইজিং- বর্ডার- বক্স-ftw এবং মন্তব্যগুলি দেখুন
— আপোনজানি
3
হ্যাঁ! এটাই সঠিক উত্তর! 100% উচ্চতা এখন মাতাল না করেই তাদের পিতামাতার সাথে সম্পর্কিতভাবে সঠিকভাবে স্কেল করে। আমি পারলে মিলিয়ন +1 দিতাম।
— অ্যান্ড্রু মাও
65

সমাধানটি উচ্চতা এবং প্রস্থ মোটেও ব্যবহার না করা! উপরের, বাম, ডান, নীচে ব্যবহার করে অভ্যন্তরীণ বাক্স সংযুক্ত করুন এবং তারপরে মার্জিন যুক্ত করুন।

.box {margin:8px; position:absolute; top:0; left:0; right:0; bottom:0}
<div class="box" style="background:black">
  <div class="box" style="background:green">
    <div class="box" style="background:lightblue">
      This will show three nested boxes. Try resizing browser to see they remain nested properly.
    </div>
  </div>
</div>
স্নিপেট প্রসারিত করুন

— amolk
সূত্র
6
আপ-ভোট কারণ আপনি প্রযুক্তিগতভাবে সঠিক, তবে এটিও মূলত ফ্র্যাঙ্কের মতোই উত্তর (যা আমি মনে করি সেখানে স্লোপিয়ার ব্রাউজারগুলির জন্য কিছুটা বন্ধুত্বপূর্ণ))
— তোজি
39

আরও ভাল উপায় ক্যালক () বৈশিষ্ট্য সহ। সুতরাং আপনার কেসটি দেখতে এমন হবে:

#myDiv {
    width: calc(100% - 5px);
    height: calc(100% - 5px);
    padding: 5px;
}

সরল, পরিষ্কার, কোনও কর্মক্ষেত্র নেই। কেবলমাত্র মান এবং অপারেটরের মধ্যবর্তী স্থানটি ভুলে যাবেন না তা নিশ্চিত করুন (উদাহরণস্বরূপ (100%-5px)এটি সিনট্যাক্সটি ভেঙে দেবে En উপভোগ করুন!

— ব্রায়ান অ্যাডারার
সূত্র
6
সুন্দর সমাধান। কেবল ব্রাউজার সমর্থন পরীক্ষা করার জন্য মনে রাখবেন: আমি কি ক্যালক ()
— ব্রেট পোস্টিন
5
প্যাডিং কার্যকরভাবে উপাদানটিকে 10px প্রশস্ত এবং বৃহত্তর করে তুলবে, যেহেতু এটি কি আপনাকে প্রতিটি প্লাস 5px প্যাডিংকে 100% প্রস্থ এবং উচ্চতা দেবে না?
অবশেষে একটি ভাল সমাধান, এবং তাদের বাকিগুলির মতো নয় যেখানে আপনি শীর্ষ, ডান, নীচে এবং বাম 0 হতে পট করুন যা কেবলমাত্র অবস্থানের সাথে কাজ করবে: পরম;
— গিল এপশেটেন
আমি মনে করি সঠিক: # মাইডিভ {প্রস্থ: ক্যালক (100% - 10px); উচ্চতা: ক্যালক (100% - 10px); প্যাডিং: 5 পিএক্স; Left বাম থেকে 5 এবং ডান থেকে 5 = 10, শীর্ষ থেকে 5 এবং নীচে থেকে 5 = 10
— ক্রিস পি
21

ডাব্লু 3 সি স্পিকের উচ্চতাটি দেখতে পাওয়া যায় এমন জায়গার উচ্চতা বোঝায় যেমন 1280x1024 পিক্সেল রেজোলিউশন মনিটরের 100% উচ্চতা = 1024 পিক্সেল।

ন্যূনতম উচ্চতা পৃষ্ঠাটির সামগ্রিক উচ্চতাটিকে এমন পৃষ্ঠায় বোঝায় যাতে লিখিত সামগ্রীটি 1024px ন্যূনতম উচ্চতা: 100% সমস্ত সামগ্রী অন্তর্ভুক্ত করতে প্রসারিত করবে।

অন্য সমস্যাটি হ'ল প্যাডিং এবং বর্ডারটি আইডি 6 ব্যতীত বেশিরভাগ আধুনিক ব্রাউজারগুলিতে উচ্চতা এবং প্রস্থে যুক্ত করা হয় (ie6 আসলে বেশ যৌক্তিক তবে অনুমান অনুসারে নয়)। একে বক্স মডেল বলা হয়। সুতরাং যদি আপনি নির্দিষ্ট

min-height: 100%;
padding: 5px;

এটি আপনাকে উচ্চতার জন্য 100% + 5px + 5px দেবে। এটি কাছাকাছি পেতে আপনার একটি মোড়কের ধারক প্রয়োজন।

<style>
    .FullHeight { 
       height: auto !important; /* ie 6 will ignore this */
       height: 100%;            /* ie 6 will use this instead of min-height */
       min-height: 100%;        /* ie 6 will ignore this */
    }

    .Padded {
       padding: 5px;
    }
</style>

<div class="FullHeight">
   <div class="Padded">
      Hello i am padded.
   </div
</div>
— অ্যালেক্স
সূত্র
4
@ অ্যালেক্স: তবে কী বাহ্যিক ডিভের উচ্চতার 100% অভ্যন্তরীণ ডিভকে (প্যাডড এক) তৈরি করে? আমার অভিজ্ঞতা হয়েছে যে আপনি কেবলমাত্র একটি বৃহত্তর পূর্ণ উচ্চতার ডিভের অভ্যন্তরে কিছুটা ছোট ডিভ পান।
— লরেন্স ডল
8

1. সঙ্গে পূর্ণ উচ্চতা padding

body {
  margin: 0;
}
.container {
  min-height: 100vh;
  padding: 50px;
  box-sizing: border-box;
  background: silver;
}
<div class="container">Hello world.</div>
স্নিপেট প্রসারিত করুন

2. সাথে সম্পূর্ণ উচ্চতা margin

body {
  margin: 0;
}
.container {
  min-height: calc(100vh - 100px);
  margin: 50px;
  background: silver;
}
<div class="container">Hello world.</div>
স্নিপেট প্রসারিত করুন

3. সঙ্গে পূর্ণ উচ্চতা border

body {
  margin: 0;
}
.container {
  min-height: 100vh;
  border: 50px solid pink;
  box-sizing: border-box;
  background: silver;
}
<div class="container">Hello world.</div>
স্নিপেট প্রসারিত করুন

— স্টিকারসমূহ
সূত্র
7

এটি সিএসএসের একদম স্পষ্ট প্রতিমা - আমি এখনও যুক্তিটি বুঝতে পারি নি (যদি কেউ জানে তবে প্লিজ ব্যাখ্যা করুন)।

100% এর অর্থ ধারক উচ্চতার 100% - যার সাথে কোনও মার্জিন, সীমানা এবং প্যাডিং যুক্ত হয়। সুতরাং এমন পাত্রে পাওয়া কার্যকরভাবে অসম্ভব যা এটির পিতামাতাকে পূরণ করে এবং এতে মার্জিন, সীমানা বা প্যাডিং রয়েছে।

এছাড়াও নোট করুন, উচ্চতা নির্ধারণ করা ব্রাউজারগুলির মধ্যেও কুখ্যাতভাবে বেমানান।

আমি পোস্ট করার পরে আমি আরও একটি জিনিস শিখেছি হ'ল শতাংশটি ধারকটির দৈর্ঘ্যের তুলনামূলক , এটি প্রস্থ, উচ্চতার জন্য শতাংশকে আরও মূল্যহীন করে তোলে।

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

— লরেন্স ডল
সূত্র
কোনও যুক্তি নেই, ঠিক যেখানে ঘটল ব্রাউজারগুলি ধারাবাহিক আচরণের দিকে রূপান্তরিত করতে শুরু করেছিল। আমার প্রতিক্রিয়াতে উল্লিখিত বইটি দেখুন।
— ফ্র্যাঙ্ক শ্যুইটারম্যান
সঠিক শব্দটি ব্যবহারের জন্য উত্সাহিত। টেক্স এবং আমি যে কোনও লেআউট ম্যানেজার দেখেছি এটি সঠিকভাবেই পেয়েছে, কেবল সিএসএস অবশ্যই বিশেষ হওয়া উচিত।
— মার্টিনাস
5

আরেকটি সমাধান হ'ল ডিসপ্লে ব্যবহার করা: টেবিলের সাথে আলাদা আলাদা বক্স মডেলের আচরণ রয়েছে।

আপনি পিতামাতার কাছে একটি উচ্চতা এবং প্রস্থ স্থাপন করতে পারেন এবং এটিকে প্রসারিত না করে প্যাডিং যুক্ত করতে পারেন। শিশুর 100% উচ্চতা এবং প্রস্থ বিয়োগ প্যাডিংস রয়েছে।

JSBIN

আরেকটি বিকল্প হ'ল বক্স-সাইজিং প্রোপার্টি ব্যবহার করা। উভয়ের সাথে কেবল সমস্যা হ'ল তারা আই 7 এ কাজ করবেন না।

— user1721135
সূত্র
4

আর একটি সমাধান: আপনি মার্জিন পাশাপাশি আকারগুলির জন্য শতাংশ ইউনিট ব্যবহার করতে পারেন। উদাহরণ স্বরূপ:

.fullWidthPlusMargin {
    width: 98%;
    margin: 1%;
}

এখানে মূল ইস্যুটি হ'ল প্যারেন্ট উপাদানগুলির আকারের সাথে মার্জিনগুলি সামান্য বৃদ্ধি / হ্রাস পাবে। সম্ভবত আপনি যে কার্যকারিতাটি পছন্দ করবেন তা হ'ল মার্জিন স্থির থাকে এবং ব্যবধানে পরিবর্তনগুলি পূরণ করতে সন্তানের উপাদান বৃদ্ধি / সঙ্কুচিত হয়। সুতরাং, আপনার প্রদর্শনটি কতটা টাইট হওয়া দরকার তার উপর নির্ভর করে এটি সমস্যাযুক্ত হতে পারে। (আমি 0.3% এর মতো আরও ছোট ব্যবধানেও যাব)।

— ktbiz
সূত্র
3

ফ্লেক্সবক্স সহ একটি সমাধান (আইই ১১ এ কাজ করা): ( বা জেএসফিডেলে দেখুন )

<html>
  <style>
    html, body {
      height: 100%; /* fix for IE11, not needed for chrome/ff */
      margin: 0; /* CSS-reset for chrome */
    }
  </style>
  <body style="display: flex;">
    <div style="background-color: black; flex: 1; margin: 25px;"></div>
  </body>
</html>

( আসল সমস্যার জন্য সিএসএস-রিসেট অগত্যা গুরুত্বপূর্ণ নয়))

গুরুত্বপূর্ণ অংশটি হ'ল flex: 1( display: flexপিতামাতার সাথে সংমিশ্রণে )। মজাদারভাবে যথেষ্ট, ফ্লেক্স সম্পত্তি কীভাবে কাজ করে তার জন্য আমি জানি সবচেয়ে প্রশংসনীয় ব্যাখ্যাটি কোনও প্রতিক্রিয়া-দেশীয় ডকুমেন্টেশন থেকে আসে, সুতরাং যাইহোক আমি এটিকে উল্লেখ করি :

(...) ফ্লেক্স: 1, যা কোনও উপাদানকে সমস্ত উপলব্ধ স্থান পূরণ করতে বলে, একই প্যারেন্টের সাথে অন্য উপাদানগুলির মধ্যে সমানভাবে ভাগ করা

— পুতজী সান
সূত্র
2

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

এখানে একটি উদাহরণ যেখানে শিশু - প্রদত্ত প্যাডিং এবং একটি বর্ডার - পিতামাতাকে 100% পূরণ করার জন্য নিখুঁত অবস্থান ব্যবহার করে। স্বাভাবিক প্রবাহে থাকা অবস্থায় সন্তানের অবস্থানের জন্য কোনও রেফারেন্স পয়েন্ট দেওয়ার জন্য পিতামাতারা আপেক্ষিক অবস্থান ব্যবহার করেন - পরবর্তী উপাদান "আরও বেশি সামগ্রী" প্রভাবিত হয় না:

#box {
    position: relative;
    height: 300px;
    width: 600px;
}

#box p {
    position: absolute;
    border-style: dashed;
    padding: 1em;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
<div id="box">
  <p>100% height and width!</p>
</div>
<div id="more-content">
</div>

সিএসএস পজিশনিং শিখার জন্য একটি দরকারী লিঙ্ক

— পিটার তাসেং
সূত্র
0

পৃষ্ঠার বর্ধিত মার্জিনের পরিবর্তে বিভাজনের চারদিকে সীমানা

আরেকটি সমাধান - আমি আমার পৃষ্ঠার প্রান্তের চারপাশে একটি সাধারণ সীমানা চেয়েছিলাম এবং সামগ্রীগুলি এর চেয়ে ছোট হলে আমি 100% উচ্চতা চেয়েছিলাম।

সীমানা-বাক্স কাজ করে না, এবং এমন সাধারণ প্রয়োজনের জন্য স্থির অবস্থানটি ভুল বলে মনে হয়।

পৃষ্ঠার মূল অংশটির প্রান্তে নির্ভর করার পরিবর্তে আমি আমার ধারকটিতে একটি সীমানা যুক্ত করে শেষ করেছি - দেখে মনে হচ্ছে এটি:

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

.container {
    width: 100%;
    min-height: 100%;
    border: 8px solid #564333;
}
— ক্রিস র্যান্ডাল
সূত্র
0

display: block2020-এ আপনি যে দ্রুততম পন্থাটি এটি ঠিক করতে পারেন এটির পূর্বনির্ধারিত আচরণটি হ'ল display: 'flex'প্যারেন্ট উপাদান এবং প্যাডিং উদাহরণস্বরূপ 20px সেট করা তারপরে তার সমস্ত শিশুদের দৈর্ঘ্যের তুলনায় 100% উচ্চতা থাকবে।

— Freestyle09
সূত্র
0

ওয়েবেকিট এবং -মোজ যুক্ত করা আরও উপযুক্ত হবে

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
— user3113626
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.