সিএসএস ব্যবহার করে পিতামাতার ডিআইভির চেয়ে কোনও শিশু ডিআইভির প্রস্থকে আরও প্রশস্ত করার উপায় আছে কি?

Question

পিতামাতার কনটেইনার ডিআইভিতে একটি শিশু ডিআইভি রাখার কোনও উপায় রয়েছে যা তার পিতামাতার চেয়ে আরও প্রশস্ত। শিশু ডিআইভির ব্রাউজার ভিউপোর্টের একই প্রস্থ হওয়া দরকার।

নীচে উদাহরণ দেখুন:

শিশু ডিআইভি অবশ্যই পিতামাতার ডিভের সন্তানের হিসাবে থাকতে পারে। আমি জানি যে আমি শিশু ডিভকে আরও বিস্তৃত করার জন্য নির্বিচারে নেতিবাচক মার্জিন সেট করতে পারি তবে এটি কীভাবে ব্রাউজারের 100% প্রস্থে তৈরি করা যায় তা আমি কার্যকর করতে পারি না।

আমি জানি আমি এটি করতে পারি:

.child-div{
    margin-left: -100px;
    margin-right: -100px;
}

তবে আমার দরকার ব্রাউজারের মতো প্রস্থ যা গতিশীল।

হালনাগাদ

আপনার উত্তরের জন্য ধন্যবাদ, এটি এখনও পর্যন্ত নিকটতম উত্তরটি হ'ল সন্তানের ডিআইভি অবস্থান তৈরি করা: নিরঙ্কুশ, এবং বাম এবং ডান বৈশিষ্ট্যগুলি 0 এ সেট করুন।

আমার পরবর্তী সমস্যাটি হ'ল পিতামাতার অবস্থান: আপেক্ষিক, যার অর্থ বাম এবং ডান বৈশিষ্ট্যগুলি এখনও প্যারেন্ট ডিভের সাথে সম্পর্কিত এবং ব্রাউজার নয়, এখানে উদাহরণ দেখুন: jsfiddle.net/v2Tja/2

আমি সমস্ত কিছু স্ক্রু না করে পিতামাতার কাছ থেকে অবস্থানের আপেক্ষিকতা সরাতে পারি না।

Comments

আপনার প্রয়োজনীয়তা সত্যিকার অর্থে বোঝায় না। "চাইল্ড ডিভ" অবশ্যই পিতামাতার ডিভের সন্তানের মতোই থাকতে হবে, এবং তবুও পিতামাতার দ্বি position: relative? আপনার কী দরকার position: relative? আমি অনুমান করি আমি যা জিজ্ঞাসা করছি তা হচ্ছে: আপনি কী করার চেষ্টা করছেন?

— ত্রিশডট

@ ক্যামসফট আপনি আমার উত্তর সম্পর্কে আমার মন্তব্য দেখেছেন? এটি আমার পক্ষে কাজ করে, এছাড়াও আমার ওয়েবসাইট edocuments.co.uk দেখুন যা আপনি অন্যভাবে যা করার চেষ্টা করছেন তা করে

— ব্লোজি

@ ক্যামসফট ছাড়াও, আপনার সমাধানে সত্যিই কোনও

— জেকোয়ারি

Answer 1

পরম অবস্থান ব্যবহার করুন

.child-div {
    position:absolute;
    left:0;
    right:0;
}

Comments

ঠিক আছে, পরবর্তী প্রশ্ন, যদি পিতা বা অন্য কোনও পূর্বপুরুষের লেআউট থাকে তবে অবস্থান: আপেক্ষিক, দেখুন: jsfiddle.net/v2Tja/2

— ক্যামসফট

অন্য পিতামাতার ডিভ থাকার অবস্থান সম্পর্কে কীভাবে: স্থিতিশীল, এবং আরও একটি ডিভ ভিতরে অবস্থান সহ: আপেক্ষিক? jsfiddle.net/boosie/v2Tja/3

— ব্লুসী

.child-div এর উচ্চতা অটো সহ এমন কি করার কোনও উপায় আছে এবং এখনও নীচে সঠিক স্থাননির্ধারণ আছে?

— ফিলিপ গিলবার্ট

এবং অভিভাবক ডিভটিকে "ওভারফ্লো: লুকানো"

— ক্রিস

কিভাবে ব্লাউজি position:fixed ! কেন এটি সঠিকভাবে কাজ করে না?

— মোস্তফা গাদিমি

Answer 2

এখানে একটি জেনেরিক সমাধান রয়েছে যা শিশু উপাদানটিকে দস্তাবেজের প্রবাহে রাখে:

.child {
  width: 100vw;
  position: relative;
  left: calc(-50vw + 50%);
}

আমরা widthপুরো ভিউপোর্টের প্রস্থটি পূরণের জন্য শিশু উপাদানটির মূল সেট করে রেখেছি , তারপরে leftপিতা-মাতার উপাদানটির প্রস্থের 50% বিয়োগফলের অর্ধেক দূরত্বে এটিকে স্ক্রিনের প্রান্তটি সরিয়ে এটিকে তৈরি করি ।

ডেমো:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  overflow-x: hidden;
}

.parent {
  max-width: 400px;
  margin: 0 auto;
  padding: 1rem;
  position: relative;
  background-color: darkgrey;
}

.child {
  width: 100vw;
  position: relative;
  left: calc(-50vw + 50%);

  height: 100px;
  border: 3px solid red;
  background-color: lightgrey;
}

<div class="parent">
  Pre
  <div class="child">Child</div>
  Post
</div>

ভিডাব্লু এবং ক্যালকের জন্য ব্রাউজার সমর্থন () সাধারণত আই 9 এবং নতুন হিসাবে দেখা যেতে পারে।

দ্রষ্টব্য: এটি ধরে নিয়েছে যে বক্স মডেলটি সেট করা আছে border-box। ছাড়া border-box, আপনাকে প্যাডিংস এবং বর্ডারগুলিও বিয়োগ করতে হবে, এই সমাধানটিকে বিঘ্নিত করতে হবে।

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

Comments

আপনি কি জানেন, এটি আসলে আই 9 তে কাজ করে। +1 নিস

— ক্যাটশোস 18

আমি ঠিক আপনাকে ধন্যবাদ জানছিলাম খুব মাচ। আইএমও এই গৃহীত এক যেহেতু এই এক নথিতে প্রবাহ ভাঙে না চেয়ে ভাল উত্তর

— Rémi

vw ভাল হয় না। আপনার যদি উল্লম্ব স্ক্রোলবার থাকে তবে 100vw আপনাকে একটি অনুভূমিক স্ক্রোলবার দেবে।

— সানি

দেখে মনে হচ্ছে এটি কেবল এক স্তর নীচে কাজ করে। কোনও সন্তানের মৌলিক উপাদানগুলির কতটুকু নির্বিশেষে এটির কাজ করার কোনও উপায় আছে?

— মিথ্যোফেলন

এটি একটি position: relativeপিতামাতার মধ্যে বৃহত্তর শিশু উপাদান মোড়ানো সঠিক উত্তর !

— হানফেই সান

Answer 3

আমি দীর্ঘদিন ধরে এই সমস্যার সমাধানের জন্য বহুদূর অনুসন্ধান করেছি। আদর্শভাবে আমরা সন্তানের পিতামাতার চেয়ে বড় হতে চাই, তবে পিতামাতার সীমাবদ্ধতাগুলি আগে থেকেই জেনে না।

এবং অবশেষে আমি এখানে একটি উজ্জ্বল জেনেরিক উত্তর পেয়েছি । শব্দটি কপি করা:

এখানে ধারণাটি হ'ল: বাম দিয়ে ব্রাউজার উইন্ডোটির ঠিক মাঝখানে ধারকটি চাপুন: 50% ;, তারপরে এটিকে নেতিবাচক -50vw মার্জিনের সাথে বাম প্রান্তে আবার টানুন।

.child-div {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

Comments

আমি দেখতে পেয়েছি যে আমি এটি দেখতে চাই, বলুন, ভিউপোর্টের প্রস্থের 90%, আমি উপরেরটি ব্যবহার করতে পারি তবে প্রস্থটি সেট করতে চাই 90vw। এছাড়াও, এটি প্রদর্শিত হয় যে margin-rightকোনও ক্ষেত্রেই এর কোনও প্রভাব নেই।

— জেসন ডুফায়ার

মার্জিন-বাম এবং ডান মানগুলি পরিবর্তন করতে হয়েছিল কারণ আমার মোড়ক ভিউপোর্টের প্রস্থের 80%। সুতরাং আমার ক্ষেত্রে এটি মার্জিন-বামে থাকতে হয়েছিল: -10vw এবং মার্জিন-ডান: -10vw এবং তারপরে এটি পুরোপুরি কার্যকর হয়েছিল! ধন্যবাদ!

— টিমোথিয়াস ট্রিবিল

এটি ছিল একটি উজ্জ্বল উত্তর! ধন্যবাদ।

— অপরাহ্নে ক্লানর্রোকস

Answer 4

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

এইচটিএমএল

<div class="grandparent">
    <div class="parent">
        <div class="child">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore neque repellat ipsum natus magni soluta explicabo architecto, molestias laboriosam rerum. Tempore eos labore temporibus alias necessitatibus illum enim, est harum perspiciatis, sit, totam earum corrupti placeat architecto aut minus dignissimos mollitia asperiores sint ea. Libero hic laudantium, ipsam nostrum earum distinctio. Cum expedita, ratione, accusamus dicta similique distinctio est dolore assumenda soluta dolorem quisquam ex possimus aliquid provident quo? Enim tempora quo cupiditate eveniet aperiam.</p>
        </div>
    </div>
</div>

সিএসএস:

.child-div{
   margin: 0 -100%;
   padding: 0 -100%;
}

.parent {
    width: 60%;
    background-color: red;
    margin: 0 auto;
    padding: 50px;
    position:relative;
}

.grandparent {
        overflow-x:hidden;
        background-color: blue;
        width: 100%;
        position:relative;
    }

নেতিবাচক মার্জিনগুলি বিষয়বস্তুকে পিতামাতার ডিআইভির বাইরে যেতে দেয়। সুতরাং আমি padding: 0 100%;লিখিত সামগ্রীটি ক্লিড ডিআইভির মূল সীমানায় ফিরিয়ে আনতে সেট করেছি ।

নেতিবাচক মার্জিনগুলি .छাড-ডিভের মোট প্রস্থটি ব্রাউজারের ভিউপোর্টের বাইরে প্রসারিত করবে, যার ফলে একটি অনুভূমিক স্ক্রোল হবে। সুতরাং আমাদের overflow-x: hiddenগ্র্যান্ডপ্যারেন্ট ডিআইভিতে (যা পিতামাতার দ্বীনের পিতামাতা) প্রয়োগ করে আমাদের এক্সট্রুডিং প্রস্থকে ক্লিপ করতে হবে :

এখানে জেএসফিডাল

আমি নীল ক্যাসপারসনের চেষ্টা করেছি left: calc(-50vw + 50%); এটি Chrome এবং FF- এ পুরোপুরি সূক্ষ্মভাবে কাজ করেছে (আইই সম্পর্কে এখনও নিশ্চিত নয়) যতক্ষণ না আমি সাফারি ব্রাউজারগুলি এটি সঠিকভাবে না করে। আশা করি তারা খুব শীঘ্রই এটিকে ঠিক করেছেন আমি আসলে এই সাধারণ পদ্ধতিটি পছন্দ করি।

প্যারেন্ট ডিআইভি উপাদান থাকতে হবে এটি এটি আপনার সমস্যারও সমাধান করতে পারে position:relative

এই কাজের পদ্ধতির 2 টি ত্রুটিগুলি হ'ল:

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

এই পদ্ধতিতে আপনি যদি কোনও সমস্যা পান তবে দয়া করে আমাকে জানান let আশা করি এটা সাহায্য করবে.

Answer 5

তিনটি লাইন সিএসএসের সাহায্যে শিশুকে তার পিতামাতার চেয়ে আরও প্রশস্ত করতে ফ্লেক্সবক্স ব্যবহার করা যেতে পারে।

শুধুমাত্র সন্তানের display, margin-leftএবং widthসেট করা প্রয়োজন। margin-leftশিশুর উপর নির্ভর করে width। সূত্রটি হ'ল:

margin-left: calc(-.5 * var(--child-width) + 50%);

বাম মার্জিনটি ম্যানুয়ালি গণনা এড়ানোর জন্য সিএসএস ভেরিয়েবলগুলি ব্যবহার করা যেতে পারে।

ডেমো # 1: ম্যানুয়াল গণনা

.parent {
  background-color: aqua;
  height: 50vh;
  margin-left: auto;
  margin-right: auto;
  width: 50vw;
}

.child {
  background-color: pink;
  display: flex;
}

.wide {
  margin-left: calc(-37.5vw + 50%);
  width: 75vw;
}

.full {
  margin-left: calc(-50vw + 50%);
  width: 100vw;
}

<div class="parent">
  <div>
    parent
  </div>
  <div class="child wide">
    75vw
  </div>
  <div class="child full">
    100vw
  </div>
</div>

ডেমো # 2: সিএসএস ভেরিয়েবল ব্যবহার করে

.parent {
  background-color: aqua;
  height: 50vh;
  margin-left: auto;
  margin-right: auto;
  width: 50vw;
}

.child {
  background-color: pink;
  display: flex;
  margin-left: calc(-.5 * var(--child-width) + 50%);
  width: var(--child-width);
}

.wide {
  --child-width: 75vw;
}

.full {
  --child-width: 100vw;
}

<div class="parent">
  <div>
    parent
  </div>
  <div class="child wide">
    75vw
  </div>
  <div class="child full">
    100vw
  </div>
</div>

Answer 6

আমি এটি ব্যবহার করেছি:

এইচটিএমএল

<div class="container">
 <div class="parent">
  <div class="child">
   <div class="inner-container"></div>
  </div>
 </div>
</div>

সিএসএস

.container {
  overflow-x: hidden;
}

.child {
  position: relative;
  width: 200%;
  left: -50%;
}

.inner-container{
  max-width: 1179px;
  margin:0 auto;
}

Answer 7

আপনি অবস্থান চেষ্টা করতে পারেন: পরম। এবং প্রস্থ এবং উচ্চতা দিন, শীর্ষ: 'উপরে থেকে y অক্ষ' এবং বাম: 'এক্স-অক্ষ'

Answer 8

আমারও একি দশা. সন্তানের উপাদানটির বিষয়বস্তুটি পিতামাতার উপাদানটিতে থাকার কথা ছিল, যখন পটভূমিতে পুরো ভিউপোর্টের প্রস্থকে প্রসারিত করতে হয়।

আমি এই সমস্যাটিকে শিশু উপাদান তৈরি করে position: relativeএবং এর সাথে একটি সিডো উপাদান ( :before) যুক্ত করে সমাধান করেছি position: absolute; top: 0; bottom: 0; width: 4000px; left: -1000px;। ছদ্ম উপাদানটি সিউডো ব্যাকগ্রাউন্ড উপাদান হিসাবে প্রকৃত সন্তানের পিছনে থাকে। এটি সমস্ত ব্রাউজারগুলিতে কাজ করে (এমনকি আই 8 + এবং সাফারি 6+ - পুরানো সংস্করণগুলি পরীক্ষা করার সম্ভাবনা নেই)।

ছোট্ট উদাহরণ ফিডল: http://jsfiddle.net/vccv39j9/

Comments

এটি কাজ করছে বলে মনে হচ্ছে তবে প্রস্থ 4000px হওয়ায় এটি ব্রাউজারের অনুভূমিক স্ক্রোলবারটি দেখায়। ভিউপোর্টের প্রস্থের মধ্যে সিউডো উপাদানটি রাখার জন্য কাজটি কী?

— হারুন হডন

অবশ্যই আপনাকে বডি বা পৃষ্ঠা মোড়ক ডিভিতে সেট করতে হবে overflow-x: hidden।

— Seika85

Answer 9

নীল ক্যাসপারসনের সমাধানে যোগ করে আমি উল্লম্ব স্ক্রোলবারের প্রস্থের জন্যও সমাধান করছি ol আমি 16pxউদাহরণ হিসাবে ব্যবহার করছি , যা ভিউ-পোর্ট প্রস্থ থেকে বিয়োগ করা হয়। এটি অনুভূমিক স্ক্রোলবার প্রদর্শিত হতে এড়াবে।

width: calc(100vw - 16px);
left: calc(-1 * (((100vw - 16px) - 100%) / 2));

Comments

আমি বিশ্বাস করি 16pxযে আপনাকে বিয়োগ করতে হবে কারণ এটি অনুভূমিক স্ক্রোলবার হ'ল ব্রাউজারের ডিফল্ট মার্জিন / প্যাডিং html, body{ margin:0; padding:0 }হ'ল এটি কেবল বিয়োগ করার পরিবর্তে এটি ব্যবহার করুন16px

— মি-ক্রিয়েটিভিটি

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

— এ-জোন

আমি মনে করি এটি মোবাইলে কাজ করবে না। মোবাইলের কোনও স্ক্রোলবার নেই।

— hjchin

Answer 10

ধরে নেওয়া পিতামাতার একটি নির্দিষ্ট প্রস্থ রয়েছে, উদাহরণস্বরূপ #page { width: 1000px; }এবং কেন্দ্রিক #page { margin: auto; }, আপনি চান যে শিশুটি ব্রাউজারের ভিউপোর্টের প্রস্থের সাথে খাপ খাইয়ে দিতে পারে যা আপনি কেবল করতে পারেন:

#page {
    margin: auto;
    width: 1000px;
}

