যখন কোনও স্থির উপাদানগুলির ভিউপোর্টের উচ্চতা ছাড়িয়ে যায় তখন কীভাবে আমি স্ক্রোলযোগ্য করতে পারি?

Question 1

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

আমি সেট করার চেষ্টা করেছি overflow-y:auto;কিন্তু এটি কোনওরকমই সহায়তা করে না, ডিভটি মনে হচ্ছে না যে এর অংশটি উইন্ডোটির বাইরে।

divউইন্ডোটির বাইরে যদি স্তব্ধ হয়ে থাকে তবে আমি কীভাবে এটির বিষয়বস্তুগুলি কেবল স্ক্রোলযোগ্য করতে পারি ?

Question 2

আপনি সম্ভবত পারেন না। এখানে কিছু আসে যা কাছে আসে। নীচে জায়গা থাকলে আপনি তার চারপাশে প্রবাহিত সামগ্রী পাবেন না।

http://jsfiddle.net/ThnLk/1289

.stuck {
    position: fixed;
    top: 10px;
    left: 10px;
    bottom: 10px;
    width: 180px;
    overflow-y: scroll;
}

আপনি শতাংশের উচ্চতাটিও করতে পারেন:

http://jsfiddle.net/ThnLk/1287/

.stuck {
    max-height: 100%;
}

Question 3

নীচের লিঙ্কটি প্রদর্শিত হবে যে আমি কীভাবে এটি সম্পাদন করেছি। খুব শক্ত নয় - কিছু চালাক ফ্রন্ট-এন্ড ডেভ ব্যবহার করতে হবে !!

<div style="position: fixed; bottom: 0%; top: 0%;">

    <div style="overflow-y: scroll; height: 100%;">

       Menu HTML goes in here

    </div>

</div>

http://jsfiddle.net/RyanBrackett/b44Zn/

Question 4

আপনার সম্ভবত একটি অভ্যন্তরীণ ডিভ প্রয়োজন। সিএসএস সহ:

.fixed {
   position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
   overflow-y: auto;
   width: 200px; // your value
}
.inner {
   min-height: 100%;
}

Question 5

এটি আপনার অবস্থানের জন্য চেষ্টা করুন: স্থির উপাদান।

overflow-y: scroll;
max-height: 100%;

Question 6

এটি কিছু ফ্লেক্সবক্স যাদু দ্বারা একেবারে করণীয়। এই কলম একবার দেখুন ।

আপনার এই জাতীয় CSS দরকার:

aside {
  background-color: cyan;
  position: fixed;
  max-height: 100vh;
  width: 25%;
  display: flex;
  flex-direction: column;
}

ul {
  overflow-y: scroll;
}

section {
  width: 75%;
  float: right;
  background: orange;
}

এটি IE10 + এ কাজ করবে

Question 7

এখানে খাঁটি এইচটিএমএল এবং সিএসএস সমাধান রয়েছে।

আমরা অবস্থান সহ নববারের জন্য একটি ধারক বাক্স তৈরি করি: স্থির; উচ্চতা: 100%;
তারপরে আমরা উচ্চতা সহ একটি অভ্যন্তরীণ বাক্স তৈরি করব: 100%; ওভারফ্লো-ওয়াই: স্ক্রোল;
এরপরে, আমরা সেই বাক্সের ভিতরে সামগ্রী রেখেছি।

কোডটি এখানে:

.nav-box{
        position: fixed;
        border: 1px solid #0a2b1d;
        height:100%;
   }
   .inner-box{
        width: 200px;
        height: 100%;
        overflow-y: scroll;
        border: 1px solid #0A246A;
    }
    .tabs{
        border: 3px solid chartreuse;
        color:darkred;
    }
    .content-box p{
      height:50px;
      text-align:center;
    }

<div class="nav-box">
  <div class="inner-box">
    <div class="tabs"><p>Navbar content Start</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content End</p></div>
    </div>
</div>
<div class="content-box">
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
</div>

স্নিপেট প্রসারিত করুন

JsFizz এর লিঙ্ক:

Question 8

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

<div id="nav" style="position:fixed;float:left;overflow-y:hidden;width:10%;"></div>
<div style="margin-left:10%;float:left;overflow-y:auto;width:60%;word-break:break-all;word-wrap:break-word;" id="content"></div>

Question 9

স্থির উচ্চতার জন্য আপনার কোডে এটি যুক্ত করুন এবং একটি স্ক্রোল যুক্ত করুন।

.fixedbox {
    max-height: auto;
    overflow-y: scroll;
}

Question 10

আপনার উদ্দেশ্যে, আপনি কেবল ব্যবহার করতে পারেন

position: absolute;
top: 0%;

এবং এটি এখনও পরিবর্তনযোগ্য, স্ক্রোলযোগ্য এবং প্রতিক্রিয়াশীল হতে পারে।