माता-पिता की दिव्य ऊँचाई का निरपेक्ष पद-विस्तार करें

Question

जैसा कि आप नीचे सीएसएस में देख सकते हैं, मैं child2पहले खुद को स्थिति देना चाहता हूं child1। ऐसा इसलिए है क्योंकि वर्तमान में मैं जिस साइट को विकसित कर रहा हूं, उसे मोबाइल उपकरणों पर भी काम child2करना चाहिए, जिस पर नीचे होना चाहिए, क्योंकि इसमें वह नेविगेशन है जो मैं मोबाइल उपकरणों पर सामग्री के नीचे चाहता हूं। - 2 मास्टरपीस क्यों नहीं? यह केवल 2 है divsजो पूरे HTML में रिप्रेजेंट किए जाते हैं, इसलिए इस मामूली बदलाव के लिए 2 मास्टरपज एक ओवरकिल है।

HTML:

<div id="parent">
    <div class="child1"></div>
    <div class="child2"></div>
</div>

सीएसएस:

parent { position: relative; width: 100%; }
child1 { width: auto; margin-left: 160px; }
child2 { width: 145px; position: absolute; top: 0px; bottom: 0px; }

child2 डायनेमिक ऊंचाई है, क्योंकि विभिन्न उपग्रहों में अधिक या कम नेविगेशन आइटम हो सकते हैं।

मुझे पता है कि निरपेक्ष तैनात तत्वों को प्रवाह से हटा दिया जाता है, इस प्रकार अन्य तत्वों द्वारा अनदेखा किया जाता है।
मैंने overflow:hidden;पैरेंट डिव पर सेटिंग करने की कोशिश की , लेकिन इससे मदद नहीं मिली और न ही clearfix।

मेरा अंतिम उपाय दो के divsहिसाब से जावास्क्रिप्ट को बदलना होगा , लेकिन अब मैं कोशिश करूंगा और देखूंगा कि ऐसा करने का कोई गैर-जावास्क्रिप्ट तरीका मौजूद है या नहीं।

Comments

मुझे 100% यकीन नहीं है, लेकिन मुझे लगता है कि आपको शायद एक जेएस समाधान के लिए जाना होगा जो चाइल्ड 2 की ऊंचाई पर काम करता है और तदनुसार चाइल्ड 1 को स्थानांतरित करता है।

— बिली Moat

यह माता-पिता की स्थिति को रिश्तेदार और बच्चे को निरपेक्ष करने के लिए निर्धारित करके किया जा सकता है।

— फंगसुन्थ्रैक्स

इस समाधान को देखें शायद यह मदद कर सके।

— Az.Youness

Answer 1

आपने स्वयं इस प्रश्न का उत्तर दिया: "मुझे पता है कि निरपेक्ष तैनात तत्व प्रवाह से हटा दिए जाते हैं, इस प्रकार अन्य तत्वों द्वारा अनदेखा किया जाता है।" तो आप एक पूरी तरह से तैनात तत्व के अनुसार माता-पिता की ऊंचाई निर्धारित नहीं कर सकते।

आप या तो निश्चित ऊंचाइयों का उपयोग करते हैं या आपको जेएस को शामिल करने की आवश्यकता है।

Comments

मैं इसे चिह्नित कर रहा हूं क्योंकि यह तकनीकी रूप से सही तरीका है, हालांकि मुझे अपनी समस्या का एक और समाधान मिल गया, जो व्यावहारिक रूप से विशिष्ट पृष्ठों पर आवश्यक सीएसएस को घोंसले में डालना है जिसमें अंतर करना है (फिलहाल 40 में से 2)।

Answer 2

यद्यपि तत्वों के साथ खींचना position: absoluteसंभव नहीं है, अक्सर ऐसे समाधान होते हैं जहां आप समान प्रभाव प्राप्त करते हुए पूर्ण स्थिति से बच सकते हैं। अपने विशेष मामले में समस्या को हल करने वाली इस पहेली को देखें http://jsfiddle.net/gS9q7/

