ওভারফ্লো স্ক্রোল সিএসএস ডিভিতে কাজ করছে না

Question

আমি আমার এইচটিএমএল পৃষ্ঠা স্ক্রোলিং ইস্যু জন্য সিএসএস / জাভাস্ক্রিপ্ট সমাধান খুঁজছি।

আমার তিনটি ডিভ রয়েছে যা একটি ডিভ, একটি শিরোনাম এবং একটি মোড়ক ডিভ,

আমার মোড়ক ডিভিউতে একটি উল্লম্ব স্ক্রোলবার দরকার, সামগ্রীর উপর ভিত্তি করে উচ্চতা অটো বা 100% হওয়া উচিত।

শিরোনামটি ঠিক করা উচিত এবং আমি সামগ্রিক স্ক্রোলবারটি চাই না তাই আমি overflow:hiddenবডি ট্যাগ দিয়েছি ,

আমার র‍্যাপার ডিভিতে আমার উল্লম্ব স্ক্রোলবার দরকার। আমি এটা কিভাবে ঠিক করবো?

এইচটিএমএল

<div id="container">

    <div class="header"></div>

    <div class="wrapper">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus porta tortor sed metus. Nam pretium. Sed tempor. Integer ullamcorper, odio quis porttitor sagittis, nisl erat tincidunt massa, eu eleifend eros nibh sollicitudin est. Nulla dignissim. Mauris sollicitudin, arcu id sagittis placerat, tellus mauris egestas felis, eget interdum mi nibh vel lorem. Aliquam egestas hendrerit massa. Suspendisse sed nunc et lacus feugiat hendrerit. Nam cursus euismod augue. Aenean vehicula nisl eu quam luctus adipiscing. Nunc consequat justo pretium orci. Mauris hendrerit fermentum massa. Aenean consectetuer est ut arcu. Aliquam nisl massa, blandit at, accumsan sed, porta vel, metus. Duis fringilla quam ut eros.</p>
        <!-- Lots more paragraphs-->
    </div>

</div>

সিএসএস

body{ margin:0; padding:0; overflow:hidden; height:100%}
#container { width:1000px; margin:0 auto;}
.header { width:1000px; height:30px; background-color:#dadada;}
.wrapper{ width:1000px; overflow:scroll; position:relative;}

দয়া করে এই জেএস ফিডলটি দেখুন

Answer 1

আপনি heightসিএসএস সম্পত্তি মিস করছেন ।

এটি যুক্ত করলে আপনি লক্ষ্য করবেন যে স্ক্রোল বারটি উপস্থিত হবে।

.wrapper{ 
    // width: 1000px;
    width:600px; 
    overflow-y:scroll; 
    position:relative;
    height: 300px;
}

JSFIDDLE

ডকুমেন্টেশন থেকে :

overflow-y

ওভারফ্লো-ওয়াই সিএসএস বৈশিষ্ট্যটি শীর্ষ এবং নীচের প্রান্তগুলিতে প্রবাহিত হওয়ার পরে সামগ্রীটি ক্লিপ করা, কোনও স্ক্রোল বার রেন্ডার করতে বা কোনও ব্লক-স্তর উপাদানটির ওভারফ্লো সামগ্রী প্রদর্শন করতে হবে তা সুনির্দিষ্ট করে।

Comments

কিভাবে ভিউপোর্টে উচ্চতা থামানো যায়? আমি পিক্সেলগুলিতে হার্ডকোড করতে চাই না, যেহেতু এটি বিভিন্ন স্ক্রিন আকারের জন্য কাজ করে না

— djechlin

@ ডিজেচলিন তার জন্য একটি প্রশ্ন জিজ্ঞাসা করুন। সম্ভবত আপনি শতাংশ মান ব্যবহার করতে পারেন বা dislpay: fixed... আমি নিশ্চিত না আপনি কী করতে চাইছেন।

— আয়নিক বিজাউ

ভিউপোর্ট উচ্চতার সম্পত্তি ব্যবহার করুন: উচ্চতা: 100vh

— জোসেফ

Answer 2

সমাধানটি হ'ল height:100%;আপনার পিতামাতার সমস্ত উপাদানগুলিতেও যুক্ত করা .wrapper-div। তাই:

html{
    height: 100%;
}

body{ 
    margin:0;
    padding:0;
    overflow:hidden;
    height:100%;
}

#container{
    width:1000px;
    margin:0 auto;
    height:100%;
}

Answer 3

আপনি যদি .wrapperশ্রেণিতে উচ্চতা যুক্ত করেন তবে আপনার স্ক্রোলটি কাজ করছে, heightস্ক্রোল ছাড়া কাজ করছে না।

এটি http://jsfiddle.net/ZcrFr/3/ ব্যবহার করে দেখুন

সিএসএস:

.wrapper {
  position: relative;
  overflow: scroll;
  width: 1000px;
  height: 800px;
}

Comments

ধন্যবাদ, তবে আমার আসল প্রয়োজনটি আমার কোনও উচ্চতা দেওয়া উচিত নয় যা 100% বা অটো দিতে পারে, সামগ্রীটি ব্রাউজার উইন্ডো অনুসারে নেওয়া উচিত, আপনি কি সিএসএস / জাভাস্ক্রিপ্টে অন্য কোনও সমাধান করতে পারেন?

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

যখন আমি শতাংশের হিসাবে উচ্চতা height:100%

— কোডিং ওয়ার্ল্ড

Answer 4

