CSS：使用三个 div 元素及其宽度和高度大小的百分比的问题答案

【问题标题】：CSS: Issues with using three div elements and percentages for their width and height sizeCSS：使用三个 div 元素及其宽度和高度大小的百分比的问题
【发布时间】：2012-11-17 14:25:37
【问题描述】：

我有一个名为 container 的外部 div 元素和两个名为 firstDiv 和 secondDiv 的内部 div 元素

firstDiv 将向左浮动，而 secondDiv 将向右浮动。

我希望外部 div 元素尽可能多地占用宽度，这意味着 100% 的可用宽度。

我还希望两个内部元素占用一半空间，这意味着 container div 的 50%。

这是一些基本代码：

<html>
    <head>
    
    <style type="text/css">
        #container{
            width:100%;
            height:100%;
            border-style:solid;
        }
    </style>
    </head>
    
    <body>
        <div id="container">
            <div id="firstDiv"> </div>
            <div id="secondDiv"> </div>
        </div>
    </body>
</html>

问题 1

我期待一个简单的实体边框围绕 body 元素，看起来确实如此，但是我在浏览器的 y 维度上有一个滚动条。为什么会这样？我说我要body的100%宽高，好像浏览器用的不止这个。

现在我添加了以下 CSS 代码：

    #firstDiv{
        width:50%;
        height:100%;
        border-style:solid;
        }

问题 2 似乎 div 占据了“容器”div 的 50%，但高度似乎超过了 100%。为什么会这样？图片：

我对第二个 div 做同样的事情，并通过以下 CSS 代码包含浮动属性：

    #container{
        width:100%;
        height:100%;
        border-style:solid;
    }
    #firstDiv{
        width:50%;
        height:100%;
        border-style:solid;
        float:left;
        }
    #secondDiv{
        width:45%;
        height:100%;
        border-style:solid;
        float:right;
        }

问题 3 我希望两个 div 元素形成一个两列页面。然而，第二个 div 元素再次比前一个元素占用更高的高度，而且当我调整浏览器大小时，第二个 div 位于第一个下方。

为什么会发生这种情况，我该如何避免？

提前致谢

【问题讨论】：

标签： css html two-column-layout

【解决方案1】：

您所有的问题都是由于您误解的盒子模型。 height: 100% 使内容高度为 100%。当你有一个边框 AND 高度：100% 时，这会导致 100% + 边框宽度，这显然超过 100%。

一种可能的解决方案是使用 box-sizing:border-box;

唯一不支持此属性的浏览器是 IE

【讨论】：

【解决方案2】：

计算元素宽度时不计算边框。它们是对指定宽度的补充。这解释了你的轻微不一致。据我所知，没有 100% 密封的解决方案可以完全满足您的要求（接近它，是的，但完全没有）。最可靠的是使用表格，但这不是设计页面布局的有效解决方案，正如您已经知道的那样。另一种选择是左右浮动，但将宽度指定为略低于 50 的百分比（例如 48-48）或在px 中指定宽度，这将允许您精确计算所需的确切尺寸.

当浏览器开始统一实现 CSS3 时，box-sizing 属性就能解决这个问题。 box-sizing 指定计算元素大小时要考虑的因素。应用box-sizing:border-box; 将考虑边框，但目前这还不足以在浏览器中广泛实现，无法在您的代码中可靠地使用。

【讨论】：