মূল ধারকটির 100% প্রস্থে একটি স্থির ডিভ সেট করুন

Question 1

আমার কিছু প্যাডিংয়ের সাথে একটি মোড়ক রয়েছে, তারপরে আমার একটি শতাংশের প্রস্থ (40%) সহ একটি ভাসমান আপেক্ষিক ডিভ রয়েছে।

ভাসমান আপেক্ষিক ডিভের ভিতরে আমার একটি স্থির ডিভ থাকে যা আমি এর পিতামাতার মতো একই আকার চাই। আমি বুঝতে পারি যে একটি নির্দিষ্ট ডিভটি নথির প্রবাহ থেকে সরানো হয়েছে এবং যেমন মোড়কের প্যাডিং উপেক্ষা করছে।

এইচটিএমএল

<div id="wrapper">
  <div id="wrap">
    Some relative item placed item
    <div id="fixed"></div>
  </div>
</div>

সিএসএস

body { 
  height: 20000px 
}  
#wrapper {
  padding: 10%;
}  
#wrap { 
  float: left;
  position: relative;
  width: 40%; 
  background: #ccc; 
} 
#fixed { 
  position: fixed;
  width: inherit;
  padding: 0px;
  height: 10px;
  background-color: #333;
}

এখানে বাধ্যতামূলক ফিজল: http://jsfiddle.net/C93mk/489/

কেউ কি এটি সম্পাদন করার উপায় জানেন?

আমি কী সম্পাদন করতে চাইছি তার আরও বিশদ প্রদর্শন করার জন্য আমি এই ফিডলটি সংশোধন করেছি, বিভ্রান্তির জন্য দুঃখিত: http://jsfiddle.net/EVYRE/4/

Question 2

আপনি .আরবারের জন্য প্যাডিংয়ের পরিবর্তে। মোড়ক পাত্রে জন্য মার্জিন ব্যবহার করতে পারেন:

body{ height:20000px }
#wrapper { padding: 0%; }
#wrap{ 
    float: left;
    position: relative;
    margin: 10%;
    width: 40%; 
    background:#ccc; 
}
#fixed{ 
    position:fixed;
    width:inherit;
    padding:0px; 
    height:10px;
    background-color:#333;    
}

jsfiddle

Question 3

কেমন হয় এই ?

$( document ).ready(function() {
    $('#fixed').width($('#wrap').width());
});

Jquery ব্যবহার করে আপনি যে কোনও প্রস্থের সেট করতে পারেন :)

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

Question 4

পিতামাতার একটি রূপান্তর যুক্ত করার চেষ্টা করুন (কিছুই করার দরকার নেই, একটি শূন্য অনুবাদ হতে পারে) এবং স্থির সন্তানের প্রস্থটি 100% এ সেট করুন

body{ height:20000px }
#wrapper {padding:10%;}
#wrap{ 
    float: left;
    position: relative;
    width: 40%; 
    background:#ccc; 
    transform: translate(0, 0);
}
#fixed{ 
    position:fixed;
    width:100%;
    padding:0px;
    height:10px;
    background-color:#333;
}

<div id="wrapper">
    <div id="wrap">
    Some relative item placed item
    <div id="fixed"></div>
    </div>
</div>

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

Question 5

আপনি পিতামাতার ডিভের ভিত্তিতে পাদচরণ পিন করতে পরম অবস্থান ব্যবহার করতে পারেন। আমি মোড়কে 10px প্যাডিং-নীচেও যুক্ত করেছি (ফুটারের উচ্চতার সাথে মেলে)। নিরঙ্কুশ অবস্থানটি প্রবাহের বাইরের পরিবর্তে পিতামহ বিভাজনের সাথে আপেক্ষিক যেহেতু আপনি ইতিমধ্যে অবস্থানটিকে আপেক্ষিক বৈশিষ্ট্যটি দিয়েছেন।

body{ height:20000px }
#wrapper {padding:10%;}
#wrap{ 
    float: left;
    padding-bottom: 10px;
    position: relative;
    width: 40%; 
    background:#ccc; 
}
#fixed{ 
    position:absolute;
    width:100%;
    left: 0;
    bottom: 0;
    padding:0px;
    height:10px;
    background-color:#333;

}

