सीएसएस ऊंचाई: उपलब्ध स्थान भरें। कोई तय ऊंचाइयों

तो मैं निम्नलिखित संरचनासीएसएस ऊंचाई: उपलब्ध स्थान भरें। कोई तय ऊंचाइयों

<div id="container"> 
    <div id="head"></div> 
    <div id="body"></div> 
    <div id="foot"></div> 
</div>

मैं केवल समझाने के उद्देश्य से आईडी का उपयोग कर रहा है, तो यह और भी जरूरी एक पूरे पृष्ठ के लिए नहीं है।

मैं चाहता हूं कि मेरा कंटेनर एक निश्चित आकार निर्दिष्ट करे ... या कोई सापेक्ष आकार, कोई फर्क नहीं पड़ता। तर्क के लिए चलिए 300px ऊंचाई कहते हैं। overflow: hidden

मैं सिर/पैर को अपने भीतर सामग्री फिट करने के लिए विस्तार करना चाहता हूं, इसलिए height: auto पर्याप्त है।

मैं चाहता हूं कि शरीर सिर और पैर के बीच शेष जगह फिट करने के लिए विस्तार करे। यदि सामग्री बहुत बड़ी है, तो स्क्रॉल करें (overflow: auto)।

height: 100%#body पर काम नहीं करता है क्योंकि तब यह 300px की ऊंचाई को माता-पिता की तरह प्राप्त करता है और पैर का हिस्सा और पैरर से बाहर निकलता है।

सिर और पैर position: absolute होने से काम नहीं होता है क्योंकि उन्हें दस्तावेज़ प्रवाह से बाहर ले कर, #body की कुछ सामग्री छिपी हुई है। इसे ठीक करने के लिए हम पैडिंग-टॉप/नीचे का उपयोग कर सकते हैं लेकिन हम #body पर padding-top: xxpx/padding-bottom: xxpx सेट नहीं कर सकते हैं क्योंकि हम सिर/पैर की आवश्यक ऊंचाई नहीं जानते हैं, इसलिए वे height: auto क्यों हैं।

संपादित करें:

मैं एक मेज जहां #bodyheight: 100% है में कंटेनर/सिर/शरीर/पैर परिवर्तित करने की कोशिश की। यह बहुत अच्छा काम करता है सिवाय इसके कि #body स्क्रॉल नहीं करेगा अगर सामग्री बहुत बड़ी हो जाती है, बल्कि पूरी तालिका सभी सामग्री दिखाने के लिए फैली हुई है। यह वांछित व्यवहार नहीं है क्योंकि मुझे #body स्क्रॉल करने की आवश्यकता है, #content या उसके माता-पिता नहीं।

कोई सुझाव?

स्रोत

2010-06-30 Dmitriy Likhten

क्या आप सिर और पाद लेख के बीच फिट करने के लिए शरीर की पृष्ठभूमि सेट करना चाहते हैं? – galambalazs

आप # कंटेनर को # बॉडी के पीछे के रूप में सोचकर पूरा करने की कोशिश कर रहे हैं कि आप शायद "फर्जी" उपस्थिति कर सकते हैं। यदि # कंटेनर को ट्रिफल नहीं किया जा सकता है तो आप अतिरिक्त पैरेंट तत्व में भी फेंक सकते हैं। आप जो भी कर रहे हैं उस पर निर्भर करता है। – reisio

@reisio: नहीं कर सकता। समस्या यह है कि मैं नीचे पैर, और शीर्ष पर सिर, और शरीर को अंतरिक्ष भरने के लिए चाहते हैं। मुझे #container का उपयोग #body की पृष्ठभूमि के रूप में नहीं करना है, लेकिन समस्या सिर/पैर की स्थिति और शरीर स्क्रॉल कर रही है। पृष्ठभूमि रंग की तुलना में सामग्री के बारे में और अधिक। –

एकमात्र समाधान जो तुरंत दिमाग में आता है वह प्रदर्शित होता है: टेबल-सेल, हालांकि आप यानी & यानी 7 में समर्थन की कमी की समस्या में भाग लेते हैं। शायद अच्छे ब्राउज़र के लिए नियम प्रदान करना, और कुछ जावास्क्रिप्ट यानी ऊंचाई के लिए अंतर की गणना करने के लिए?

संपादित करें: - jQuery का उपयोग कर की गणना के लिए ऑफसेट

यहाँ एक और तरीका है। ध्यान रखें कि यह सिर्फ एक त्वरित & गंदे प्रयास है - इसे ब्राउज़र परीक्षण करने की आवश्यकता होगी और आप कुछ सरल त्रुटि हैंडलिंग इत्यादि चाहते हैं, लेकिन यह एक प्रारंभिक बिंदु हो सकता है।

सुनिश्चित नहीं है कि जावास्क्रिप्ट जिस तरह से जाना है, लेकिन मैं इसे शुद्ध सीएसएस में नहीं देख पा रहा हूं।

मैं वर्गों के लिए आईडी बदल आप इतनी है कि कई 'fixedHeight' बॉक्स हो सकता है:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Untitled Document</title> 
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script> 

<script> 

$(function() { 
    $(".fixedHeight").each(function() { 
    var head = $(this).find(".head"); 
    var body = $(this).find(".body"); 
    var foot = $(this).find(".foot"); 
    body.css("margin-top", head.height()).css("margin-bottom", foot.height());  
    }); 
}); 


