css - 试图让 div 的内容正确缩放到它的大小

Question

我用一组 div 创建了一个 AND 逻辑门。我希望它们与最外面的.gatediv 的大小一起缩放。我希望它是 100% 的.gatediv 的宽度和高度。

我的东西几乎可以工作了，与门高 2 个像素，宽度有点不稳定。我认为宽度与.outerdiv 上的填充有关，但我不确定更好的方法。

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%;
}