html - ডিভি প্রস্থ 100% বিয়োগ নির্দিষ্ট পরিমাণ পিক্সেল




css height (7)

আপনি Flexbox বিন্যাস ব্যবহার করতে পারেন। আপনাকে flex: 1 সেট করতে হবে flex: 1 এমন উপাদানটিতে যা flex-direction: row and column জন্য গতিশীল প্রস্থ বা উচ্চতা প্রয়োজন flex-direction: row and column যথাক্রমে flex-direction: row and column

গতিশীল প্রস্থ:

এইচটিএমএল

<div class="container">
  <div class="fixed-width">
    1
  </div>
  <div class="flexible-width">
    2
  </div>
  <div class="fixed-width">
    3
  </div>
</div>

সিএসএস

.container {
  display: flex;
}
.fixed-width {
  width: 200px; /* Fixed width or flex-basis: 200px */
}
.flexible-width {
  flex: 1; /* Stretch to occupy remaining width i.e. flex-grow: 1 and flex-shrink: 1*/
}

আউটপুট:

.container {
  display: flex;
  width: 100%;
  color: #fff;
  font-family: Roboto;
}
.fixed-width {
  background: #9BCB3C;
  width: 200px; /* Fixed width */
  text-align: center;
}
.flexible-width {
  background: #88BEF5;
  flex: 1; /* Stretch to occupy remaining width */
  text-align: center;
}
<div class="container">
  <div class="fixed-width">
    1
  </div>
  <div class="flexible-width">
    2
  </div>
  <div class="fixed-width">
    3
  </div>

</div>

গতিশীল উচ্চতা:

এইচটিএমএল

<div class="container">
  <div class="fixed-height">
    1
  </div>
  <div class="flexible-height">
    2
  </div>
  <div class="fixed-height">
    3
  </div>
</div>

সিএসএস

.container {
  display: flex;
}
.fixed-height {
  height: 200px; /* Fixed height or flex-basis: 200px */
}
.flexible-height {
  flex: 1; /* Stretch to occupy remaining height i.e. flex-grow: 1 and flex-shrink: 1*/
}

আউটপুট:

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  color: #fff;
  font-family: Roboto;
}
.fixed-height {
  background: #9BCB3C;
  height: 50px; /* Fixed height or flex-basis: 100px */
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.flexible-height {
  background: #88BEF5;
  flex: 1; /* Stretch to occupy remaining width */
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
<div class="container">
  <div class="fixed-height">
    1
  </div>
  <div class="flexible-height">
    2
  </div>
  <div class="fixed-height">
    3
  </div>

</div>

কিভাবে টেবিল বা জাভাস্ক্রিপ্ট ব্যবহার না করে আমি নিম্নলিখিত কাঠামো অর্জন করতে পারি? সাদা সীমানা divs প্রান্ত প্রতিনিধিত্ব করে এবং প্রশ্ন প্রাসঙ্গিক নয়।

মধ্যবর্তী এলাকার আকার পরিবর্তিত হতে চলেছে, তবে এটিতে সঠিক পিক্সেল মান থাকবে এবং সমগ্র মানগুলি সেই মান অনুসারে স্কেল করা উচিত। এটি সহজতর করার জন্য, আমাকে "100% - n px" প্রস্থকে উপরের-মধ্যম এবং নীচের মধ্যম divs এ সেট করার একটি উপায় দরকার।

আমি একটি পরিষ্কার ক্রস ব্রাউজার সমাধান প্রশংসা করি, তবে যদি এটি সম্ভব না হয় তবে CSS হ্যাকগুলি করবে।

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


আমরা খুব সহজে flex-box ব্যবহার করে এটি অর্জন করতে পারি।

হাইডার, মিডলকন্টেইনার এবং ফুটার মতো তিনটি উপাদান থাকলে আমাদের। এবং আমরা হেডার এবং ফুটার কিছু নির্দিষ্ট উচ্চতা দিতে চাই। তাহলে আমরা এভাবে লিখতে পারি:

প্রতিক্রিয়া / RN এর জন্য (ডিফল্টগুলি 'ডিসপ্লে' হিসাবে ফ্লেক্স এবং 'ফ্লেক্সডাইরেকশন' কলাম হিসাবে), ওয়েব CSS এ আমাদের শরীরের ধারক বা কন্টেইনার ধারণকারী প্রদর্শন হিসাবে উল্লেখ করতে হবে: 'flex', flex-direction: 'কলাম' নীচের মত

    container-containing-these-elements: {
     display: flex,
     flex-direction: column
    }
    header: {
     height: 40,
    },
    middle-container: {
     flex: 1, // this will take the rest of the space available.
    },
    footer: {
     height: 100,
    }

এটি করার স্বাভাবিক উপায় গাফা, নেস্টেড উপাদানের দ্বারা বর্ণিত। এটির জন্য আপনার প্রয়োজনীয় হুকগুলি পাওয়ার জন্য অতিরিক্ত মার্কআপ যোগ করার মতো কিছুটা দু: খিত, কিন্তু কার্যক্রমে এখানে একটি মোড়ক div বা অন্য কেউ আঘাত করতে যাচ্ছে না।

যদি অতিরিক্ত উপাদান ছাড়াই এটি করতে হবে (উদাহরণস্বরূপ, যখন আপনার পৃষ্ঠা মার্কআপ নিয়ন্ত্রণ না থাকে), আপনি box-sizing ব্যবহার করতে পারেন, যা বেশ সুন্দর তবে সম্পূর্ণ বা সহজ ব্রাউজার সমর্থন নয়। যদিও স্ক্রিপ্টিং উপর নির্ভর করার চেয়ে সম্ভবত আরো মজা।


কিছু প্রসঙ্গে, আপনি কার্যকরভাবে "100% প্রস্থের বিয়োগ N পিক্সেল" উল্লেখ করতে মার্জিন সেটিংস উপভোগ করতে পারেন। এই প্রশ্নের গ্রহণযোগ্য উত্তর দেখুন।



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


আপনি টুলবারে বাম এবং ডান প্রান্ত পেতে নেস্টেড উপাদান এবং প্যাডিং ব্যবহার করতে পারেন। একটি div উপাদানটির ডিফল্ট প্রস্থটি auto , যা এটি উপলব্ধ প্রস্থ ব্যবহার করে। আপনি উপাদানটিতে প্যাডিং যোগ করতে পারেন এবং এটি এখনও উপলব্ধ প্রস্থের মধ্যে রাখে।

এখানে একটি উদাহরণ যা আপনি ছবিগুলিকে বাম এবং ডান গোলাকার কোণ হিসাবে এবং চিত্রের মাঝখানে পুনরাবৃত্তি করার জন্য ব্যবহার করতে পারেন।

এইচটিএমএল:

<div class="Header">
   <div>
      <div>This is the dynamic center area</div>
   </div>
</div>

সিএসএস:

.Header {
   background: url(left.gif) no-repeat;
   padding-left: 30px;
}
.Header div {
   background: url(right.gif) top right no-repeat;
   padding-right: 30px;
}
.Header div div {
   background: url(center.gif) repeat-x;
   padding: 0;
   height: 30px;
}




width