স্থূলতা + স্ক্রোলিং

Question

নিম্নলিখিত HTMLএবং সাথেCSS

.container {
  position: relative;
  border: solid 1px red;
  height: 256px;
  width: 256px;
  overflow: auto;
}
.full-height {
  position: absolute;
  top: 0;
  left: 0;
  right: 128px;
  bottom: 0;
  background: blue;
}

<div class="container">
  <div class="full-height">
  </div>
</div>

অভ্যন্তরটি divপছন্দসই পাত্রে পুরো মাথাটি নিয়ে যায়। আমি এখন যদি ধারকটিতে আরও কিছু, প্রবাহ, সামগ্রী যুক্ত করি তবে:

.container {
  position: relative;
  border: solid 1px red;
  height: 256px;
  width: 256px;
  overflow: auto;
}
.full-height {
  position: absolute;
  top: 0;
  left: 0;
  right: 128px;
  bottom: 0;
  background: blue;
}

<div class="container">
  <div class="full-height">
</div>

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia maxime facere quae cumque perferendis cum atque quia repellendus rerum eaque quod quibusdam incidunt blanditiis possimus temporibus reiciendis deserunt sequi eveniet necessitatibus
  maiores quas assumenda voluptate qui odio laboriosam totam repudiandae? Doloremque dignissimos voluptatibus eveniet rem quasi minus ex cumque esse culpa cupiditate cum architecto! Facilis deleniti unde suscipit minima obcaecati vero ea soluta odio cupiditate
  placeat vitae nesciunt quis alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui nemo corporis ducimus beatae consequatur est iusto dolorum consequuntur vero debitis saepe voluptatem impedit sint ea numquam quia voluptate quidem.
</div>

তারপরে কনটেইনারটি পছন্দসই হিসাবে স্ক্রল করে, তবে একেবারে অবস্থানযুক্ত উপাদানটি আর ধারকটির নীচে নোঙ্গর করা থাকে না তবে ধারকটির প্রাথমিক দৃশ্য-সক্ষম নীচে থামে। আমার প্রশ্ন; একেবারে অবস্থানগত উপাদানটি ব্যবহার না করে তার ধারকটির সম্পূর্ণ স্ক্রোল উচ্চতা হওয়ার কোনও উপায় আছে JSকি?

Comments

আমি জিজ্ঞাসা করতে পারি কেন আপনার শীর্ষ রয়েছে: 0; পাশাপাশি আছে?

— প্যাটসি ইসা

কোনও বিশেষ কারণ নেই, আমার নির্দিষ্ট জিনিস নির্দিষ্ট করার অভ্যাস আছে

— ক্রিস মীক

আপনি যদি সরান top: 0;এটি কেবল কাজ করে না।

— ব্রেকওয়াল

জেএস গণনা করা ছাড়া innerHeight, এটি কঠিন হবে। দুর্ভাগ্যক্রমে position:fixed

— ধারকটির

Answer 1

আপনাকে পাঠ্যের কোনও divউপাদানকে মোড়ানো দরকার এবং একে একে একে একে একে একে একে একে ঠিক রাখতে হবে।

<div class="container">
    <div class="inner">
        <div class="full-height"></div>
        [Your text here]
    </div>
</div>

CSS:

.inner: { position: relative; height: auto; }
.full-height: { height: 100%; }

অভ্যন্তরীণ ডিভের অবস্থান নির্ধারণের relativeজন্য এটির ভিতরে একেবারে অবস্থানের উপাদানগুলি .containerডিভের পরিবর্তে তার অবস্থান এবং উচ্চতাটিকে ভিত্তি করে , যার একটি নির্দিষ্ট উচ্চতা রয়েছে। অভ্যন্তরীণ ছাড়া, অপেক্ষাকৃত অবস্থানযুক্ত div, .full-heightডিভটি সর্বদা তার মাত্রা এবং অবস্থানের ভিত্তিতে গণনা করবে .container।

* {
  box-sizing: border-box;
}

.container {
  position: relative;
  border: solid 1px red;
  height: 256px;
  width: 256px;
  overflow: auto;
  float: left;
  margin-right: 16px;
}

.inner {
  position: relative;
  height: auto;
}

.full-height {
  position: absolute;
  top: 0;
  left: 0;
  right: 128px;
  bottom: 0;
  height: 100%;
  background: blue;
}

<div class="container">
  <div class="full-height">
  </div>
</div>

