সিএসএস: প্রস্থ / উচ্চতা শতাংশ শতাংশ বিয়োগ পিক্সেল হিসাবে সেট করা

Question

আমি আমার সাইটে আরও ধারাবাহিকতা এবং কম বিশৃঙ্খলার জন্য কিছু পুনরায় ব্যবহারযোগ্য সিএসএস ক্লাস তৈরি করার চেষ্টা করছি এবং আমি প্রায়শই ব্যবহার করি এমন একটি জিনিসকে মানিক করার চেষ্টা করতে আটকে আছি।

আমার একটি ধারক রয়েছে <div>যার জন্য আমি উচ্চতা নির্ধারণ করতে চাই না (কারণ এটি যেখানে রয়েছে সেখানে তার উপর নির্ভর করে এটি পৃথক হবে), এবং এর ভিতরে একটি শিরোনাম <div>এবং তারপরে আইএসএসের একটি নিরক্ষিত তালিকা রয়েছে যা সমস্ত CSS এ প্রয়োগ করা হয় applied তাদের।

এটি দেখতে অনেকটা দেখতে:

আমি চাই unordered তালিকা কন্টেইনারে অবশিষ্ট ঘর নিতে <div>, বুদ্ধিমান যে হেডার <div>হয় 18pxলম্বা। আমি কেবল জানি না কীভাবে " 100%বিয়োগের ফলাফল" হিসাবে তালিকাটির উচ্চতা নির্দিষ্ট করতে হবে 18px।

আমি এই প্রশ্নটি এসও-র অন্যান্য কয়েকটি প্রসঙ্গে জিজ্ঞাসা করে দেখেছি, তবে আমি ভেবেছিলাম যে এটি আমার বিশেষ মামলার জন্য আবার জিজ্ঞাসা করা উপযুক্ত হবে। এই পরিস্থিতিতে কারও কোন পরামর্শ আছে?

Comments

একটি মার্জিন সেট? __

— কেনেটিএম

@ কেনিটিএম, আমি ধরে নিচ্ছি আপনি পরামর্শ দিচ্ছেন যে আমি আমার আনর্ডার্ড করা তালিকার উপরে একটি মার্জিন-টপ রেখেছি, বলুন, 17px। তবে এটি পুরো তালিকাটি নীচে ঠেলে দেয়; এটি পাত্রে থাকার কারণে সঙ্কুচিত হওয়ার কারণ হয় না। মূলত, এটির বর্তমান উচ্চতা বজায় রাখা হয় তবে এটি কেবল 17px দ্বারা নীচে নামানো হয়। এটি আমার সমস্যার সমাধান করে না, তবে আমি মনে করি এটি সঠিক দিকের একটি পদক্ষেপ কারণ আমি অনলাইনে অন্যান্য কৌশলগুলি দেখেছি যা এই কৌশলটি ব্যবহার করে।

— মেগা ম্যাট

আমি এখানে পোস্ট করা আমার প্রশ্নে আমি এই সমস্যাটি সমাধান করেছি। stackoverflow.com/a/10420387/340947

— স্টিভেন লু

সিএসএসের

— 200_সূচী

Answer 1

আমি বুঝতে পারি এটি একটি পুরানো পোস্ট, তবে এটি প্রস্তাবিত হয়নি বলে উল্লেখ করা উচিত যে আপনি যদি সিএসএস 3- কমপ্লায়েন্ট ব্রাউজারগুলির জন্য লিখছেন তবে আপনি এটি ব্যবহার করতে পারেন calc:

height: calc(100% - 18px);

এটি লক্ষ করার মতো যে বর্তমানে সমস্ত ব্রাউজারগুলি স্ট্যান্ডার্ড CSS3 ক্যালক () ফাংশন সমর্থন করে না, সুতরাং ফাংশনের ব্রাউজারের নির্দিষ্ট সংস্করণগুলি প্রয়োগ করার জন্য নিম্নলিখিতগুলির মতো প্রয়োজন হতে পারে:

/* Firefox */
height: -moz-calc(100% - 18px);
/* WebKit */
height: -webkit-calc(100% - 18px);
/* Opera */
height: -o-calc(100% - 18px);
/* Standard */
height: calc(100% - 18px);

Comments

হ্যাঁ আপাতত এটাই স্বাভাবিক।

— লেভি বোটেলহো

আইই 10, এবং ক্রোম 27-এ আমার জন্য কাজ করে You আপনি স্যার, আমার ফ্রিকিং নায়ক!

— BrainSlugs83

পছন্দ করুন অপারেটরের চারপাশে জায়গা ছিল না।

— ব্যবহারকারী

এছাড়াও যদি আপনি কম ব্যবহার করেন তবে এর lessc --strict-math=onভিতরে প্রকাশের মূল্যায়ন না করার জন্য আপনি একটি ফাইলের চেয়ে আরও ভাল সংকলন করতে চান calc- আমি যে সমস্যার মুখোমুখি হয়েছি এবং অনেক সময় ব্যয় করেছি (কম 2.0.0 হিসাবে)

— দিমিত্রি ওয়াজসিচোভস্কি

লক্ষ্য করুন বিয়োগ চিহ্ন প্রায় শূণ্যস্থান ঐচ্ছিক নয়: 100%-18px, 100%- 18px, এবং 100% -18pxসঙ্গে আমি কোন ব্রাউজার পরীক্ষিত মধ্যে কাজ করে নি।

— নিসেতামা

Answer 2

কিছুটা ভিন্ন পদ্ধতির জন্য আপনি তালিকায় এরকম কিছু ব্যবহার করতে পারেন:

position: absolute;
top: 18px;
bottom: 0px;
width: 100%;

প্যারেন্ট পাত্রে যতক্ষণ থাকে ততক্ষণ এটি কাজ করে position: relative;

Comments

ধন্যবাদ মানুষ. পিতামাতার position: relative;ধারকটি আমাকে ট্রিপ করছিল।

— gthmb

যারা আমার মতো ভাবতে পারেন: পজিশনটি absoluteশিশু পাত্রে থাকতে হবে, এটি হতে পারে না relative।

— গ্রেগ

অবিরত (দুঃখিত): তবে পিতামাতার কেবল পজিশনিং প্রয়োজন (এটি absoluteখুব বেশি হতে পারে), এবং এটিও 100% উচ্চতায় সেট করা দরকার।

— গ্রেগ

দুর্ভাগ্যক্রমে, এটি সাফারি আইওএস 8 এ কাজ করে না (অ্যান্ড্রয়েড 4.1 স্টক ব্রাউজার এবং মানক এফএফ 34 এ ঠিক আছে) :-(

— গ্রেগ

এটি কিছু ক্ষেত্রে কার্যকর হতে পারে তবে কিছুটা ঝামেলাও সৃষ্টি করতে পারে কারণ একেবারে অবস্থানসম্পন্ন উপাদানগুলি স্বাভাবিক প্রবাহ থেকে সরানো হয়, দেখুন স্ট্যাকওভারফ্লো . com/a/12821537/4173303 ।

— ক্রিস্টোফ ওয়েইস

Answer 3

আমি এই জন্য Jquery ব্যবহার

function setSizes() {
   var containerHeight = $("#listContainer").height();
   $("#myList").height(containerHeight - 18);
}

তারপরে আমি যখনই ব্রাউজার উইন্ডোটিকে পুনরায় আকার দেওয়া হয় (উইন্ডোর পুনরায় আকারের সাহায্যে ধারকের আকার পরিবর্তন হয়)

$(window).resize(function() { setSizes(); });

Comments

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

— মেগা ম্যাট

আপনার স্টাইলটি জাভাস্ক্রিপ্টের ভিতরে রাখবেন না।

— গ্রেগ

@ গ্রেগ, সিএসএসের আরও কিছু কার্যকর বৈশিষ্ট্য থাকলে এটি সাহায্য করবে। আপনাকে হ্যাকগুলি করতে হবে এমন কয়েকটি বিষয় হাস্যকর।

— জোনাথন

পছন্দ করুন তবে উইন্ডোতে ইভেন্টগুলি বাঁধাই আমার পক্ষে ভাল সমাধান নয়। আমার পৃষ্ঠায় যদি 3-4 বা ততোধিক উপাদান থাকে তবে আমাকে উইন্ডো রাইজ হ্যান্ডলারের প্রতিটি উপাদানের উচ্চতা এবং প্রস্থ আপডেট করতে হবে। এটি সিএসএস সমাধানের চেয়ে কিছুটা ধীর হবে।

— sachinjain024

"জাভাস্ক্রিপ্টের ভিতরে আপনার জাইজেড রাখবেন না" "ব্রাউজারের বাজারের ৮০% সমর্থন করবেন না" বলার মতো।

— বিঘোর

Answer 4

উচ্চতা শতাংশ হিসাবে সংজ্ঞায়িত করবেন না, কেবল top=0এবং এর bottom=0মতো ঠিক করুন:

#div {
   top: 0; bottom: 0;
   position: absolute;
   width: 100%;
}

