मूल स्थिति के सापेक्ष "स्थिति: निश्चित" div की चौड़ाई सेट करें

Question

मैं एक div (स्थिति: निश्चित) 100% की चौड़ाई (यह माता-पिता div से संबंधित) देने की कोशिश कर रहा हूँ। लेकिन मुझे कुछ समस्याएं हैं ...

संपादित करें: पहली समस्या इनहेरिट का उपयोग करके देखी जाती है, लेकिन यह अभी भी काम नहीं करती है। मुझे लगता है कि समस्या यह है कि मैं कई डिवीजनों का उपयोग कर रहा हूं जो 100% / विरासत की चौड़ाई लेते हैं। आप jsfiddle अद्यतन पर दूसरी समस्या पा सकते हैं: http://jsfiddle.net/4bGqF/7/

फॉक्स का उदाहरण

#container {
    width: 800px;
}

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

और HTML

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

या आप इसे आज़मा सकते हैं: http://jsfiddle.net/4bGqF/

समस्याओं से लगता है कि निश्चित तत्व हमेशा खिड़की / दस्तावेज़ की चौड़ाई ले रहा है । किसी को पता है कि यह कैसे तय?

मैं अपने फिक्स्ड एलिमेंट को एक निश्चित के साथ नहीं दे सकता, क्योंकि मैं jScrollPane प्लगइन का उपयोग कर रहा हूं। यह सामग्री पर निर्भर करता है कि स्क्रॉलबार है या नहीं।

आपका बहुत बहुत धन्यवाद!

पुनश्च: 2 विभाजनों का पाठ एक दूसरे के ऊपर होता है। यह केवल एक उदाहरण है ताकि वास्तव में कोई फर्क न पड़े।

Comments

नीचे मेरा जवाब देखें जो कुछ अतिरिक्त जानकारी प्रदान करता है inheritऔर किस तरह से कंटेनर / समाहित अनुपात का उपयोग max-width:inheritकरता width:inheritहै, जबकि अभी भी उत्तरदायी और प्रबंधनीय है

— aequalsb

Answer 1

मुझे यकीन नहीं है कि दूसरी समस्या क्या है (आपके संपादन के आधार पर), लेकिन अगर आप width:inheritसभी आंतरिक विभाजनों पर लागू होते हैं , तो यह काम करता है: http://jsfiddle.net/4bGqF/9/

आप उन ब्राउज़रों के लिए एक जावास्क्रिप्ट समाधान देखना चाहते हैं, जिनका आपको समर्थन करने की आवश्यकता है और जो समर्थन नहीं करते हैं width:inherit

Comments

एक विलक्षण रूप से सरल समाधान के लिए +1, हालांकि width: inheritपहली बात नहीं है जो मैंने सोचा होगा

— Bojangles

यह कैसा मायाजाल है?! +1

— निकु सर्डू

किसी भी विचार यह कैसे हल करने के लिए अगर #container चौड़ाई div के साथ चौड़ाई के अंदर 50% = 100px (तब कंटेनर की चौड़ाई 50px होगी और निश्चित चौड़ाई ब्राउज़र चौड़ाई का 50% होगी)?

— केके

माता-पिता की चौड़ाई विरासत में मिलने वाली चाल केवल तभी काम करती है जब माता-पिता की px में एक निर्धारित चौड़ाई हो।

— जाहू २२'१५ को

यह एक बहुत बुरा जवाब है ... यह मूल रूप से निरंतर मूल्यों को स्थापित करने के बराबर है, जो बिल्कुल उपयोगी नहीं है।

— जय

Answer 2

जैसा कि कई लोगों ने टिप्पणी की है, उत्तरदायी डिजाइन बहुत बार% द्वारा चौड़ाई निर्धारित करता है

width:inheritसीएसएस चौड़ाई विरासत में मिला होगा नहीं - चौड़ाई जिसका मतलब है कि बाल कंटेनर विरासत में मिला हैwidth:100%

लेकिन, मुझे लगता है, लगभग अक्सर उत्तरदायी डिजाइन सेट max-widthभी, इसलिए:

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

यह बहुत संतोषजनक ढंग से काम किया जब भी यह अटक गया एक मूल मेनू चौड़ाई के लिए एक चिपचिपा मेनू बनाने की मेरी समस्या को हल करने के लिए "

माता-पिता और बच्चे दोनों का पालन होगा width:100%यदि व्यूपोर्ट अधिकतम चौड़ाई से कम है। इसी तरह, max-width:800pxव्यूपोर्ट व्यापक होने पर दोनों का पालन करेंगे ।

यह मेरे पहले से ही उत्तरदायी विषय के साथ काम करता है, जिसमें मैं निश्चित बाल तत्व को भी बदल सकता हूं, बिना माता-पिता के कंटेनर को बदल सकता हूं - सुरुचिपूर्ण और लचीला

ps: मुझे व्यक्तिगत रूप से लगता है कि यह एक बिट से कोई फर्क नहीं पड़ता कि IE6 / 7 का उपयोग न करें inherit

Comments

बहुत बढ़िया जवाब! मेरे मामले में, एक min-width: inheritचाल चली।

— ब्रूनो मोंटेइरो

यह px और प्रतिशत के रूप में परिभाषित चौड़ाई वाले मूल तत्वों के लिए काम करता है। मेरे विचार में सही उत्तर होना चाहिए।

— मिकेल

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

खराब उत्तर, यदि आप विंडो को तोड़ते हैं तो यह टूट जाता है।

— जय

वास्तव में एक window.onresize ईवेंट हैंडलर होना चाहिए।

— ट्विस्टेडपिक्सल

यह करने का तरीका है। एक समारोह setWidth (), तो "लोड" पर यह कहते हैं और "आकार" खिड़की घटना श्रोताओं में लपेटा जा सकता है

— woodz

इसने मेरे लिए अच्छा काम किया! मैं एक ऐसे मुद्दे पर भाग गया, जहाँ माता-पिता की चौड़ाई थी: 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

@Downvoter - क्या आप समझा सकते हैं, कृपया? मेरे पास कोई समस्या नहीं है, लेकिन मुझे यह जानना पसंद है कि मैं भविष्य में अपने उत्तरों में सुधार क्यों कर सकता हूं।

— थॉमस शील्ड

आप व्याख्या कर रहे हैं कि यह ठीक है, हालाँकि आपने कहा था कि "आप वास्तव में जेएस के बिना अभिभावक से मेल नहीं खाते।" हालांकि यह कुछ मामलों में (विरासत का उपयोग करके) संभव है।

— DNNS

ओह बेशक। मैं IE के लक्ष्य के रूप में इनहेरिट के बारे में भूल गया था और केवल IE9 + इसे समर्थन करता है।

— थॉमस शील्ड

यहां तक ​​कि Microsoft चाहता है कि IE गायब हो जाए - यह देखते हुए कि यह मूल पद कितना पुराना है, मुझे लगता है कि यह कहना सुरक्षित है कि IE मुद्दा मूक है। यदि दृढ़ता से आईई UNLESS का समर्थन नहीं करने की सलाह देते हैं तो आप विशेष रूप से इस तरह के समर्थन के लिए बिलिंग कर रहे हैं - और घंटे के हिसाब से!

— असल्बस

Answer 7

यहाँ एक छोटी सी हैक है जो कि एक बड़े ऐप पर कुछ redraw मुद्दों को ठीक करते हुए हम भागते हैं।

-webkit-transform: translateZ(0);जनक पर प्रयोग करें । बेशक यह क्रोम के लिए विशिष्ट है।

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

-webkit-transform: translateZ(0);

Comments

यह चौड़ाई की समस्या को ठीक करता है, लेकिन इसने बच्चे को व्यूपोर्ट के सापेक्ष अनिश्चित बना दिया।

— विवेक महाराज

डाउनवोट के लिए क्षमा करें, क्योंकि यह स्थिति के उद्देश्य को पूरी तरह से हरा देता है: निश्चित।

— trusktr

मुझे नहीं लगता कि आप सवाल पढ़ते हैं। यह कहता है, आप एक माता-पिता को "निश्चित" स्थिति के साथ "रिश्तेदार" कैसे बनाते हैं। कि TOO विरोधी स्थाई स्थिति है। और मेरी प्रतिक्रिया स्पष्ट रूप से कहती है, "हैक"। यह उस उद्देश्य को नहीं हराता है जब यह आपको समाधान के करीब ले जाता है।

— सेनिका गोंजालेज

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 का उपयोग करता है, लेकिन इसे आसानी से वेनिला JS में भी परिवर्तित किया जा सकता है:

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>