http://jsfiddle.net/C93mk/497/

Question 6

ম্যান আপনার কনটেইনার প্যারেন্ট উপাদানগুলির প্রস্থের 40%

তবে আপনি যখন অবস্থান ব্যবহার করেন: স্থির, প্রস্থটি ভিউপোর্ট (নথি) প্রস্থের উপর ভিত্তি করে ...

ভাবতে ভাবতে, আমি বুঝতে পারি যে আপনার প্যারেন্ট উপাদানটির 10% প্যাডিং রয়েছে (বাম এবং ডান), এর অর্থ আপনার উপাদানটির মোট পৃষ্ঠার প্রস্থের 80% have সুতরাং আপনার স্থির উপাদানটির মোট প্রস্থের 80% এর উপর ভিত্তি করে 40% থাকতে হবে

সুতরাং আপনাকে কেবল আপনার # ফিক্সড ক্লাসে পরিবর্তন করতে হবে

#fixed{ 
    position:fixed;
    width: calc(80% * 0.4);
    height:10px;
    background-color:#333;
}

আপনি যদি সাস, পোস্টসিএসএস বা অন্য কোনও সিএসএস সংকলক ব্যবহার করেন তবে আপনি যখন প্যারেন্ট এলিমেন্টের প্যাডিং মান পরিবর্তন করেন তখন লেআউটটি ভাঙ্গা এড়াতে আপনি ভেরিয়েবল ব্যবহার করতে পারেন।

এখানে আপডেট করা ফিজল http://jsfiddle.net/C93mk/2343/

আমি আশা করি এটি সাহায্য করে

Question 7

আপনার সর্বশেষতম jsfiddle শীর্ষে , আপনি কেবল একটি জিনিস মিস করেছেন:

#sidebar_wrap {
  width:40%;
  height:200px;
  background:green;
  float:right;
}
#sidebar {
  width:inherit;
  margin-top:10px;
  background-color:limegreen;
  position:fixed;
  max-width: 240px; /*This is you missed*/
}

তবে, কীভাবে এটি আপনার সমস্যার সমাধান করবে? সহজ, প্রথমে প্রত্যাশার চেয়ে বড় কেন তা ব্যাখ্যা করুন।

স্থির উপাদান #sidebarউইন্ডো প্রস্থের আকারকে তার নিজস্ব আকার পেতে বেস হিসাবে প্রতিটি অন্যান্য নির্দিষ্ট উপাদানগুলির মতো ব্যবহার করবে, একবার এই উপাদানটির সংজ্ঞা দেওয়া হয়েছে width:inheritএবং #sidebar_wrapপ্রস্থের মান হিসাবে 40% রয়েছে, তারপরে গণনা করা হবেwindow.width * 40% , আপনার উইন্ডো প্রস্থটি যদি আপনার চেয়ে বড় হয় .containerপ্রস্থ, এর #sidebarচেয়ে বড় হবে #sidebar_wrap।

এই উপায়, আপনার নিজের একটি সর্বোচ্চ প্রস্থ সেট করতে হবে #sidebar_wrap চেয়ে বড় হওয়া থেকে রোধ করার জন্য#sidebar_wrap ।

এই jsfiddle দেখুন যা একটি কার্যকরী কোড দেখায় এবং এটি কীভাবে কাজ করে তা আরও ভাল ব্যাখ্যা করুন।

Question 8

সরান Padding: 10%;বা ব্যবহার px আকারে পরিবর্তে শতাংশ জন্য.wrap

উদাহরণটি দেখুন: http://jsfiddle.net/C93mk/493/

এইচটিএমএল:

<div id="wrapper">
    <div id="wrap">
    Some relative item placed item
    <div id="fixed"></div>
    </div>
</div>

সিএসএস:

body{ height:20000px }
#wrapper {padding:10%;}
#wrap{ 
    float: left;
    position: relative;
    width: 200px; 
    background:#ccc; 
}
#fixed{ 
    position:fixed;
    width:inherit;
    padding:0px;
    height:10px;
    background-color:#333;

}