সিএসএস: স্থির উচ্চতার ধারকের ভিতরে ডিভের জন্য কীভাবে স্ক্রোলবারগুলি পাবেন

Question

আমার নিম্নলিখিত মার্কআপ রয়েছে:

<div class="FixedHeightContainer">
  <h2>Title</h2>
  <div class="Content">
    ..blah blah blah...
  </div>
</div>

সিএসএস এর মতো দেখাচ্ছে:

.FixedHeightContainer
{
  float:right;
  height: 250px;
  width:250px;  
}
.Content
{
  ???
}

এর সামগ্রীর কারণে, এর উচ্চতা div.Contentসাধারণত সরবরাহিত স্থানের চেয়ে বেশি div.FixedHeightContainer। এই মুহুর্তে, div.Contentআনন্দের সাথে নীচে থেকে প্রসারিত div.FixedHeightContainer- আমি যা চাই তা নয়।

div.Contentযখন এর উচ্চতাটি ফিট করার পক্ষে খুব দুর্দান্ত হয় তখন আমি কীভাবে তা স্ক্রোলবারগুলি পাই (কেবলমাত্র উল্লম্বভাবে উল্লম্ব, তবে আমি উদাসীন নই)?

overflow:autoএবং overflow:scroll, কিছুই করছ কিছু উদ্ভট কারণে।

Answer 1

সেটিংসটি overflowএটির যত্ন নেওয়া উচিত তবে আপনার উচ্চতাও নির্ধারণ করতে হবে Content। যদি উচ্চতার বৈশিষ্ট্যটি সেট না করা থাকে তবে ডিভটি যতটা প্রয়োজন তত লম্বাভাবে বৃদ্ধি পাবে এবং স্ক্রোলবারগুলি প্রয়োজন হবে না।

উদাহরণ দেখুন: http://jsfiddle.net/ftkbL/1/

Comments

ঠিক আছে, ধন্যবাদ. সুতরাং আমি ডিভ কনটেন্টের জন্য একটি উচ্চতা উল্লেখ করতে হবে? আমি ধরে নিয়েছি এটি ধারক থেকে কার্যকর হবে যে এটি ফিট হবে না এবং সেই ভিত্তিতে স্ক্রোলবারগুলি প্রয়োগ করুন।

— ডেভিড

আপনি যদি Contentএকটি নির্দিষ্ট উচ্চতা দেন তবে আপনাকে একটি নির্দিষ্ট উচ্চতা দেওয়া উচিত নয় FixedHeightContainer, কারণ আপনার শিরোনামটি কতটা উচ্চতর হবে তা আপনি জানেন না, তাই আপনাকে Contentবহিষ্কার করা হতে পারে। দেখুন: jsfiddle.net/ftkbL/2 আপনি ঠিক করতে উচ্চতা সেট করা উচিত শুধুমাত্র সঙ্গে উপাদান overflow: scroll। দেখুন jsfiddle.net/ftkbL/3 বা jsfiddle.net/ftkbL/4

— RoToRa

আমি আপনার পয়েন্টটি দেখতে পাচ্ছি (প্রথম লিঙ্ক থেকে) তবে শিরোনামের পাঠ্যটি জানা আছে এবং ব্যবহারকারী যদি পাঠ্যটিকে একটি অবৈধ আকারে স্ফীত না করে তবে একটি লাইন ভেঙে দেওয়া খুব ছোট short

— ডেভিড

একটি ছোট উচ্চতা আছে এবং একই সময়ে স্ক্রোল-বার আড়াল করার উপায় আছে? এইভাবে ব্যবহারকারীরা যখন মোবাইল ডিভাইসে টেনে নামবেন, তখন তারা দেখতে পাবে যে তারা নিচে স্ক্রল করছে তবে তাদের ব্রাউজারে 2 টি স্ক্রোল-বার না দেখে বোঝা?

— ক্লিওস

@ ব্ল্যাকহক - এটি আমার জানা নেই। এর জন্য আপনার জাভাস্ক্রিপ্ট ব্যবহার করতে হতে পারে। বিশেষত আমি jQuery ড্র্যাগেবল লাইব্রেরিটির কথা ভাবছি: jqueryui.com/draggable- একক বিষয় বিবেচনা করার জন্য ... ডেস্কটপ ব্যবহারকারীরা কীভাবে স্ক্রোল করতে জানবেন?

— Dutchie432

Answer 2

এফডব্লিউআইডাব্লু, এখানে আমার পদ্ধতির = একটি সহজ যা আমার পক্ষে কাজ করে:

<div id="outerDivWrapper">
   <div id="outerDiv">
      <div id="scrollableContent">
blah blah blah
      </div>
   </div>
</div>

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

#outerDivWrapper, #outerDiv {
   height: 100%;
   margin: 0em;
}

#scrollableContent {
   height: 100%;
   margin: 0em;
   overflow-y: auto;
}

Answer 3

উপরের উত্তর থেকে কোড ডাচলি ৪৩২

.FixedHeightContainer {
    float:right;
    height: 250px;
    width:250px; 
    padding:3px; 
    background:#f00;
}

.Content {
    height:224px;
    overflow:auto;
    background:#fff;
}

Answer 4

overflowসম্পত্তি ব্যবহার করুন

শুধু আপনার কোড এ এটি যোগ করুন

overflow: hidden; 

overflow: auto;

overflow: scroll;