</script> 

<style> 

.head { 
    background-color: red; 
    position: absolute; 
    top: 0; 
    width:100%; 
} 
.body { 
    background-color: blue; 
    color: white; 
    overflow: auto; 
    position:absolute; 
    top:0; 
    bottom:0; 
    width:100%; 
    margin:2.5em 0; 
} 
.foot { 
    background-color: green;  
    position: absolute; 
    bottom: 0; 
    width:100%; 
} 
.container { 
    background-color: #aaa; 
    border: 10px solid orange; 
    height: 300px; 
    width: 30%; 
    position: absolute; 
} 


</style> 

</head> 

<body> 

<div class="container fixedHeight"> 
    <div class="head"> 
    <h1>Header Content</h1> 
    </div> 
    <div class="body"> 
    <p>Body Content</p> 
    <p>Body Content</p> 
    <p>Body Content</p> 
    <p>Body Content</p> 
    <p>Body Content</p> 
    <p>Body Content</p> 
    </div> 
    <div class="foot"> 
    <p>Footer Content</p> 
    </div> 
</div> 


</body> 
</html>

स्रोत

2010-06-30 21:41:12 DHuntrods

यानी 7 समर्थन की आवश्यकता है। क्या डॉस डिस्प्ले: टेबल-सेल का मतलब है? क्या टेबल-सेल जितना संभव हो उतना स्थान लेता है जितना संभव है? –

यह समाधान काम नहीं करता है। इसे सही तरीके से प्रदर्शित करने के लिए मुझे 'डिस्प्ले: टेबल' के साथ एक पैरेंट div होना चाहिए, हालांकि एक तालिका ऊंचाई संपत्ति का सम्मान नहीं करती है। इसलिए यदि मैं तालिका की 'ऊंचाई' को 300px पर सेट करता हूं तो यह तब तक विस्तारित होगा जब तक आवश्यक हो। यहां तक कि 'अधिकतम ऊंचाई' के साथ भी इसका सम्मान नहीं होता है। मैंने 'डिस्प्ले: टेबल-पंक्ति' और बॉडी को 'डिस्प्ले: टेबल-सेल' और कंटेनर के रूप में 'डिस्प्ले: टेबल' के रूप में बनाने की कोशिश की और यह पूरी तरह से काम करता है, जब तक मुझे स्क्रॉल करने के लिए शरीर की आवश्यकता नहीं होती है, जिस बिंदु पर यह बस बढ़ने लगती है । –

बेशक - एक टेबल पर ऊंचाई हमेशा न्यूनतम ऊंचाई का तात्पर्य है! शायद यदि आप जो कुछ करने की कोशिश कर रहे हैं उसके लिए आपने कुछ अतिरिक्त संदर्भ और सामग्री प्रदान की है? मुझे यकीन नहीं है कि यह सटीक व्यवस्था पूरी तरह से सीएसएस में की जा सकती है, लेकिन शायद एक वैकल्पिक दृष्टिकोण समस्या को हल करेगा? – DHuntrods

ठीक इतने heres अनुसंधान का एक सा रहा सॉर्ट-के इस काम के प्राप्त करने के लिए के माध्यम से मिला है।

#head { 
    background-color: red; 
    width: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 
#body { 
    background-color: blue; 
    color: white; 
    border: 0 none; 
    overflow: auto; 
    height: 100%; 
    padding-top: 2.5em; 
    padding-bottom: 2.5em; 
    box-sizing: border-box; 
    webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
} 
#foot { 
    background-color: green; 
    width: 100%; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
} 
#container { 
    background-color: #aaa; 
    border: 10px solid orange; 
    height: 300px; 
    width: 30%; 
    overflow: show; 
    position: absolute; 
}

इसमें यह माना जाता रहा #head और #foot के आकार की गणना और #body के उचित स्थान की गद्दी के लिए कुल आकार सेट कर सकते हैं।इससे शरीर की सामग्री उस क्षेत्र से बाहर हो जाएगी जो # पूर्ण/# फुट अपनी पूर्ण स्थिति के कारण कब्जा कर लेती है। यहां समस्या यह है कि स्क्रॉल बार आंशिक रूप से ऊपर/नीचे पर काट दिया जाता है क्योंकि केवल सामग्री को स्थानांतरित किया जाता है, स्क्रॉल बार नहीं होता है।

चौड़ाई के लिए, यह वास्तव में एक मुद्दा नहीं है।

स्रोत

2010-07-02 18:14:10

मैंने हाल ही में ऐसी स्थिति में इस मुद्दे में भाग लिया जहां मुझे कंटेनर की कुल ऊंचाई (जैसे दिमित्री के जवाब मानते हैं) को भी नहीं पता था। मान लें कि #head और #foot की ऊंचाई क्रमशः 50 और 25 है। यहां बताया गया है कि मैंने इसे हल किया:

#body { 
    top: 25px; 
    bottom: 50px; 
    position: absolute; 
} 

#foot { 
    position: absolute; 
    bottom: 0; 
}

स्रोत

2015-09-25 21:23:42 mightybyte

सीएसएस ऊंचाई: उपलब्ध स्थान भरें। कोई तय ऊंचाइयों

उत्तर

संबंधित मुद्दे