css - 不能让 div 填充除边框以外的其他 div

Question

嘿，所以我正在尝试创建一个嵌套的 div 元素，以便它位于另一个 div 元素内，但完全填满它的父元素，除了围绕它的 30 像素左右的完美边框，像这样 http://s23.postimg.org/su2o83m7v/div.png

我已经尝试使用 css 进行填充、边距和定位，但似乎无法保持其宽度和填充的底部，有什么建议吗？

Answer 1

解决这个问题的两种方法。

1) 盒子大小

.OuterDiv {
    box-sizing:border-box;
    border:30px solid green;
}

.InnerDiv {
    background-color:red;
    border:4px solid blue;
}

Here is the jsFiddle for it.

2)绝对位置

.OuterDiv {
    position:relative;
    height:100px;
    background-color:green;
}

.InnerDiv {
    position:absolute;
    top:30px;
    left:30px;
    right:30px;
    bottom:30px;
    background-color:red;
    border:4px solid blue;
}

Here is the jsFiddle for that.

就个人而言，我会在一周中的任何一天选择第一个选项(更容易维护，而且实际上你应该对所有内容使用 box-sizing:border-box;)，但是如果你迫切需要 IE7 支持，第二个可以在那里工作，而第一个只能支持 IE8+。