Hủy bỏ một phần của biên giới

Question

Tôi có một widget mà không có thể được bọc trong div khác.

Câu hỏi của tôi là làm thế nào để loại bỏ biên giới từ tiêu đề/title-bar nhưng vẫn giữ nó xung quanh phần còn lại của DIV? Ví dụ bên dưới.

Thêm đường viền vào chỉ .không thể thực hiện được vì nếu người dùng cuối thêm đệm vào phần cuối/đầu của số thứ div của tiện ích.

<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

Bạn có thể đạt được kết quả bởi CSS2 chỉ, chỉ cần thêm biên giới với body, không phải toàn bộ 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.