DIV को लंबवत पृष्ठ के शेष को भरें?

Question

मेरे पास एक Google मानचित्र ऐप है जो अधिकांश पृष्ठ लेता है। हालांकि, मुझे मेनू बार के लिए स्थान की शीर्षतम पट्टी को आरक्षित करने की आवश्यकता है। नक्शा div स्वचालित रूप से अपनी ऊर्ध्वाधर जगह कैसे भर सकता है? height: 100% काम नहीं करता है क्योंकि शीर्ष बार पृष्ठ के नीचे नक्शे को धक्का देगी।

+--------------------------------+ 
|  top bar (n units tall) | 
|================================| 
|   ^    | 
|    |     | 
|    div    | 
|  (100%-n units tall)  | 
|    |     | 
|    v     | 
+--------------------------------+ 

Answer 1

आप पूर्ण स्थिति का उपयोग कर सकते हैं।

एचटीएमएल

<div id="content"> 
    <div id="header"> 
     Header 
    </div> 
    This is where the content starts. 
</div> 

सीएसएस

BODY 
{ 
    margin: 0; 
    padding: 0; 
} 
#content 
{ 
    border: 3px solid #971111; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background-color: #DDD; 
    padding-top: 85px; 
} 
#header 
{ 
    border: 2px solid #279895; 
    background-color: #FFF; 
    height: 75px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
} 

स्थिति #content बिल्कुल और शीर्ष निर्दिष्ट करके, सही, नीचे, और छोड़ दिया गुण, आप एक div पूरे व्यूपोर्ट लेने मिल ।

फिर आप padding-top#content पर सेट करें = = #header की ऊंचाई।

अंत में, #header#content के अंदर रखें और इसे बिल्कुल सही (शीर्ष, बाएं, दाएं और ऊंचाई निर्दिष्ट करें) रखें।

मुझे यकीन नहीं है कि यह ब्राउज़र अनुकूल है। अधिक जानकारी के लिएthis article at A List Apart देखें।

Answer 2

उम्म, आप html, body { height: 100%; } जोड़ने के लिए, इस के बाद, एक relative तत्व, min-height: 100%

इस के बाद से, IE6

<!--[if lt IE 7]> 
<style media="screen" type="text/css"> 
    MyAutoheightElement 
    { 
     height: 100%; 
    } 
</style> 
<![endif]--> 

के लिए यह हर ब्राउज़र में आपकी साइट 100% ऊंचाई दे देंगे की जरूरत है।
इसे आज़माएं! मुझे आशा है कि यह मदद करता है :)

Answer 3

तरह से यह करने के लिए, जाहिरा तौर पर, ऑनलोड और onresize घटनाओं पर नजर रखने के लिए JavaScript का उपयोग करने के लिए और प्रोग्राम के रूप में इतनी तरह भरने div आकार परिवर्तन है: jQuery

का उपयोग करना:

function resize() { 
    $("#bottom").height($(document).height() - $('#top').height()); 
} 

सादे जावास्क्रिप्ट का उपयोग करना:

function resize() { 
    document.getElementById("bottom").style.height = (document.body.clientHeight - headerHeight) + "px"; 
} 

संपादित करें: और फिर window करने के लिए इन बाँध ओ bject।

Answer 4

मैं आपको jquery-layout प्लगइन का प्रयास करने की सलाह देता हूं। आप लिंक पर डेमो और उदाहरणों का एक गुच्छा देखेंगे।

मैं अगर तुम JQuery की अवधारणाओं या कुछ अन्य जावास्क्रिप्ट सहायक ढांचे, Prototype.js या Mootools तरह से परिचित हैं, लेकिन यह एक महत्वपूर्ण विचार उनमें से एक का उपयोग करने के पता नहीं है। वे प्रोग्रामर से अधिकतर ब्राउज़र से संबंधित चाल छिपा रहे हैं और उनके पास UI, DOM मैनिपुलेशन इत्यादि के लिए कई उपयोगी एक्सटेंशन हैं।

Answer 5

आप आप हेडर तत्व को जानने के बिना कर सकते हैं calculate the page position of the div element हैं:

function resize() { 
    var el = $("#bottom"); 
    el.height($(document).height() - el.offset().top); 
} 

Answer 6

var sizeFooter = function(){ 
    $(".webfooter").css("padding-bottom", "0px").css("padding-bottom", $(window).height() - $("body").height()) 
} 
$(window).resize(sizeFooter); 

Answer 7

एक अन्य समाधान नहीं दिया जावास्क्रिप्ट का उपयोग करता है CSS3 के बजाय। जो एक ही बात करने के लिए इस्तेमाल किया जा सकता एक calc() फ़ंक्शन अब नहीं है:

एचटीएमएल

<div id="content"> 
    <div id="header"> 
     Header 
    </div> 
    <div id="bottom"> 
     Bottom 
    </div> 
</div> 

CSS3

#content { 
    height: 300px; 
    border-style: solid; 
    border-color: blue; 
    box-sizing: border-box; 
} 
#header { 
    background-color: red; 
    height: 30px; 
} 
#bottom { 
    height: calc(100% - 30px); 
    background-color: green; 
} 

यहाँ jsfiddle

है आप int के लिए box-sizing: border-box शैली का उपयोग करना भी चाह सकते हैं एरियर divs क्योंकि यह पैडिंग और सीमाओं के माता-पिता divs के बाहर poking की समस्याओं से छुटकारा पा सकता है।