1

我需要你的帮助，

div 似乎正确嵌套（左、上和右）边界对齐，但在底部似乎它们比容器 div 的长。

看这里的图片：在此处输入图像描述

这是HTML编码：

<!DOCTYPE html>
<html>
<head>
    <title>Centered Div</title>
    <style>
    body { background: #000; }
    #wrapper {
        height: 100px;
        width: 500px;
    }

    #wrapper {
        bottom: 50%;
        right: 50%;
        position: absolute;
    }

#container {
    background: rgb(230,230,230);
    left: 50%;
    padding: 10px;
    top: 50%;
    margin: 0;
    padding: 0;
    height: 100%;
    border: 1px solid red;
    height: 100%;
    position: relative;
}
#inner1 {
    height: 100%;
    border: 1px solid blue;
}
#inner2 {
    height: 100%;
    border: 1px solid green;
}

    </style>
</head>
<body>


    <div id="wrapper">
        <div id="container">

            <div id="inner1">

                <div id="inner2"></div>

            </div>

        </div>
    </div>
</body>
</html>
4

1 回答 1

3

div 被它们的边界和父 div 的边界向下推。由于未指定宽度，因此 div 将正确填充水平空间。但是由于 div 的高度设置为 100%，因此它们在顶部被边框向下推 1px。由于边框位于 div 的外侧，因此不计入高度或宽度的一部分，因此不计入height:100%.

如果将 CSS 中的宽度更改为border: 10px solid red/green/blue;.

要更正此问题，请设置和div的box-sizingCSS 属性，如下所示：#inner1#inner2

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
于 2013-09-11T16:57:04.087 回答