100vw অনুভূমিক ওভারফ্লো সৃষ্টি করে, তবে কেবল যদি একের বেশি হয়?

Question

বলুন আপনার কাছে এটি রয়েছে:

html, body {margin: 0; padding: 0}
.box {width: 100vw; height: 100vh}

<div class="box">Screen 1</div>

আপনি এমন কিছু পাবেন যা স্ক্রিনটি পূর্ণ করে, কোনও স্ক্রোলবার নেই। তবে অন্যটি যুক্ত করুন:

<div class="box">Screen 1</div>
<div class="box">Screen 2</div>

আপনি কেবল উল্লম্ব স্ক্রোলবারগুলি (প্রত্যাশিত) পাবেন না, তবে একটি সামান্য অনুভূমিক স্ক্রোল পাবেন।

আমি বুঝতে পারি আপনি প্রস্থটি বাদ দিতে পারেন, বা এটিকে প্রস্থে সেট করতে পারেন: 100%, তবে আমি কেন আগ্রহী তা কেন ঘটছে। 100 ভিডব্লির "ভিউপোর্টের প্রস্থের 100%" হওয়ার কথা না?

Comments

এইচটিএমএল এবং শরীরে লুকিয়ে থাকা ওভারফ্লো এড়িয়ে চলুন যদি আপনি এর কোনও শিশু উপাদানগুলির উপর স্টিকি স্টিটি ব্যবহার করতে চান তবে এটি কোনও ভাল সমাধান নয় ... সর্বাধিক প্রস্থটি ভাল উপায় বলে মনে হচ্ছে !!!

— নিউডিউটচে

Answer 1

Wf4 দ্বারা ইতিমধ্যে ব্যাখ্যা করা হয়েছে, উলম্ব স্ক্রোলের কারণে অনুভূমিক স্ক্রোল উপস্থিত রয়েছে। যা দিয়ে আপনি সমাধান করতে পারেন max-width: 100%।

.box {
    width: 100vw;
    height: 100vh;
    max-width:100%;  /* added */
}

ওয়ার্কিং ফিডল

Comments

ধন্যবাদ, সমস্যাটি সমাধানের জন্য এটি ভালভাবে কাজ করে, তবে আমি এখনও মনে করি এটি কিছুটা অল্পক্ষণের ডিফল্ট আচরণ।

— ফোকস

অনিচ্ছুক সম্পর্কে: ক্যানিউজ ডটকমের মতে এটি একটি ব্রাউজারব্যাগ। caniuse.com/#feat=viewport-units -> জ্ঞাত সমস্যা 8: বর্তমানে ফায়ারফক্স ছাড়া সমস্ত ব্রাউজারগুলি ভুলভাবে 100vw কে পুরো পৃষ্ঠার প্রস্থ হিসাবে উল্লম্ব স্ক্রোল বার হিসাবে বিবেচনা করে, যা ওভারফ্লো যখন একটি অনুভূমিক স্ক্রোল বার তৈরি করতে পারে: অটো সেট করা থাকে ।

— জ্যাকব ভ্যান লিনজেন

যদি max-width: 100%স্ক্রোলবারগুলি ব্যতীত ভিউপোর্টের প্রস্থ হয়, তবে আপনার 100vwপ্রথম স্থানে প্রয়োজন নেই :-) আপনি কেবল ব্যবহার করতে পারেন width: 100%কারণ উপাদানটির কোনও অবস্থান পূর্বপুরুষ নেই, সুতরাং এর উল্লেখটি দেহ।

— ক্যাপসুল

এটি কিছুই সমাধান করে না! সর্বাধিক প্রস্থ কেবলমাত্র কাজ করে কারণ উপাদানটি দেহের প্রত্যক্ষ প্রতারণামূলক! যে কোনও বাস্তব-জগতের ক্ষেত্রে যেখানে আপনি 100% এর পরিবর্তে 100vw ব্যবহার করবেন (যেমন কোনও ধারকের অভ্যন্তরের উপাদান), এটি কার্যকর হবে না।

— এলিজার বার্লিন

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

— কার্টিস

Answer 2

স্ক্রোলবারগুলি এতে অন্তর্ভুক্ত করা হবে vwযাতে উল্লম্ব স্ক্রোলের নীচে আপনাকে দেখার জন্য অনুভূমিক স্ক্রোল যুক্ত করা হবে।

আপনার যখন কেবল 1 টি বাক্স রয়েছে, এটি 100% প্রশস্ত x 100% লম্বা। একবার আপনি 2 যুক্ত করলে এর 100% প্রশস্ত x 200% লম্বা হয়, সুতরাং উল্লম্ব স্ক্রোলবারটি ট্রিগার করে। উল্লম্ব স্ক্রোলবারটি ট্রিগার হওয়ার সাথে সাথে এটি অনুভূমিক স্ক্রোলবারটি ট্রিগার করে।

আপনি যোগ overflow-x:hiddenকরতে পারেbody

