Question

嘿所以我正在尝试创建一个嵌套的div元素，以便它位于另一个div元素内但完全填满其父元素，除了围绕它的完美边框，大约30 px左右像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 +。

Answer 2

尝试以下代码

    <html>
     <head>
      <style>
        .outer{
         height:200px;
         width:200px;
         padding:30px;
         background-color:#ff0000;
        }
        .inner{
          height:100%;
          width:100%;
          background-color:#00FF00;
        }
      </style>
     </head>
     <body> 
       <div class="outer">
        <div class="inner">
        </div>
       </div>
     </body>
    </html>

我给外部div填充30px，休息很简单只做高度＆amp;宽度100％使用background-color以不同的方式显示div

Answer 3

我发现这也很有用

#parent
{
    border:1px solid black;
    background:#ddd;
    display:inline-block;
}

#child
{
    width:180px;
    margin:30px;
    background:grey;
}

http://jsfiddle.net/Y37su/

除了边框之外，不能让div填充另一个div

3 个答案: