DEMO

Question

对此我不熟悉，如果我错过了关于CSS的重要课程，那么道歉......

我正在尝试在CSS中进行一个简单的练习... div中的div，两者都按百分比调整，以便它们响应不断变化的窗口大小。这是我的代码：

<head>
    <title>Percentage Test</title>
    <style>
        html, body {
            height: 100%;
            margin: 0;
        }
        #outer {
            height: 100%;
            width: 100%;
            background-color: yellow;
        }

        #inner {
            height: 90%;
            width: 90%;
            /* margin: 5%; */
            background-color: blue;
        }
    </style>
</head>


<body>
    <div id="outer"><div id="inner"></div></div>
</body>

一切都符合我的想法;外部div占据整个屏幕，内部div占据外部div的90％。如果我添加到这个（即添加另一个内部div，更改百分比）一切都做我期望的。如果我在内部div中添加一个周围边距（在这种情况下，5％但注释掉了），我希望内部div在外部div中居中（顶部/底部，左/右）。它适用于侧面和底部，但不适用于顶部。相反，外部div被推离顶部的身体（我假设5％，但我不确定）。有关为什么会发生这种情况的任何想法？

Answer 1

包装尺寸将包括宽度尺寸内的填充和边框。

DEMO

    #outer {
        height: 100%;
        width: 100%;
        padding:5px;
        background-color: yellow;
        box-sizing:border-box;
    }

    #inner {
        height: 100%;
        width: 100%;
        /* margin: 5%; */
        background-color: blue;
        box-sizing:border-box;
    }

<强> TIPS

在某些浏览器中，最高边距通常会失败。

使用 margin-bottom 或 padding-top 创建垂直空间。
高度100％在没有额外黑客攻击的情况下不会伸展以适应最外面的容器。

div只是其内容的大小。

Answer 2

这是CSS框模型默认工作的方式。对象的尺寸是设置宽度/高度加上任何边框/边距/填充。

要在指定的宽度中包含任何边框/边距/填充，请使用box-sizing：border-box;在CSS中设置该元素。

Div百分比

2 个答案:

DEMO