html, body {margin: 0; padding: 0; overflow-x:hidden;}
.box {width: 100vw; height: 100vh; background-color:#ff0000}
.box2 {width: 100vw; height: 100vh; background-color:#ffff00}

http://jsfiddle.net/NBzVV/

Comments

এটি করার ফলে লিখিত সামগ্রীগুলি স্ক্রোলবারের নীচে প্রদর্শিত হবে। jsfiddle.net/NBzVV/1 এটি উপযুক্ত কাজের জন্য আপনাকে ডান প্যাডিং যুক্ত করতে হবে।

— জেমস ডোনেলি

হ্যাঁ, ভাল দাগযুক্ত। যোগ max-width:100%করা .boxএটি প্রতিরোধ করবে।

— wf4

"সুতরাং উল্লম্ব স্ক্রোলের নীচে আপনাকে দেখার জন্য অনুভূমিক স্ক্রোল যুক্ত করা হবে" <- এই বাক্যটি আমার মস্তিষ্ককে সত্যিকার অর্থে কী চলছে সে সম্পর্কে দৃষ্টিভঙ্গি তৈরি করতে সহায়তা করেছিল। +1

— ইভান ডার্স্ট

overflowআপনি এটিকে xকোনও কিছুতে যুক্ত করলেও কেবল একটি নোট postition: stickyকাজ করবে না।

— টি.চেমলেভস্কি

Answer 3

আমারও অনুরূপ সমস্যা হয়েছিল এবং জেএস এবং সিএসএস ভেরিয়েবলগুলি ব্যবহার করে নিম্নলিখিত সমাধানটি নিয়ে এসেছি।

জেএস:

function setVw() {
  let vw = document.documentElement.clientWidth / 100;
  document.documentElement.style.setProperty('--vw', `${vw}px`);
}

setVw();
window.addEventListener('resize', setVw);

সিএসএস:

width: calc((var(--vw, 1vw) * 100);

1vw একটি ফ্যালব্যাক মান।

Comments

এটা খুবই পছন্দ করি. বেশ মার্জিত

— andrevenancio

এটি নিখুঁত কারণ এটি তখন বিশ্বব্যাপী উপলব্ধ। ধন্যবাদ.

— fvaldez421

Answer 4

আপডেট: ক্রোম সংস্করণ 66 66 হিসাবে, আমি প্রশ্ন দ্বারা রিপোর্ট করা আচরণটি পুনরুত্পাদন করতে পারি না। কোনও কর্মক্ষেত্রের প্রয়োজন বলে মনে হচ্ছে না।

---

আসল উত্তর

এটি উত্তর এবং উপরের মন্তব্যে উল্লিখিত রিপোর্ট হিসাবে আসলে একটি বাগ ।

স্বীকৃত উত্তরে (যুক্ত করা .box {max-width: 100%;}) কাজটি সাধারণভাবে কাজ করার সময়, আমি এটি লক্ষণীয় মনে করি যে এটি বর্তমানে display:table(ক্রোমে পরীক্ষিত) জন্য কাজ করে না । সেক্ষেত্রে আমি খুঁজে পেলাম কেবলমাত্র তার width:100%পরিবর্তে ব্যবহার করা work

• বেহালার ভাঙা সঙ্গেdisplay:table
• ওয়ার্কিং বেহালার সঙ্গে display:tableএবংwidth:100%

Comments

আহ, স্বীকৃত উত্তর কি বদলে গেল? আপনি গ্রহণযোগ্য উত্তর হিসাবে একই জিনিস পরামর্শ দিচ্ছেন। এজন্য নিজেরাই উত্তরগুলি সম্পূর্ণ করা উচিত।

— কিসাকি

গৃহীত উত্তর যুক্ত করার প্রস্তাব max-width: 100%। আমি পরিবর্তন width: 100vwকরার প্রস্তাব width: 100%। আমি আমার উত্তরটি স্বয়ংসম্পূর্ণ হওয়ার জন্য আপডেট করেছি।

— কর্নফ্লেক্স

ক্রোম ছাড়াও অন্যান্য ব্রাউজার রয়েছে এবং কিছু স্ক্রোলবারকে আলাদাভাবে ডিল করে।

— লোকালপিসিগুয়ে

Answer 5

ভিডাব্লুতে অন্তর্ভুক্ত স্ক্রোলবারের প্রস্থের হাত থেকে মুক্তি পেতে আমাকে এই কাজটি করতে হয়েছিল:

html, body {
    overflow-x: hidden;
    height: 100vh;
}

Answer 6

*,
html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;/*add This*/ 
}
/*and enjoy ^_^ */

Comments

কোনও সমস্যা লুকানো এটি সমাধান করে না। আপনার পদ্ধতির প্রকৃতপক্ষে ওভারফ্লো অপসারণ করার সময়, এটি কেবল এটিকে লুকায়। বিষয়বস্তু বাইরে (যে কারণেই হোক) প্রদর্শিত হওয়া উচিত এটি সমস্যার কারণ হতে পারে

— ড্যানিয়েল স্টেইনার

আরে ইউজার 13149444! কোড-কেবলমাত্র উত্তরগুলি সমস্যার সমাধান করতে পারে তবে তারা কীভাবে এটি সমাধান করে তা ব্যাখ্যা করলে তারা আরও বেশি কার্যকর। আপনার উত্তর সম্পূর্ণরূপে বোঝার জন্য সম্প্রদায়টির তত্ত্বের পাশাপাশি কোড উভয়ই প্রয়োজন।

— আরবিটি