Comments

আপনি ব্যাখ্যা করতে পারেন কেন এক শতাংশে উচ্চতা নির্ধারণ করা হয়নি?

— শ্রীকান্ত শরৎ

@ শ্রিকান্তশরত এটি একেবারে অবস্থানযুক্ত উপাদানগুলির জন্য ভিজ্যুয়াল ফর্ম্যাটিং অনুচ্ছেদের অংশ । এই সমাধানটি সম্ভাবনার 5 টি সুবিধা নেয়, "'উচ্চতা' 'স্বয়ং', 'শীর্ষ' এবং 'নীচে' 'স্বয়ংক্রিয়' হয় না, তারপরে 'মার্জিন-শীর্ষ' এবং 'মার্জিন-নীচে' এর জন্য 'অটো' মান সেট করা হয় থেকে 0 এবং 'উচ্চতা' "এর জন্য সমাধান করুন। ব্রাউজারটি উপাদানটির উচ্চতা গণনা করতে পারে কারণ এটি জানে যে তার পিতামাতার উপরে এবং নীচে থেকে এটি কতটা হওয়া দরকার।

— রস অ্যালেন

কমপক্ষে ফায়ারফক্সে এটি কাজ করছে বলে মনে হচ্ছে না। এমনকি সব পিতা বা মাতা উপাদান সেট সঙ্গে height:100%এবং display:block। অন্যথায় এটি খুব মার্জিত সমাধান হবে। মজার বিষয় হল, margin:autoঅনুভূমিকভাবে সূক্ষ্মভাবে কাজ করা সত্ত্বেও, একটি স্থির-প্রস্থের বস্তুটিকে উল্লম্বভাবে কেন্দ্র করতে ব্যর্থ হয়।

— বিউজর

Answer 5

17px শিরোলেখের উচ্চতা অনুমান করা হচ্ছে

সিএসএস তালিকা:

height: 100%;
padding-top: 17px;

শিরোনাম সিএসএস:

height: 17px;
float: left;
width: 100%;

Comments

হ্যাঁ, এটাই আমি পেয়ে যাচ্ছিলাম।

— dclowd9901

আমি যেমন আশা করেছিলাম তেমন কাজ করে নি। আমার শৃঙ্খলাবদ্ধ তালিকাটি সেই শিরোনাম ডিভের নীচে শুরু হচ্ছে। শিরোনাম ডিভটি ধারকটিতে জায়গা নিচ্ছে, তাই তালিকায় 17 পিক্সের প্যাডিং-টপ রাখার ফলে এটি ইতিমধ্যে 17px নামিয়ে যাচ্ছে যেখানে এটি ইতিমধ্যে উপরের ছবিতে রয়েছে, কনটেইনার ডিভের উপরের অংশ থেকে 17 পিক্স নয়। উপরের উত্তরে প্রদত্ত সিএসএসের সাথে আমি কী পাই তার একটি চিত্র এখানে দেওয়া হয়েছে: i41.tinypic.com/mcuk1x.jpg । যদিও আমি এই প্রচেষ্টাটির প্রশংসা করি এবং যদি মনে হয় যে আমি মিস করছি তবে দয়া করে আমাকে জানান। বিটিডব্লিউ, আমার ওভারফ্লো হয়েছে: অঅর্ডারার্ড তালিকায় অটোও রয়েছে।

