Entfernen Teil der Grenze

Question

Ich habe ein Widget, das kann nicht in einem anderen div gewickelt werden.

Meine Frage ist, wie entferne ich den Rahmen aus der Kopfzeile/Titelleiste, aber immer noch um den Rest des DIV? Beispiel unten.

Das Hinzufügen eines Rahmens zu nur .body ist nicht machbar, weil wenn ein Endbenutzer Padding am unteren/oberen Rand des Widgets hinzufügt div Dinge brechen.

<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

Sie können das Ergebnis von CSS2 nur erreichen, nur Grenzen fügen die body, nicht die ganzen widget:

.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.