चाल दोनों तत्वों को तैरते हुए तत्व क्रम को उल्टा करना है, पहला दाएं से दूसरा, बाएं से दूसरा, इसलिए दूसरा पहले दिखाई देता है।

.child1 {
    width: calc(100% - 160px);
    float: right;
}
.child2 {
    width: 145px;
    float: left;
}

अंत में, माता-पिता के लिए एक उपसर्ग जोड़ें और आपका काम पूरा हो जाए ( संपूर्ण समाधान के लिए फ़िडल देखें )।

आम तौर पर, जब तक कि पूर्ण स्थिति वाला तत्व मूल तत्व के शीर्ष पर स्थित होता है, तब तक संभावना अच्छी होती है कि आप तत्व को तैरते हुए वर्कअराउंड पाते हैं।

Answer 3

Feeela सही है, लेकिनdivयदि आप अपनीdivस्थिति को इस तरहउल्टा करते हैं, तो आपएक माता-पिता कोअनुबंधितकर सकते हैं/ बाल तत्व तक विस्तारपा सकते हैं:

.parent{
    postion: absolute;
    /* position it in the browser using the `left`, `top` and `margin` 
       attributes */
}

.child{
    position: relative;
    height: 100%;
    width: 100%;

    overflow: hidden;
    /* to pad or move it around using `left` and `top` inside the parent */
}

यह आपके लिए काम करना चाहिए।

Answer 4

इसे हल करने का एक बहुत ही सरल तरीका है।

आपको डिस्प्ले के साथ सापेक्ष डिव में चाइल्ड 1 और चाइल्ड 2 की सामग्री को केवल डुप्लिकेट करना है: पैरेंट डिव में कोई भी नहीं। चाइल्ड 1_1 और चाइल्ड 2_2 कहें। शीर्ष पर child2_2 और निचले भाग में child1_1 रखें।

जब आपका jquery (या जो भी) निरपेक्ष div को कॉल करता है, तो बस प्रदर्शन के अनुसार सापेक्ष div (child1_1 या child2_2) सेट करें: ब्लॉक और दृश्यता: छिपा हुआ। रिश्तेदार बच्चा अभी भी अदृश्य होगा लेकिन माता-पिता के तलाक को उच्चतर बना देगा।

Comments

इससे मुझे सही दिशा में सोच मिली। मेरे मामले में सेटिंग डिस्प्ले: "आकार धारक" सामग्री में से कोई भी div को आकार नहीं देता है, हालांकि अस्पष्टता: 0, div को सही ढंग से आकार देता है और इसके लिए किसी अतिरिक्त jquery की आवश्यकता नहीं होती है।

— एडेंसोरबिन

जिस तरह से मैंने दो डुप्लिकेट डिव प्राप्त करने के लिए किया था, पहला एक स्थिति के साथ दिखाई देने वाली सामग्री है और दूसरा एक दृश्यता छिपा हुआ है जो माता-पिता को सही ऊंचाई के साथ रखता है जो सभी ठीक काम करता है = डी

— डिओगो गार्सिया

Answer 5

शुद्ध जावास्क्रिप्ट के साथ, आपको बस getComputedStyle () पद्धति का उपयोग करके अपने static positionबच्चे के तत्व की ऊंचाई को पुनः प्राप्त करना होगा, फिर सेट करें कि HTMLElement.style संपत्ति का उपयोग करके उसी बच्चे के लिए मान प्राप्त करें ।.child1padding-top

---

उपरोक्त कोड स्निपेट की जाँच करें और चलाएं जो मैंने ऊपर वर्णित किया है:

/* JavaScript */

var child1 = document.querySelector(".child1");
var parent = document.getElementById("parent");

var childHeight = parseInt(window.getComputedStyle(child1).height) + "px";
child1.style.paddingTop = childHeight;

/* CSS */

#parent { position: relative; width: 100%; }
.child1 { width: auto; }
.child2 { width: 145px; position: absolute; top: 0px; bottom: 0px; }
html, body { width: 100%;height: 100%; margin: 0; padding: 0; }

<!-- HTML -->

<div id="parent">
    <div class="child1">STATIC</div>
    <div class="child2">ABSOLUTE</div>
</div>

Answer 6

मुझे भी ऐसी ही समस्या का समाधान करना पड़ा था। इसे हल करने के लिए (शरीर, दस्तावेज़ या खिड़की का उपयोग करके iframe की ऊँचाई की गणना करने के बजाय) मैंने एक div बनाया जो पूरे पेज की सामग्री (उदाहरण के लिए एक id = "पेज" के साथ एक div) को लपेटता है और फिर मैंने इसकी ऊंचाई का उपयोग किया।

Answer 7

यह सवाल फ्लेक्सबॉक्स से पहले 2012 में पूछा गया था। आधुनिक सीएसएस का उपयोग करके इस समस्या को हल करने का सही तरीका एक मीडिया क्वेरी और मोबाइल उपकरणों के लिए एक फ्लेक्स कॉलम रिवर्सल है। किसी पूर्ण स्थिति की आवश्यकता नहीं है।

https://jsfiddle.net/tnhsaesop/vjftq198/3/

HTML:

<div class="parent">
  <div style="background-color:lightgrey;">
    <p>
      I stay on top on desktop and I'm on bottom on mobile
    </p>
  </div>
  <div style="background-color:grey;">
    <p>
      I stay on bottom on desktop and I'm on bottom on mobile
    </p>
  </div>
</div>

सीएसएस:

.parent {
  display: flex;
  flex-direction: column;
}

@media (max-width: 768px) {
  .parent {
    flex-direction: column-reverse;
  }
}

Answer 8

मैं एक और समाधान के साथ आया, जिसे मैं प्यार नहीं करता, लेकिन काम पूरा हो गया।

मूल रूप से बाल तत्वों को इस तरह से डुप्लिकेट करें कि डुप्लिकेट दिखाई न दें।

<div id="parent">
    <div class="width-calc">
        <div class="child1"></div>
        <div class="child2"></div>
    </div>

    <div class="child1"></div>
    <div class="child2"></div>
</div>

सीएसएस:

.width-calc {
    height: 0;
    overflow: hidden;
}

यदि उन बाल तत्वों में थोड़ा मार्कअप है, तो प्रभाव छोटा होगा।

Comments

यह खोज इंजन रैंकिंग के साथ कुछ समस्याएं दे सकता है

— मचचेडग

Answer 9

"आप या तो निश्चित ऊंचाइयों का उपयोग करते हैं या आपको जेएस को शामिल करने की आवश्यकता है।"

यहाँ जेएस उदाहरण है:

---------- jQuery जेएस उदाहरण --------------------

    function findEnvelopSizeOfAbsolutelyPositionedChildren(containerSelector){
        var maxX = $(containerSelector).width(), maxY = $(containerSelector).height();

        $(containerSelector).children().each(function (i){
            if (maxX < parseInt($(this).css('left')) + $(this).width()){
                maxX = parseInt($(this).css('left')) + $(this).width();
            }
            if (maxY < parseInt($(this).css('top')) + $(this).height()){
                maxY = parseInt($(this).css('top')) + $(this).height();
            }
        });
        return {
            'width': maxX,
            'height': maxY
        }
    }

    var specBodySize = findEnvelopSizeOfAbsolutelyPositionedSubDivs("#SpecBody");
    $("#SpecBody").width(specBodySize.width);
    $("#SpecBody").height(specBodySize.height);

Comments

यह उत्तर प्रस्तावित समाधान की बेहतर व्याख्या और दिशा से लाभान्वित हो सकता है।

— दानीदेव

Answer 10

एक बहुत ही सरल हैक है जो इस समस्या को ठीक करता है

यहाँ एक कोडैंडबॉक्स है जो समाधान दिखाता है: https://codesandbox.io/s/00w06z1n5l

एचटीएमएल

<div id="parent">
  <div class="hack">
   <div class="child">
   </div>
  </div>
</div>

सीएसएस

.parent { position: relative; width: 100%; }
.hack { position: absolute; left:0; right:0; top:0;}
.child { position: absolute; left: 0; right: 0; bottom:0; }

आप हैक डिव की स्थिति के साथ खेल सकते हैं ताकि यह प्रभावित हो सके कि बच्चा खुद को कहां रखता है।

यहाँ एक स्निपेट है:

html {
  font-family: sans-serif;
  text-align: center;
}

.container {
  border: 2px solid gray;
  height: 400px;
  display: flex;
  flex-direction: column;
}

.stuff-the-middle {
  background: papayawhip
    url("https://camo.githubusercontent.com/6609e7239d46222bbcbd846155351a8ce06eb11f/687474703a2f2f692e696d6775722e636f6d2f4e577a764a6d6d2e706e67");
  flex: 1;
}

.parent {
  background: palevioletred;
  position: relative;
}

.hack {
  position: absolute;
  left: 0;
  top:0;
  right: 0;
}
.child {
  height: 40px;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

    <div class="container">
      <div class="stuff-the-middle">
        I have stuff annoyingly in th emiddle
      </div>
      <div class="parent">
        <div class="hack">
          <div class="child">
            I'm inside of my parent but absolutely on top
          </div>
        </div>
        I'm the parent
        <br /> You can modify my height
        <br /> and my child is always on top
        <br /> absolutely on top
        <br /> try removing this text
      </div>
    </div>

Answer 11

अब ऐसा करने का एक बेहतर तरीका है। आप नीचे की संपत्ति का उपयोग कर सकते हैं।

    .my-element {
      position: absolute;
      bottom: 30px;
    }

Comments

यह तभी काम करेगा जब आप माता-पिता की अंतिम ऊंचाई को जानते हैं, जो आप नहीं करते हैं

— machineaddict

Answer 12

यह वैसा ही है जैसा @ChrisC ने सुझाया था। यह एक निरपेक्ष तैनात तत्व का उपयोग नहीं कर रहा है, लेकिन एक रिश्तेदार। शायद आपके काम आ सके

<div class="container">
  <div class="my-child"></div>
</div>

और इस तरह आपका सीएसएस:

.container{
    background-color: red;
    position: relative;
    border: 1px solid black;
    width: 100%;
}

.my-child{
    position: relative;
    top: 0;
    left: 100%;
    height: 100px;
    width: 100px;
    margin-left: -100px;
    background-color: blue;
}

https://jsfiddle.net/royriojas/dndjwa6t/

Answer 13

अगले दृष्टिकोण पर भी विचार करें:

सीएसएस:

.parent {
  height: 100%;
}
.parent:after {
  content: '';
  display: block;
}

इसके अलावा, जब से आप विभाजन को सीएसएस ग्रिड पर विचार करने की कोशिश कर रहे हैं

Answer 14

निरपेक्ष दृश्य अपने आप को निकटतम पूर्वज के विरुद्ध स्थिति देता है जो वैधानिक रूप से तैनात नहीं है ( position: static), इसलिए यदि आप किसी दिए गए माता-पिता के विरुद्ध एक निरपेक्ष दृष्टिकोण चाहते हैं, तो माता-पिता positionको relativeऔर बच्चे को माता-पिता के लिए निर्धारित positionकरें।absolute

Answer 15

यह कोशिश करो, यह मेरे लिए काम किया गया था

.child {
    width: 100%;
    position: absolute;
    top: 0px;
    bottom: 0px;
    z-index: 1;
}

यह बच्चे की ऊंचाई को माता-पिता की ऊंचाई पर सेट करेगा

Comments

महान समाधान!

— अलेक्जेंडर चेरनिचेंको

@AlexanderCherednichenko वास्तव में नहीं, यह प्रश्न के बिंदु को याद करता है।

— विकीविल्स