— মেগা ম্যাট

আপনি যদি সত্যিকারের সিএসএস পোস্ট করেন তবে এটির সমস্যা সমাধানের কাজটি অনেক সহজ হবে what আর একটি জিনিস যা আপনি চেষ্টা করতে পারেন তা হ'ল আপনার উলের নেগেটিভ শীর্ষ শীর্ষস্থান margin ul { margin-top: -17px; }

— ঘোপপে

Answer 6

1. আপনি যে উপাদানটি পিক্সেল বিয়োগ করতে চান তা নেগেটিভ মার্জিনগুলি ব্যবহার করুন। (পছন্দসই উপাদান)
2. মেক overflow:hidden;সমন্বিত উপাদান করুন
3. overflow:auto;পছন্দসই উপাদানটিতে স্যুইচ করুন।

এটা আমার জন্য কাজ!

Comments

এটি আমার জন্য কবজির মতো কাজ করেছে (আমার ওভারফ্লো পরিবর্তন করার প্রয়োজনও ছিল না)। দুর্দান্ত সমাধান, আপনাকে ধন্যবাদ!

— আজ

সম্পূর্ণভাবে সন্ত্রস্ত! জনপ্রিয় "সিএসএস ক্যালক" সমাধান সম্পর্কে শিখতে উপভোগ করেছেন তবে এটি অনেক সহজ এবং এতে ব্রাউজারের ব্যাপক সমর্থন রয়েছে। নেতিবাচক মার্জিন নিখুঁত!

— সাইমন স্টেইনবার্গার

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

— বিওজর

Answer 7

বক্স-আকার দেওয়ার চেষ্টা করুন। তালিকার জন্য:

height: 100%;
/* Presuming 10px header height */
padding-top: 10px;
/* Firefox */
-moz-box-sizing: border-box;
/* WebKit */
-webkit-box-sizing: border-box;
/* Standard */
box-sizing: border-box;

শিরোনামের জন্য:

position: absolute;
left: 0;
top: 0;
height: 10px;

অবশ্যই পিতামাতার ধারকটির এমন কিছু হওয়া উচিত:

position: relative;

Answer 8

একই লক্ষ্য অর্জনের আর একটি উপায়: ফ্লেক্স বাক্স । ধারকটিকে একটি কলাম ফ্লেক্স বাক্স করুন এবং তারপরে আপনার কিছু উপাদানকে স্থির আকারের (ডিফল্ট আচরণ) বা কনটেইনার স্পেসে পূরণ / সঙ্কুচিত করার অনুমতি দেওয়ার স্বাধীনতা রয়েছে (ফ্লেক্স-গ্রোথ সহ: 1 এবং ফ্লেক্স- সঙ্কুচিত: 1)।

#wrap {        
  display:flex;
  flex-direction:column;
}
.extendOrShrink {
  flex-shrink:1;
  flex-grow:1;
  overflow:auto;
}

Https://jsfiddle.net/2Lmodwxk/ দেখুন (প্রভাবটি লক্ষ্য করার জন্য উইন্ডোটি প্রসারিত বা হ্রাস করার চেষ্টা করুন)

দ্রষ্টব্য: আপনি শর্টহ্যান্ড সম্পত্তি ব্যবহার করতে পারেন:

   flex:1 1 auto;

Comments

আমি বিশ্বাস করি এটি আজকের সেরা উত্তর হতে পারে কারণ এর অর্থ হ্যাডার ডিভের জন্য একটি নির্দিষ্ট উচ্চতা (আমার মূল প্রশ্নে 18px) নির্দিষ্ট না করা এবং এর অর্থ প্যাডিং এবং মার্জিনের মতো জিনিসগুলি বিয়োগ না করা। কোনও সেট পিক্সেল নেই এবং সবকিছুই নিজের যত্ন নেয়।

— মেগা ম্যাট

Answer 9

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

