trừ 20 pixel ở phía trên và dưới của div

Question

Là một xương trần ví dụ tôi có những 2 divs thực sự đơn giản:

(một màu xanh lá cây nằm bên trong một màu đỏ)

Bây giờ như thế nào tôi có thể trừ 20 pixel từ dưới cùng và phần đầu của div màu xanh lá cây không?

html:

<div id="container"> 
    <div id="rows"> 
    </div>  
</div> 

css:

#container { 
    width: 200px; 
    height: 300px; 
    background: red; 
} 

#rows { 
    width: 50%; 
    height: 100%; 
    /* margin-top: 20px; 
     margin-bottom: 20px; */ 

    /* padding-top: 20px; 
    padding-bottom: 20px; */  

/*  top: 20px; 
    bottom: 20px; 
    height: auto; */ 

    background: green; 

} 

http://jsfiddle.net/clankill3r/2L6c2bLf/1/

Answer 1

Dưới đây là một cách để làm điều đó mà không cần thêm padding để div cha mẹ hoặc sử dụng một calc trong div đứa trẻ.

JSFIDDLE

#container { 
    width: 200px; 
    height: 300px; 
    background: red; 
    position: relative; 
} 
#rows { 
    position: absolute; 
    width:50%; 
    top: 20px; 
    bottom: 20px; 
    background: green; 
} 

Answer 2

Thêm padding để #container

padding: 20px 0px; 

Sửa:

theo đề nghị của @ Adam bạn nên chứa cũng

box-sizing: border-box; 

để stylesheet nếu bạn muốn giữ hộp chiều cao

Answer 3

Đây có thể là giải pháp:

height: calc(100% - 40px); 

JSFiddle

Một giải pháp khác là

padding:20px 0px; 
box-sizing:border-box; 

cho vùng chứa của bạn. box-sizing:border-box; duy trì sự thay đổi chiều cao của vùng chứa.

Answer 4

Dưới đây là một giải pháp:

#rows { 
    width: 50%; 
    height: 260px; 
    margin-top: 20px; 
    margin-bottom: 20px; 
    float: left; 
    background: green; 
} 

http://jsfiddle.net/2L6c2bLf/5/