मार्जिन शीर्ष 100% - जनक की ऊंचाई डिव

Question

मैं निर्माण करने के लिए निम्नलिखित लेआउट है ऊपर से 100% तैनात होना

असल में, मैं हैडर ऊंचाइयों अलग-अलग ऊंचाई बदलती के तीन divs की जरूरत है उनके माता-पिता के, हेडर की ऊंचाई घटाएं। मैं इसे jQuery के साथ कर सकता हूं, लेकिन यह एक उत्तरदायी साइट है, इसलिए मैं इसे यथासंभव सीएसएस-आधारित के रूप में रखना चाहता हूं (अन्यथा मुझे $(window).resize() से निपटना होगा, जो मेरे अनुभव में अविश्वसनीय हो सकता है)।

क्या यह संभव है, शायद CSS3 calc सुविधा का उपयोग कर?

धन्यवाद।

Answer 1

तो आप सामग्री (नारंगी कंटेनर) जोड़ने की कोशिश कर सकते नीले कंटेनर बंद नीचे करने के लिए छड़ी (अपने html संरचना की निर्भर करता है आप नारंगी कंटेनर में position: absolute, या margin-top उपयोग कर सकते हैं) ।

आप नारंगी कंटेनर के अंदर हेडर (हरा) कंटेनर डाल सकते हैं और इसे पूर्ण शीर्ष -100% (नारंगी स्थिति absolute या relatve) रखना चाहिए।

यदि आप अपने एचटीएमएल को जोड़ देंगे तो इससे अधिक सटीक समाधान मिलना आसान होगा।

JSFIDDLE with an example

सीएसएस:

.box{ 
    background: #f00; 
    height: 150px; 
    width: 100%; 
    position: relative; 
    padding: 20px; 
    padding-bottom: 0; 
} 
.column{ 
    background: #0f0; 
    width: 30%; 
    position: relative; 
    top: 100% 
} 
.header{ 
    position: absolute; 
    bottom: 100%; 
    width: 100%; 
    background: #00f; 
} 

HTML:

<div class="box"> 
    <div class="column"> 
     <div class="header"> 
      header 
     </div> 
     aaaaaaa<br/> 
     aaaaaa 
    </div>  
</div> 

Answer 2

निम्नलिखित CSS नियम का प्रयास करें: height: calc(100% - header_height);

Answer 3

मैं इस समाधान है (जब तक वे फिट कॉलम के किसी भी संख्या के लिए काम करता है):

1. केंद्र के लिए इनलाइन ब्लॉक का उपयोग करें lign परिणाम
2. उपयोग नीले बॉक्स के नीचे के साथ ब्लॉक संरेखित करने के लिए सापेक्ष स्थिति (की आवश्यकता है शीर्ष खड़ी संरेखित)
3. उन्हें निरपेक्ष स्थिति बनाकर प्रवाह से बाहर हरे रंग के ब्लॉक ले जाएँ (इस प्रवाह में नारंगी बॉक्स छोड़ देता है जो नीले बॉक्स के नीचे)

body { 
 
    font: medium monospace; 
 
} 
 
.blue { 
 
    background: #AAF; 
 
    height: 12em; 
 
    text-align: center; 
 
} 
 
.helper { 
 
    display: inline-block; 
 
    width: 10em; 
 
    vertical-align: top; 
 
    position: relative; 
 
    top: 100%; 
 
} 
 
.green { 
 
    background: #CFC; 
 
    position: absolute; 
 
    bottom: 100%; 
 
    left: 0; 
 
    right: 0; 
 
} 
 
.orange { 
 
    background: #FCA; 
 
}

<div class="blue"> 
 
    <div class="helper"> 
 
    <div class="green"> 
 
     1<br/>2 
 
    </div> 
 
    <div class="orange"> 
 
     1<br/>2<br/>3 
 
    </div> 
 
    </div> 
 
    <div class="helper"> 
 
    <div class="green"> 
 
     1<br/>2<br/>3 
 
    </div> 
 
    <div class="orange"> 
 
     1<br/>2<br/>3<br/>4<br/>5 
 
    </div> 
 
    </div> 
 
    <div class="helper"> 
 
    <div class="green"> 
 
     1 
 
    </div> 
 
    <div class="orange"> 
 
     1<br/>2<br/>3<br/>4 
 
    </div> 
 
    </div> 
 
</div>