নীচে আমি একটি খুব সাধারণ স্নিপেট তৈরি করেছি যা দেখায় যে আমরা কী করে শেষ করেছি যা আমাদের পরিস্থিতির জন্য ভালভাবে কাজ করছে বলে মনে হচ্ছে এবং বেশিরভাগ ব্রাউজারের সাথে সামঞ্জস্যপূর্ণ হওয়া উচিত।

আমাদের উইন্ডো উপাদানটিতে আমরা একটি 20px মার্জিন যুক্ত করেছি যা স্ক্রিনের অন্যান্য উপাদানের তুলনায় অবস্থান নির্ধারণে অবদান রাখে, তবে উইন্ডোর "আকার" এ অবদান রাখে না। উইন্ডো-শিরোনামটি একেবারে অবস্থিত (যা এটি অন্যান্য উপাদানগুলির প্রবাহ থেকে সরিয়ে দেয়, তাই এটি আনর্ডারড তালিকার মতো অন্যান্য উপাদানগুলিকে স্থানান্তরিত করে না) এবং এর শীর্ষে অবস্থিত -20px অবস্থিত যা শিরোনামের অভ্যন্তরে শিরোলেখ স্থাপন করে উইন্ডো। অবশেষে আমাদের উল উপাদানটি উইন্ডোতে যুক্ত করা হয়েছে, এবং উচ্চতাটি 100% এ সেট করা যেতে পারে যা এটি উইন্ডোটির দেহটি পূরণ করবে (মার্জিন বাদে)।

*,*:before,*:after
{
  box-sizing: border-box;
}

.window
{
  position: relative;
  top: 20px;
  left: 50px;
  margin-top: 20px;
  width: 150px;
  height: 150px;
}

.window-header
{
  position: absolute;
  top: -20px;
  height: 20px;
  border: 2px solid black;
  width: 100%;
}

ul
{
  border: 5px dashed gray;
  height: 100%;
}

<div class="window">
  <div class="window-header">Hey this is a header</div>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>
</div>

Answer 10

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

সিএসএসের জন্য:

 html{
  width:100%;height:100%;margin:0px;border:0px;padding:0px;
 }
 body{
  position:relative;width:100%;height:100%;margin:0px;border:0px;padding:0px;
 }
 div.adjusted{
  position:absolute;width:auto;height:auto;left:0px;right:0px;top:0px;bottom:36px;margin:0px;border:0px;padding:0px;
 }
 div.the_bottom_bar{
  width:100%;height:31px;margin:0px;border:0px;padding:0px;
}

এইচটিএমএলের জন্য:

<body>
<div class="adjusted">
 // My elements that go on dynamic size area
 <div class="the_bottom_bar">
  // My elements that goes on bottom bar (fixed heigh of 31 pixels)
 </div>  
</div>  

এটি কৌতুকটি করেছে, ওহ হ্যাঁ আমি নীচের বারের উচ্চতার চেয়ে নীচের দিকে ডিভ অ্যাডজাস্টেড একটি মান রেখেছি great অন্যথায় উল্লম্ব স্ক্রোলবারটি উপস্থিত হয়, আমি নিকটতম মান হিসাবে সামঞ্জস্য করেছি।

পার্থক্যটি হ'ল গতিশীল অঞ্চলের উপাদানগুলির মধ্যে একটি অতিরিক্ত তল ছিদ্র যুক্ত করছে যা আমি কীভাবে মুক্তি পেতে জানি না ... এটি একটি ভিডিও ট্যাগ (এইচটিএমএল 5), দয়া করে নোট করুন যে আমি এই ভিডিওটি এই সিএসএস দিয়ে রেখেছি ( সুতরাং এটি নীচের অংশে গর্ত করার কোনও কারণ নেই, তবে তা করে):

 video{
  width:100%;height:100%;margin:0px;border:0px;padding:0px;
 }

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

সম্পাদনা: আমি কারণটি পেয়েছি, ভিডিও ট্যাগটি পাঠ্যের মতো, কোনও ব্লক উপাদান নয়, তাই আমি এই সিএসএস দিয়ে এটিকে ঠিক করেছি:

 video{
  display:block;width:100%;height:100%;margin:0px;border:0px;padding:0px;
 }

display:block;ভিডিও ট্যাগটি নোট করুন ।

Answer 11

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