試圖讓一個div的內容的比例適當，以它的大小

Question

我已經有了一個與邏輯門與一組的div創建的。我希望他們按照最外層.gate div的大小進行縮放。我希望它是.gate div的寬度和高度的100％。

我已經有東西幾乎工作，與門是2像素高，寬度有點過分。我認爲，寬度與在.outer格填充這樣做，但我不知道一個更好的方式來做到這一點。

jsfiddle

HTML

<div class="gate"> 
    <div class="outer"> 
     <div class="inner"> 
      <div class="andInA"></div> 
      <div class="andInB"></div> 
      <div class="andOutA"></div> 
      <div class="andLeft"></div> 
      <div class="andRight"></div> 
     </div> 
    </div> 
</div> 

CSS

.gate { 
    position: relative; 
    width: 150px; 
    height: 100px; 
    background-color: #ccc; 
} 
.outer { 
    position: relative; 
    padding: 0 30% 0 0; 
    height: 100%; 
} 
.inner { 
    position: relative; 
    margin: 0 20% 0 20%; 
    width: 100%; 
    height: 100%; 
} 
.gate .andLeft { 
    position: absolute; 
    left: 0px; 
    height: 100%; 
    width: 45%; 
    border-top: 1px solid black; 
    border-bottom: 1px solid black; 
    border-left: 1px solid black; 
    border-right: 0px solid black; 
} 
.gate .andRight { 
    position: absolute; 
    right: 0px; 
    height: 100%; 
    width: 75%; 
    border-top: 1px solid black; 
    border-bottom: 1px solid black; 
    border-left: 0px solid black; 
    border-right: 1px solid black; 
    border-radius: 0% 100% 100% 0%; 
} 
.andInA { 
    position: absolute; 
    top: 25%; 
    margin-left: -20%; 
    width: 20%; 
    height: 1px; 
    border-top: 1px solid black; 
} 
.andInB { 
    position: absolute; 
    top: 75%; 
    margin-left: -20%; 
    width: 20%; 
    height: 1px; 
    border-bottom: 1px solid black; 
} 
.andOutA { 
    position: absolute; 
    top: 50%; 
    right: 0px; 
    margin-right: -20%; 
    width: 20%; 
    height: 1px; 
    border-top: 1px solid black; 
} 

Answer 1

使用box-sizing屬性：

* { 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
} 

http://jsfiddle.net/eNT2d/3/

Answer 2

減少你的內心高度，並增加你的內心大小2％。

.inner { 
    position: relative; 
    margin: 0 20% 0 20%; 
    width: 102%; 
    height: 98%; 
}