<div class="container">
  <div class="inner">
    <div class="full-height">
    </div>

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia maxime facere quae cumque perferendis cum atque quia repellendus rerum eaque quod quibusdam incidunt blanditiis possimus temporibus reiciendis deserunt sequi eveniet necessitatibus
    maiores quas assumenda voluptate qui odio laboriosam totam repudiandae? Doloremque dignissimos voluptatibus eveniet rem quasi minus ex cumque esse culpa cupiditate cum architecto! Facilis deleniti unde suscipit minima obcaecati vero ea soluta odio
    cupiditate placeat vitae nesciunt quis alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui nemo corporis ducimus beatae consequatur est iusto dolorum consequuntur vero debitis saepe voluptatem impedit sint ea numquam quia voluptate
    quidem.
  </div>
</div>

http://jsfiddle.net/M5cTN/

Comments

অবশ্যই, এটি আসলে কিছুটা বোধও তৈরি করে (কোনও সিএসএস যেভাবে বোঝায়;))

— ক্রিস মেক

fill-heightউপাদান পরিষ্কারভাবে কন্টেন্ট সঙ্গে স্ক্রলিং করা হয়, না ওপি এটা নোঙর চাইলেন? (নীল ব্যাকগ্রাউন্ডটিকে কোনও পটভূমির চিত্রে পরিবর্তন করে, আপনি যখন দেখতে পাচ্ছেন আমি কী বোঝাতে চাইছি আপনি এটি দেখতে পাবেন jsfiddle.net/M5cTN/82 )

— পলভস

Answer 2

position: fixed;আপনার সমস্যা সমাধান করবে। উদাহরণস্বরূপ, একটি স্থির বার্তা অঞ্চল ওভারলে আমার বাস্তবায়ন পর্যালোচনা করুন (প্রোগ্রামযুক্তভাবে জনবহুল):

#mess {
    position: fixed;
    background-color: black;
    top: 20px;
    right: 50px;
    height: 10px;
    width: 600px;
    z-index: 1000;
}

এবং এইচটিএমএল মধ্যে

<body>
    <div id="mess"></div>
    <div id="data">
        Much content goes here.
    </div>
</body>

যখন #dataদৃশ্যগুলিতে দীর্ঘতর হয়ে ওঠে #mess, তখন স্ক্রিনে তার অবস্থানটি ধরে রাখে #dataunder

Comments

স্থির অবস্থান ব্রাউজারের তুলনায় উপাদানটির অবস্থান নির্ধারণ করে, যা পছন্দসই ফলাফল নাও হতে পারে।

— আভান্দ আমিরি

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

— হারবি শ্টিনি

transform: translate3d(0,0,0);পিতামাতার উপর পিতামাতার সাথে position: fixedআপেক্ষিক হয়ে উঠবে। উত্স কোডারওয়াল.com

— p/

Answer 3

গাইউরটি ঠিক, তবে আপনি যদি এমন একটি সম্পূর্ণ উচ্চতার আইটেম সন্ধান করছেন যা সামগ্রীটির সাথে স্ক্রোল না করে তবে বাস্তবে ধারকটির উচ্চতা হয় তবে এখানে ফিক্স। এমন একটি পিতামাতার উচ্চতা রয়েছে যার কারণে ওভারফ্লো হয়, এমন একটি সামগ্রী যা একটি 100% উচ্চতা overflow: scrollএবং একটি ভাইবোন প্যারেন্ট আকার অনুযায়ী স্থায়ী হতে পারে, স্ক্রোল উপাদান আকার নয়। এই হিটটি এখানে: http://jsfiddle.net/M5cTN/196/

এবং সম্পর্কিত কোড:

এইচটিএমএল:

<div class="container">
  <div class="inner">
    Lorem ipsum ...
  </div>
  <div class="full-height"></div>
</div>

CSS:

.container{
  height: 256px;
  position: relative;
}
.inner{
  height: 100%;
  overflow: scroll;
}
.full-height{
  position: absolute;
  left: 0;
  width: 20%;
  top: 0;
  height: 100%;
}

Comments

দুর্ভাগ্যক্রমে, যদি নীল ডিভটি তার ধারকটির ডানদিকে অবস্থিত হয় তবে এটি তার স্ক্রোলবারটি আড়াল করে।

— পেপিলন

Answer 4

আমি এই পরিস্থিতিতে ছুটে এসেছি এবং একটি অতিরিক্ত ডিভ তৈরি করা অবৈধ ছিল। আমি ঠিক full-heightডিভিতে সেট করে শেষ করেছিheight: 10000%; overflow: hidden;

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