আপনি ডিভকে উচ্চতা দেননি। সুতরাং আরও কন্টেন্ট যুক্ত করা হলে এটি স্বয়ংক্রিয়ভাবে প্রসারিত হবে। এটি একটি স্থির-উচ্চতা দিন এবং স্ক্রোল বারগুলি প্রদর্শিত হবে।

Comments

ধন্যবাদ, তবে আমার আসল প্রয়োজনটি আমার কোনও উচ্চতা দেওয়া উচিত নয় যা 100% বা অটো দিতে পারে, সামগ্রীটি ব্রাউজার উইন্ডো অনুসারে নেওয়া উচিত, আপনি কি সিএসএস / জাভাস্ক্রিপ্টে অন্য কোনও সমাধান করতে পারেন?

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

এটি 100% এর উচ্চতা দিন। তারপরে আপনি ওভারফ্লো এবং নিজের জন্য প্রয়োজনীয়তাগুলি পূরণ করেন।

— নিক

Answer 5

আপনি যদি আপনার শিরোনামের জন্য একটি স্থির উচ্চতা সেট করেন তবে আপনি এটি আপনার মোড়কের আকারের জন্য একটি গণনায় ব্যবহার করতে পারেন।

http://jsfiddle.net/ske5Lqyv/5/

আপনার উদাহরণ কোড ব্যবহার করে, আপনি এই সিএসএস যুক্ত করতে পারেন:

html, body {
  margin: 0px;
  padding: 0px;
  height: 100%;
}

#container {
  height: 100%;
}

.header {
  height: 64px;
  background-color: lightblue;
}

.wrapper {
  height: calc(100% - 64px);
  overflow-y: auto;
}

বা, আপনি আরও গতিশীল পদ্ধতির জন্য ফ্লেক্সবক্স ব্যবহার করতে পারেন http://jsfiddle.net/19zbs7je/3/

<div id="container">
  <div class="section">
    <div class="header">Heading</div>
    <div class="wrapper">
      <p>Large Text</p>
    </div>
  </div>
</div>

html, body {
  margin: 0px;
  padding: 0px;
  height: 100%;
}

#container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.section {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.header {
  height: 64px;
  background-color: lightblue;
  flex-shrink: 0;
}

.wrapper {
  flex-grow: 1;
  overflow: auto;
  min-height: 100%; 
}

এবং যদি আপনি এমনকি কল্পনাকারী পেতে চাই, এই প্রশ্নের আমার প্রতিক্রিয়া কটাক্ষপাত করা https://stackoverflow.com/a/52416148/1513083

Answer 6

আমি আপনার সম্পাদনা: ফিডল

html, body{ margin:0; padding:0; overflow:hidden; height:100% }
.header { margin: 0 auto; width:500px; height:30px; background-color:#dadada;}
.wrapper{ margin: 0 auto; width:500px; overflow:scroll; height: 100%;}

এইচটিএমএল-ট্যাগকে 100% উচ্চতা দেওয়া সমাধান solution আমিও ধারক ডিভটি মুছে ফেলেছি। যখন আপনার লেআউটটি এভাবে থাকে তখন আপনার প্রয়োজন হবে না।

Comments

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

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

Answer 7

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

function wrapperHeight(){
    var height = $(window).outerHeight() - $('#header').outerHeight(true);
    $('.wrapper').css({"max-height":height+"px"});      
}

নোট
উইন্ডোটি ".কন্টেইনার" দ্বারা প্রতিস্থাপিত হতে পারে যদি তার যদি কোনও ভাসমান শিশু না থাকে বা সঠিক উচ্চতা গণনা করার জন্য কোনও স্থির থাকে। এই সমাধান jQuery ব্যবহার করে।

Comments

এটি সিএসএস সমস্যা কেন জাভাস্ক্রিপ্ট ব্যবহার করবেন?

— গ্লেনজি

কারণ ওপি CSS / জাভাস্ক্রিপ্ট সমাধানের জন্য বলেছে। ইতিমধ্যে একটি ভাল সিএসএস সমাধান ছিল এবং আমি বিশ্বাস করি যে সময়ে ওপি জেএসে এটি কীভাবে করা যায় সে সম্পর্কে সর্বাধিক ভোটপ্রাপ্ত উত্তরের একটি মন্তব্যে জিজ্ঞাসা করেছিল। তবে এটি কয়েক বছর হয়েছে তাই আমি ভুল মনে করতে পারি ;-)

— অ্যানিমা- t3 ডি

Answer 8

অ্যাঙ্গুলার 2 + ম্যাটারিয়াল 2 + ​​সিডেনাভের জন্য আপনাকে নিম্নলিখিতগুলি করতে হবে:

 ngAfterViewInit() {
   this.element.nativeElement.getElementsByClassName('md-sidenav-content')[0].style.overflow = 'hidden'; 
  }

Comments

এর উপর আর কোন বিবরণ আছে? কেন আপনি শুধু করা যাচ্ছে না overflow:hiddenএ cssmaterial2 ক্ষেত্রে?

— kuncevic.dev

Answer 9

আমার ক্ষেত্রে, শুধুমাত্র height: 100vhপ্রত্যাশিত আচরণের সাথে সমস্যার সমাধান করুন

Answer 10

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

overflow-y:scroll;

Comments

তবে আপনি যদি কেবলমাত্র ট্র্যাকপ্যাড সহ কোনও ম্যাকে থাকেন তবে এটিও কাজ করবে না।

— আরআর