প্যারেন্ট ডিভের তুলনায় একটি "অবস্থান: স্থির" বিভাগের প্রস্থ নির্ধারণ করুন

Question

আমি 100% প্রস্থের (এটির পিতামাতার সাথে সম্পর্কিত) একটি ডিভ (অবস্থান: স্থির) দেওয়ার চেষ্টা করছি। তবে আমার কিছু সমস্যা হয়েছে ...

সম্পাদনা: প্রথম সমস্যা উত্তরাধিকারী ব্যবহার করে sovled হয়, কিন্তু এটি এখনও কাজ করে না। আমি মনে করি সমস্যাটি হ'ল আমি একাধিক ডিভ ব্যবহার করছি যা 100% / উত্তরাধিকারের প্রস্থ নেয়। আপনি jsfiddle আপডেটে দ্বিতীয় সমস্যাটি খুঁজে পেতে পারেন: http://jsfiddle.net/4bGqF/7/

শিয়ালের উদাহরণ

#container {
    width: 800px;
}

#fixed {
    position: fixed;
    width: 100%;
}

এবং এইচটিএমএল

<div id="container">
    <div id="fixed">Sitename</div>
    <p>
        blaat
    </p>
</div>

অথবা আপনি এটি ব্যবহার করে দেখতে পারেন: http://jsfiddle.net/4bGqF/

সমস্যাগুলি মনে হচ্ছে স্থির উপাদানটি সর্বদা উইন্ডো / নথির প্রস্থ গ্রহণ করে । কেউ কি জানেন কিভাবে এই ঠিক আছে?

আমি আমার স্থির উপাদানটিকে স্থির করতে পারছি না, কারণ আমি জেএসক্রোলপেইন প্লাগইন ব্যবহার করছি। এটি কোনও স্ক্রোলবার আছে কিনা তা সামগ্রীর উপর নির্ভর করে।

অনেক ধন্যবাদ!

পিএস: 2 ডিভের পাঠ্য একে অপরের উপরে রয়েছে। এটি কেবল একটি উদাহরণ যাতে এটি কোনও বিষয় নয়।

Comments

আমার উত্তর দেখুন যার নীচে মধ্যে কিছু অতিরিক্ত অন্তর্দৃষ্টি উপলব্ধ করা হয় inheritএবং কিভাবে ব্যবহার max-width:inheritসঙ্গে width:inheritধারক / অন্তর্ভুক্ত অনুপাত একই সময় রাখে এখনো প্রতিক্রিয়াশীল এবং সামলানো হচ্ছে

— aequalsb

Answer 1

আমি দ্বিতীয় সমস্যাটি (আপনার সম্পাদনার উপর ভিত্তি করে) কী তা সম্পর্কে নিশ্চিত নই, তবে আপনি যদি width:inheritসমস্ত অভ্যন্তর ডিভগুলিতে প্রয়োগ করেন তবে এটি কাজ করে: http://jsfiddle.net/4bGqF/9/

আপনার ব্রাউজারগুলির যে জাভাস্ক্রিপ্ট সমাধানটি আপনাকে সমর্থন করতে হবে এবং যে সমর্থন করতে হবে না তার জন্য সন্ধান করতে পারেন width:inherit

Comments

একটি চমত্কারভাবে সহজ সমাধানের জন্য +1, যদিও width: inheritআমি এটিই প্রথম চিন্তা করতাম না

— বোজাঙ্গলেস

এটা কি জাদু ?! +1

— নিকু সুরডু

# কন্টেইনার প্রস্থটি যদি প্রস্থ = 100px দিয়ে একটি ডিভের ভিতরে 50% হয় তবে এটি কীভাবে সমাধান করবেন সে সম্পর্কে কোনও ধারণা (তবে ধারকটির প্রস্থ 50px হবে এবং স্থির প্রস্থটি ব্রাউজারের প্রস্থের 50% হবে)?

— কেক

পিতামাতার প্রস্থের উত্তরাধিকারসূত্রে প্রাপ্ত কৌশলটি কেবল তখনই কাজ করে যদি পিতামাতার px এর একটি নির্দিষ্ট প্রস্থ থাকে।

— jahu

