【问题标题】：Div Percentages [duplicate]Div 百分比 [重复]
【发布时间】：2014-07-26 16:25:45
【问题描述】：

新手，如果我错过了重要的 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%，但我不确定）。关于为什么会发生这种情况的任何想法？

【问题讨论】：

使用 box-sizing:border-box;也许它有帮助
阅读：css-tricks.com/the-css-box-model
绝对是骗子-google.co.uk/…
这里已经回答了这个问题。 stackoverflow.com/questions/3538875/…查看更新版本的答案

标签： html css

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

Box-sizing 将包括宽度大小内的填充和边框。

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

提示

在某些浏览器中，上边距经常失败。

使用 margin-bottom 或 padding-top 来创建垂直空间。
高度 100% 不会拉伸以适应最外面的容器，而无需额外的黑客攻击。

div 只会是其内容的大小。

【讨论】：