Question

我有一个名为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

我期待一个简单的实体边框来包围身体元素，它看起来像是这样，但是我在浏览器的y维度上有一个滚动条。为什么会这样？我说我想要100％的身体宽度和高度，看起来浏览器使用的不仅仅是这个。

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

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

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

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

    #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位于第一个div之下。

enter image description here

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

提前致谢

Answer 1

你所有的问题都归咎于你误解的盒子模型。高度：100％使内容高度100％。当你有一个边框和高度：100％这导致100％+边框宽度，显然超过100％。

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

唯一不支持此属性的浏览器是IE＆lt; 8。如果这些与您相关，您可以为它们创建一个包含CSS表达式的变通方法。小心处理！

Answer 2

计算元素宽度时不计算边框。它们是指定宽度的补充。这解释了你的轻微不一致。据我所知，这个问题没有100％的密闭解决方案完全你想要什么（接近它，是的，但确切地说，不是）。最可靠的是使用表，但这不是设计页面布局的有效解决方案，因为您已经知道了。另一种选择是左右浮动，但宽度指定为略低于50的百分比（例如48-48）或具有px中指定的宽度，这将允许您精确计算确切的大小你需要。

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

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

2 个答案: