पूर्ण/निश्चित बच्चों के साथ पैरेंट कंटेनर पर ऑटो ऊंचाई

Question

मैं एक स्वचालित ऊंचाई को एक div सेट करने की कोशिश कर रहा हूं जिसमें 2 बच्चे तत्व होते हैं, जो निश्चित और बिल्कुल respecitvely स्थित हैं।

मैं चाहता हूं कि मेरे माता-पिता के कंटेनर की ऑटो ऊंचाई हो लेकिन मुझे पता है कि यह मुश्किल है क्योंकि बाल तत्वों को उनके ढांचे के साथ पृष्ठ संरचना से बाहर निकाला जाता है।

मैंने अपने माता-पिता div को ऊंचाई निर्धारित करने का प्रयास किया है, लेकिन मेरे लेआउट उत्तरदायी होने पर, जब यह मोबाइल पर स्केल हो जाता है, तो ऊंचाई वही रहती है जहां सामग्री को ढेर किया जाता है और इसलिए ऊंचाई बढ़ने की आवश्यकता होती है अपने बच्चों के साथ।

सुनिश्चित नहीं हैं कि अगर यह समझ में आता है, मैं एटीएम मुझ पर मेरे वास्तविक कोड है न लेकिन Ive समझाने की कोशिश कर रहा एक बेला बनाया ...

http://jsfiddle.net/dPCky/

Answer 1

माता पिता div height:auto उपयोग नहीं कर सकते जब उसके बच्चों पूर्ण/निश्चित स्थान पर हैं।

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

jQuery में एक उदाहरण:

var biggestHeight = 0; 
// Loop through elements children to find & set the biggest height 
$(".container *").each(function(){ 
// If this elements height is bigger than the biggestHeight 
if ($(this).height() > biggestHeight) { 
    // Set the biggestHeight to this Height 
    biggestHeight = $(this).height(); 
} 
}); 

// Set the container height 
$(".container").height(biggestHeight); 

कार्य उदाहरण http://jsfiddle.net/blowsie/dPCky/1/

Answer 2

http://jsfiddle.net/dPCky/32/ - एक समान प्रभाव float:left;

http://jsfiddle.net/dPCky/40/ का उपयोग कर - एक भी करीब अपने वांछित प्रभाव के लिए परिणाम।

यदि आप अपना एचटीएमएल बदलना चाहते हैं, तो आप ऊपर जो किया है वह कर सकते हैं।

मैं निम्नलिखित ट्यूटोरियल जो मैं अत्यधिक किसी को जो HTML/CSS में एक स्थिति समर्थक बनना चाहती है के लिए सिफारिश करेंगे से स्थिति सीखा:

http://www.barelyfitz.com/screencast/html-training/css/positioning/

मैं आम तौर पर जावास्क्रिप्ट का उपयोग कर जहां संभव हो जब किसी काम को करने से बच जाएंगे यदि आप अपने एचटीएमएल को समायोजित करने के इच्छुक हैं, तो संभावित रूप से एक सीएसएस या एचटीएमएल स्तर तय हो सकता है।

Answer 3

एक आसान तरीका है:

$(".container").height($(document).height()); 

Answer 4

कंटेनर के लिए इस ऑटो ऊंचाई कि किसी भी उपकरण और व्यूपोर्ट आकार बदलने या रोटेशन के लिए adapts का आनंद लें।

यह नाव, इनलाइन-ब्लॉक, निरपेक्ष, बच्चे के लिए मार्जिन और गद्दी सेट के साथ परीक्षण किया गया है।

<div class="autoheight" style="background: blue"> 
    <div style="position: absolute; width: 33.3%; background: red"> 
    Only 
     <div style="background: green"> 
     First level elements are measured as expected 
     </div> 
    </div> 
    <div style="float:left; width: 33.3%; background: red"> 
    One Two Three Four Five Six Seven Eight Night Ten 
    </div> 
    <div style="float:left; width: 33.3%; background: red"> 
    One Two Three Four Five Six 
    </div> 
</div> 

<script> 
function processAutoheight() 
{ 
    var maxHeight = 0; 

    // This will check first level children ONLY as intended. 
    $(".autoheight > *").each(function(){ 

     height = $(this).outerHeight(true); // outerHeight will add padding and margin to height total 
     if (height > maxHeight) { 
      maxHeight = height; 
     } 
    }); 

    $(".autoheight").height(maxHeight); 
} 

// Recalculate under any condition that the viewport dimension has changed 
$(document).ready(function() { 

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

    // BOTH were required to work on any device "document" and "window". 
    // I don't know if newer jQuery versions fixed this issue for any device. 
    $(document).resize(function() { processAutoheight(); }); 

    // First processing when document is ready 
    processAutoheight(); 
}); 
</script> 

Answer 5

पार्टी के लिए देर से एक छोटी सी, लेकिन यह किसी की मदद कर सकते हैं के रूप में यह कैसे मैं इस मुद्दे का समाधान हाल ही में जे एस के बिना है - अगर बच्चों को उनके अनुपात बनाए रखने के वे मोबाइल उपकरणों के लिए हटना के रूप में। मेरा उदाहरण संदर्भ के लिए एक jQuery.cycle स्लाइड शो उत्तरदायी बनाने से संबंधित है। अगर आप ऊपर प्राप्त करने की कोशिश कर रहे हैं तो यह सुनिश्चित करें कि इसमें एक कंटेनर के भीतर पूरी तरह से स्थित बच्चों को शामिल किया गया है जिसमें मोबाइल पर 100% पृष्ठ चौड़ाई और बड़ी स्क्रीन पर स्पष्ट आयाम हैं।

आप व्यूपोर्ट चौड़ाई इकाइयों (vw) का उपयोग करने के लिए अभिभावक की ऊंचाई सेट कर सकते हैं, इसलिए ऊंचाई डिवाइस की चौड़ाई के सापेक्ष अनुकूल है। समर्थन इन दिनों काफी व्यापक है कि अधिकांश मोबाइल डिवाइस इन इकाइयों का सही ढंग से उपयोग करेंगे, बग और आंशिक समर्थन vw से संबंधित नहीं है (बल्कि, आईई में vmin और vmax के लिए)। केवल ओपेरा मिनी अंधेरे में है।

यह जानने के बिना कि बच्चे इस उदाहरण में उत्तरदायी बिंदुओं के बीच क्या कर रहे हैं (jsfiddle में स्पष्ट ऊंचाई सेट है), आइए मान लें कि बच्चों की ऊंचाई डिवाइस की चौड़ाई के सापेक्ष अनुमानित रूप से नीचे है, जो आपको सटीक रूप से सटीक रूप से मानने की अनुमति देती है पहलू अनुपात के आधार पर ऊंचाई।

.container{ height: 75vw; }

http://caniuse.com/#feat=viewport-units

caniuse पर क्या टिप्पणी ज्ञात मुद्दा # 7 यदि आप 100vw चौड़ाई उपाय के रूप में लिए जा रहे हैं, लेकिन यहाँ हम ऊंचाई के साथ खेल रहे हैं!

Answer 6

@ Blowsie के जवाब देने के लिए संबंधित:

/** 
* Sets the height of a container to its maximum height of its children. This 
* method is required in case 
* 
* @param selector jQuery selector 
*/ 
function setHeightByChildrenHeight(selector) 
{ 
    $(selector).each(function() 
    { 
     var height = 0; 

     $(this).children("*").each(function() 
     { 
      height = Math.max(height, $(this).height()); 
     }); 

     $(this).height(height); 
    }); 
}; 

Answer 7

आप JavaScript का उपयोग नहीं करना चाहते हैं, तो आप इस सवाल का जवाब https://stackoverflow.com/a/33788333/1272106 जानकारी दे सकती है।

संक्षिप्त विवरण: एक तत्व डुप्लिकेट करें और माता-पिता का विस्तार करने के लिए छिपाने के लिए दृश्यता सेट करें।