.fullwidth {
    margin-left: calc(500px - 50vw); /* 500px is half of the parent's 1000px */
    width: 100vw;
}

Answer 11

কন্টেন্টের মতো শিশুকে বিস্তৃত করার জন্য এটি ব্যবহার করে দেখুন:

.child{
    position:absolute;
    left:0;
    overflow:visible;
    white-space:nowrap;
}

Answer 12

.parent {
    margin:0 auto;
    width:700px;
    border:2px solid red;
}
.child {
    position:absolute;
    width:100%;
    border:2px solid blue;
    left:0;
    top:200px;
}

Comments

চালাক, তবে কাজ করছে বলে মনে হচ্ছে না (কমপক্ষে লি এর মধ্যে থাকা স্প্যানগুলির সাথে)।

— ruffin

Answer 13

আমি জানি এটি পুরানো তবে যার উত্তরের জন্য যে কেউ এই বিষয়ে আসবে আপনি তার মতো করে এটি করতে পারেন:

অভিভাবক উপাদান যেমন কোনও শরীরের উপরে লুকানো ওভারফ্লো।

আপনার পৃষ্ঠার চেয়ে আপনার সন্তানের উপাদানটিকে আরও প্রশস্ত করুন এবং এটি -100% দ্বারা নিখুঁত বামে রাখুন।

