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

Question

আমি কীভাবে সারণী বা জাভাস্ক্রিপ্ট ব্যবহার না করে নীচের কাঠামোটি অর্জন করতে পারি? সাদা সীমানা ডিভগুলির প্রান্তগুলি উপস্থাপন করে এবং প্রশ্নের সাথে প্রাসঙ্গিক নয়।

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

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

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

Comments

দ্বিতীয় উপাদানটির জন্য, আপনি বলছেন যে আপনি খুব মাঝারি উপাদানের উচ্চতা স্থির করতে চান, তবে নিকটবর্তী অন্যান্য উপাদানগুলি গতিশীল হতে পারে

— কেসব্যাশ

Answer 1

আপনি সরঞ্জামদণ্ডে বাম এবং ডান প্রান্ত পেতে নেস্টেড উপাদান এবং প্যাডিং ব্যবহার করতে পারেন। কোনও 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;
}

Comments

তার জন্য ধন্যবাদ. আমার পরিস্থিতির জন্য আমাকে এটি কিছুটা টুইট করতে হয়েছিল। প্রথম নেস্টেড ডিভের প্যাডিংয়ের পরিবর্তে মার্জিন-ডান প্রয়োজন, এবং কেন্দ্র ডিভেরও একই ডান মার্জিনের প্রয়োজন ছিল।

— সর্বাধিক

দুর্দান্ত সমাধান। কেবলমাত্র একটি সামান্য জিনিস -> এটি কাজ করে কারণ "। হেডার ডিভিড ডিভ" ওভাররাইডস "। হেডার ডিভ " । এটি এর পরিবর্তে ".হাইডার> ডিভ " এবং ".ইডার> ডিভ> ডিভ " হওয়া উচিত । প্রকৃতপক্ষে, ".হেডার ডিভ" অর্থ কোনও ডিভ শিশু বা সাব ডিভ শিশু যেখানে ""। হেডার> ডিভ "এর অর্থ কেবল প্রত্যক্ষ শিশু।। হেডার

— চার্লস এইচটিইআর

@ চারেলসেইটিয়ার: হ্যাঁ, এটিও কার্যকর এবং এটি ব্যবহার করা আরও সহজ কারণ আপনাকে কম নির্দিষ্ট নিয়মের সমস্ত সেটিংস অতিক্রম করতে হবে না। উত্তরটি তখনই লেখা হয়েছিল যখন >অপারেটরের জন্য সমর্থনটি এখনও নির্ভরযোগ্য হওয়ার পক্ষে ভাল ছিল না।

— গুফা

এটি পুরানো, CSS এর ক্যালক ফাংশন সম্পর্কে নীচের উত্তরটি দেখুন।

— মারিয়া আরিয়াস ডি রেইনা ডোমঙ্গুয়েজ

@ ডেলাওয়েন: পুরানো হওয়ার আগে আপনাকে কিছুক্ষণ অপেক্ষা করতে হবে। calcআইই 8, বা অ্যানড্রয়েড ব্রাউজার বা অপেরার বর্তমান সংস্করণগুলির জন্য কোনও সমর্থন নেই । caniuse.com/#search=calc

— গুফা

Answer 2

নতুনভাবেcalc() আমি কেবল হোঁচট খেয়েছি : সিএসএস :

.calculated-width {
    width: -webkit-calc(100% - 100px);
    width:    -moz-calc(100% - 100px);
    width:         calc(100% - 100px);
}​

উত্স: সিএসএস প্রস্থ 100% বিয়োগ 100px

Comments

২০১৩ আইএমএইচওর সেরা উত্তর। গৃহীত উত্তরটি পুরানো।

— ডানুবিয়ান নাবিক

প্রায় কেউ কেউ এ নিয়ে হোঁচট খেয়েছে It's আমি এখন হ্যাকগুলির সাথে সম্পন্ন করেছি যে আমি এটি জানি। +1 @ লেচ্ছলুকাস্জ

— প্রিহাকম্পিই

সিএসএসের 10 বছর লড়াই করার পরে এই উত্তরটি +20000 এর দাবিদার! এখনও আমার চোখকে বিশ্বাস করতে পারছি না ...

— স্কোবাজিক

আমি কেবল এটিই বলতে পারি ... youtube.com/…

— জাজ

আরও সামঞ্জস্যপূর্ণ? -> $ ('# আপনার ইল')। সিএসএস ('প্রস্থ', '100%')। সিএসএস ('প্রস্থ', '- = 100px'); (jQuery)

— sboy031

Answer 3

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

এইচটিএমএল:

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
</div>

সিএসএস:

.container {
    width: 100px;
    height: 20px;
}

.left, .right {
    width: 20px;
    height: 100%;
    float: left;
    background: black;   
}

.right {
    float: right;
}

.center {
    overflow: auto;
    height: 100%;
    background: blue;
}

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

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

jsfiddle এখানে: jsfiddle.net/RgdeQ

উপভোগ করুন!

Answer 4

আপনি ফ্লেক্সবক্স লেআউটটি ব্যবহার করতে পারেন । আপনার যথাক্রমে flex: 1গতিশীল প্রস্থ বা উচ্চতা থাকা প্রয়োজন এমন উপাদানগুলিকে সেট করতে হবে 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>

Answer 5

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

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

Answer 6

হয়তো আমি বোবা হয়ে যাচ্ছি, কিন্তু এখানে সুস্পষ্ট সমাধানের টেবিলে রাখছি না?

<div class="parent">
    <div class="fixed">
    <div class="stretchToFit">
</div>

.parent{ display: table; width 100%; }
.fixed { display: table-cell; width: 150px; }
.stretchToFit{ display: table-cell; vertical-align: top}

আমি ক্রোমে আরও একটি উপায় বের করেছি যে এটি আরও সহজ, তবে মানুষ এটি হ্যাক!

.fixed{ 
   float: left
}
.stretchToFit{
   display: table-cell;
   width: 1%;
}

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

Answer 7

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

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

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

    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,
    }

Answer 8

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

Answer 9

আমার অনুরূপ সমস্যা ছিল যেখানে আমি পর্দার শীর্ষে একটি ব্যানার চেয়েছিলাম যার বামদিকে একটি চিত্র ছিল এবং পর্দার ডানদিকে ডানদিকে পুনরাবৃত্তি চিত্র ছিল। আমি এর মতো সমাধান করে শেষ করেছি:

সিএসএস:

.banner_left {
position: absolute;
top: 0px;
left: 0px;
width: 131px;
height: 150px;
background-image: url("left_image.jpg");
background-repeat: no-repeat;
}

.banner_right {
position: absolute;
top: 0px;
left: 131px;
right: 0px;
height: 150px;
background-image: url("right_repeating_image.jpg");
background-repeat: repeat-x;
background-position: top left;
}

কীটি ছিল সঠিক ট্যাগ। আমি মূলত উল্লেখ করছি যে আমি এটি বাম থেকে 131px থেকে ডান থেকে 0 পিক্সে পুনরাবৃত্তি করতে চাই।

Answer 10

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