सीमा

Question

का हिस्सा निकालें मेरे पास एक विजेट है जो किसी अन्य div में लपेटा नहीं जा सकता है।

मेरा सवाल है कि मैं हेडर/शीर्षक-बार से सीमा को कैसे हटा सकता हूं लेकिन फिर भी इसे शेष डीवीवी के आसपास रखता हूं? नीचे उदाहरण

केवल सीमा को जोड़ना संभव नहीं है क्योंकि कोई अंत उपयोगकर्ता विजेट div चीजों के नीचे/शीर्ष पर पैडिंग जोड़ता है।

<div class="widget"> 
    <div class="header">Header Title</div> 
    <div class="body">My Content</div> 
</div> 


.widget { 
    height: 100px; 
    width: 130px; 
    border: 3px solid blue; 
    position: absolute; 
    overflow: hidden; 
} 
.header { 
    width: 100%; 
    min-height: 24px; 
    max-height: 24px; 
    display: block; 
    background-color: grey; 
    color: white; 
} 
.body { 
    width: 100%; 
    height: calc(100% - 24px); 
} 

http://jsfiddle.net/botwfngv/

Answer 1

.widget { 
    height: 100px; 
    width: 130px; 
    border: 3px solid blue; 
    position: absolute; 
} 
.header { 
    width: 100%; 
    min-height: 24px; 
    max-height: 24px; 
    display: block; 
    background-color: grey; 
    color: white; 
    margin: -3px; 
    padding: 3px; 
} 
.body { 
    width: 100%; 
    height: calc(100% - 24px); 
} 

http://jsfiddle.net/botwfngv/2/

Answer 2

आप केवल, बस body, न कि पूरी widget बॉर्डर जोड़ सीएसएस 2 से परिणाम प्राप्त कर सकते हैं:

.widget { 
    width: 130px; 
    position: absolute; 
    padding: 25px; 
} 

.header { 
    width: 100%; 
    min-height: 24px; 
    max-height: 24px; 
    display: block; 
    background-color: grey; 
    color: white; 
    padding: 3px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
} 

.body { 
    width: 100%; 
    height: 100px; 
    border: 3px solid blue; 
    border-top-width: 0; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    top: 30px; 
} 

JSFiddle Demo।