এখানে একটি উদাহরণ:

body {
  overflow:hidden;
}

.parent{
  width: 960px;
  background-color: red;
  margin: 0 auto;
  position: relative;    
}

.child {
  height: 200px;
  position: absolute;
  left: -100%;
  width:9999999px;
}

এছাড়াও একটি জেএস ফিডল: http://jsfiddle.net/v2Tja/288/

Answer 14

তারপরে সমাধানটি নিম্নলিখিত হবে।

এইচটিএমএল

<div class="parent">
    <div class="child"></div>
</div>

সিএসএস

.parent{
        width: 960px;
        margin: auto;
        height: 100vh
    }
    .child{
        position: absolute;
        width: 100vw
    }

Comments

যদিও এই কোডটি প্রশ্নের উত্তর দিতে পারে, কীভাবে এবং / বা কেন এটি সমস্যার সমাধান করে তা সম্পর্কিত অতিরিক্ত প্রসঙ্গ সরবরাহ করলে উত্তরের দীর্ঘমেয়াদী মান উন্নত হবে।

— আর বালাসুব্রাহ্মণ্যম

Answer 15

আমি আপনার কয়েকটি সমাধান চেষ্টা করেছি। এইটা :

margin: 0px -100%;
padding: 0 100%;

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

https://codepen.io/yuyazz/pen/BaoqBBq