এটি একটি খুব খারাপ উত্তর ... এটি মূলত ধ্রুবক মান নির্ধারণের সমতুল্য, যা মোটেই খুব কার্যকর নয়।

— জে

Answer 2

যেমনটি অনেকে মন্তব্য করেছেন, প্রতিক্রিয়াশীল ডিজাইন প্রায়শই% দ্বারা প্রস্থকে সেট করে

width:inheritগণনা করা প্রস্থ নয় সিএসএস প্রস্থের উত্তরাধিকারী হবে - যার অর্থ শিশু ধারক উত্তরাধিকার সূত্রে প্রাপ্তwidth:100%

তবে, আমি মনে করি, প্রায়শই প্রতিক্রিয়াশীল নকশাগুলি max-widthখুব সেট করে:

#container {
    width:100%;
    max-width:800px;
}
#contained {
    position:fixed;
    width:inherit;
    max-width:inherit;
}

এটি একটি আঠালো মেনু তৈরির মূল সমস্যাটি মূল পিতৃ প্রস্থে যখনই "আটকে" যায় তখনই সীমাবদ্ধ রাখার সমস্যাটি সমাধান করার জন্য এটি অত্যন্ত সন্তোষজনকভাবে কাজ করেছিল whenever

width:100%ভিউপোর্ট সর্বাধিক প্রস্থের চেয়ে কম হলে পিতা বা মাতা এবং সন্তানের উভয়ই এটি মেনে চলবে । তেমনিভাবে, max-width:800pxভিউপোর্টটি আরও প্রশস্ত হলে উভয়ই মেনে চলবে ।

এটি আমার ইতিমধ্যে প্রতিক্রিয়াশীল থিমের সাথে এমনভাবে কাজ করে যাতে আমি স্থির শিশু উপাদানকেও পরিবর্তন না করে পিতামাতার ধারককে পরিবর্তন করতে পারি - মার্জিত এবং নমনীয় -

PS: আমি ব্যক্তিগতভাবে মনে করি আইই 6/7 ব্যবহার না করে এটি কিছুটা গুরুত্বপূর্ণ নয় inherit

Comments

দুর্দান্ত উত্তর! আমার ক্ষেত্রে, min-width: inheritকৌশলটি যুক্ত করে।

— ব্রুনো মন্টিরিও

এটি পেক্সট এবং শতাংশ হিসাবে সংজ্ঞায়িত প্রস্থ সহ পিতামাতাদের জন্য কাজ করে। আমার দৃষ্টিতে সঠিক উত্তর হওয়া উচিত।

— মাইকেল

Answer 3

স্থির অবস্থানটি কিছুটা জটিল (সত্যই অসম্ভব) তবে অবস্থান: স্টিকি সুন্দরভাবে কৌশলটি করছে:

<div class='container'>
  <header>This is the header</header>
  <section>
    ... long lorem ipsum
  </section>
</div>

body {
  text-align: center;  
}

.container {
  text-align: left;
  max-width: 30%;
  margin: 0 auto;
}


header {
  line-height: 2rem;
  outline: 1px solid red;
  background: #fff;
  padding: 1rem;

  position: sticky;
  top: 0;
}

কোডপেন নমুনা দেখুন

Answer 4

আপনি jQuery দ্বারা এটি সমাধান করতে পারেন:

var new_width = $('#container').width();
$('#fixed').width(new_width); 

এটি আমার পক্ষে এতটা সহায়ক ছিল কারণ আমার লেআউটটি প্রতিক্রিয়াশীল ছিল, এবং inheritসমাধানটি আমার সাথে কাজ করছে না!

Comments

খারাপ উত্তর, যদি আপনি উইন্ডোটির আকার পরিবর্তন করেন তবে এটি ভেঙে যায়।

— জে

সত্যই একটি উইন্ডো থাকা উচিত event ইভেন্ট হ্যান্ডলার অনারাইজ করা উচিত।

— অগস্ট

এটি করার উপায়। কোনও ফাংশন সেট উইথথ () এ মোড়ানো হতে পারে, তারপরে এটিকে "লোড" এবং "আকার পরিবর্তন করুন" উইন্ডো ইভেন্ট শ্রোতাদের কল করুন

— কাঠজ

এটি আমার পক্ষে ভাল কাজ করেছে! আমি এমন একটি ইস্যুতে দৌড়েছি যেখানে পিতামাতার প্রস্থ ছিল: 25%, সুতরাং প্রস্থ করা: উত্তরাধিকারী প্রতিটি সন্তানের প্রস্থ: 25% করা হয়েছে।

— ট্রয় রাইমার

Answer 5

এই সিএসএস ব্যবহার করুন:

#container {
    width: 400px;
    border: 1px solid red;
}

#fixed {
    position: fixed;
    width: inherit;
    border: 1px solid green;
}

# ফিক্সড উপাদানটি এর প্যারেন্ট প্রস্থের উত্তরাধিকারী হবে, সুতরাং এটি এর 100% হবে।

Comments

IE6-7 ব্যতীত সমর্থন করে না inherit। নিশ্চিত না যে ম্যাটসর।

— থমাস শিল্ডস

অনেক ধন্যবাদ. এটি উদাহরণস্বরূপ চেষ্টা করার পরে এটি কার্যকর হয় তবে আমার কোডে নয় ... যাইহোক এটি আমি এখানে জিজ্ঞাসা করা প্রশ্নের উত্তর। এটি কাজ না করার সম্ভবত আরও একটি কারণ রয়েছে ... তবে তবুও ধন্যবাদ!

— Dnns

Answer 6

স্থির অবস্থানের ভিউপোর্টের সাথে সম্পর্কিত সমস্ত কিছু সংজ্ঞায়িত করার কথা, তাই position:fixedসর্বদা এটি করা যায়। position:relativeপরিবর্তে শিশু ডিভ ব্যবহার করার চেষ্টা করুন । (আমি বুঝতে পারি আপনার অন্যান্য কারণে স্থির অবস্থানের প্রয়োজন হতে পারে, তবে যদি তাই হয় - আপনি জেএস ছাড়াই এর পিতামাতার প্রস্থটি সত্যই তৈরি করতে পারবেন না inherit)

Comments

@ ডাউনভোটার - আপনি কি ব্যাখ্যা করতে পারেন, দয়া করে? আমার ডাউনটাতে কোনও সমস্যা নেই তবে আমি কেন জানতে চাই যাতে ভবিষ্যতে আমার উত্তরগুলি উন্নত করতে পারে।

— থমাস শিল্ডস

আপনার ব্যাখ্যাটি ঠিক আছে, তবে আপনি বলেছিলেন যে "আপনি জেএস ছাড়াই পিতামাতার প্রস্থের ম্যাচটি সত্যই তৈরি করতে পারবেন না"। যদিও এটি কিছু ক্ষেত্রে সম্ভব (উত্তরাধিকার ব্যবহার করে)।

— Dnns

ওহ অবশ্যই. আমি অনেকটা আইই টার্গেট করায় আমি উত্তরাধিকার সম্পর্কে ভুলে গিয়েছিলাম এবং কেবল আইআই 9 + এটি সমর্থন করে।

— থমাস শিল্ডস

এমনকি মাইক্রোসফ্ট চায় আইই অদৃশ্য হয়ে যায় - এই আসল পোস্টটি কত পুরানো তা বিবেচনা করে আমি মনে করি এটি আই ই ইস্যুটি মোটা বলে নিরাপদ। আপনি যদি IE সমর্থন না করার দৃ strongly়ভাবে পরামর্শ দেন তবে আপনি এই জাতীয় সহায়তার জন্য বিশেষভাবে বিলিং করছেন - এবং এই মুহুর্তের মধ্যে!

— aequalsb

Answer 7

একটি বড় অ্যাপ্লিকেশনে কিছু পুনরায় আঁকানো সমস্যাগুলি ঠিক করার সময় আমরা একটি সামান্য হ্যাক পেয়েছি।

-webkit-transform: translateZ(0);পিতামাতার উপর ব্যবহার করুন। অবশ্যই এটি ক্রোমের সাথে নির্দিষ্ট।

http://jsfiddle.net/senica/bCQEa/

-webkit-transform: translateZ(0);

Comments

এটি প্রস্থের সমস্যার সমাধান করে তবে ভিউপোর্টের তুলনায় এটি শিশুটিকে অ-স্থির করে তুলেছে।

— বিবেক মহারাজ

ডাউনভোটের জন্য দুঃখিত, কারণ এটি অবস্থানের উদ্দেশ্যকে পুরোপুরি পরাস্ত করে: স্থির।

— trusktr

আমি মনে করি না আপনি প্রশ্নটি পড়েছেন। এটি বলে, কীভাবে আপনি "স্থির" অবস্থানের সাথে কোনও পিতামাতার সাথে একটি ডিভ "আপেক্ষিক" করেন। যে খুব বিরোধী স্থির অবস্থান। এবং আমার প্রতিক্রিয়া পরিষ্কারভাবে বলে, "হ্যাক"। আপনি যখন সমাধানের নিকটবর্তী হন তখন উদ্দেশ্যটি হারাতে পারে না।

— সেনিকা গঞ্জালেজ

Answer 8

এটির জন্য একটি সহজ সমাধান রয়েছে।

আমি পিতামাতার ডিভের জন্য একটি স্থিত অবস্থান এবং সামগ্রীগুলির জন্য সর্বাধিক প্রস্থ ব্যবহার করেছি।

আপনাকে অন্যান্য ধারক সম্পর্কে খুব বেশি চিন্তা করার দরকার নেই কারণ স্থির অবস্থানটি কেবল ব্রাউজার উইন্ডোর সাথে সম্পর্কিত।

       .fixed{
            width:100%;
            position:fixed;
            height:100px;
            background: red;
        }

        .fixed .content{
            max-width: 500px;
            background:blue;
            margin: 0 auto;
            text-align: center;
            padding: 20px 0;
        }

<div class="fixed">
  <div class="content">
     This is my content
  </div>
</div>

Answer 9

এই সমাধানটি নিম্নলিখিত মানদণ্ডগুলি পূরণ করে

1. শতকরা প্রস্থ পিতামাতাকে অনুমোদিত
2. উইন্ডো আকার পরিবর্তন পরে কাজ করে
3. শিরোনামের নীচে সামগ্রী কখনও অ্যাক্সেসযোগ্য নয়

আমি যতদূর সচেতন, জাভা স্ক্রিপ্ট (দুর্ভাগ্যক্রমে) ছাড়া এই মানদণ্ডগুলি পূরণ করা যায় না।

এই সমাধানটি jQuery ব্যবহার করে তবে ভ্যানিলা জেএসেও সহজেই রূপান্তরিত হতে পারে:

function fixedHeader(){
  $(this).width($("#wrapper").width());
  $("#header-filler").height($("#header-fixed").outerHeight());
}

$(window).resize(function() {
  fixedHeader();
});

fixedHeader();

#header-fixed{
  position: fixed;
  background-color: white;
  top: 0;
}
#header-filler{
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="header-fixed">
  This is a nifty header! works even when resizing the window causing a line break
</div>
<div id="header-filler"></div>

[start fluff]<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
[end fluff]

</div>

Answer 10

আপনাকে স্থির উপাদান এবং এর মূল উপাদানগুলির একই স্টাইলটি দেওয়া দরকার। এর মধ্যে একটি উদাহরণ সর্বাধিক প্রস্থ এবং অন্য উদাহরণে প্যাডিং সহ তৈরি করা হয়েছে।

* {
  box-sizing: border-box
}
body {
  margin: 0;
}
.container {
  max-width: 500px;
  height: 100px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  background-color: lightgray;
}
.content {
  max-width: 500px;
  width: 100%;
  position: fixed;
}
h2 {
  border: 1px dotted black;
  padding: 10px;
}
.container-2 {
  height: 100px;
  padding-left: 32px;
  padding-right: 32px;
  margin-top: 10px;
  background-color: lightgray;
}
.content-2 {
  width: 100%;
  position: fixed;
  left: 0;
  padding-left: 32px;
  padding-right: 32px;
}

<div class="container">
  <div class="content">
    <h2>container with max widths</h2>
  </div>
</div>

<div class="container-2">
  <div class="content-2">
    <div>
      <h2>container with paddings</h2>
    </div>
  </div>
</div>