Html 如何获得并排且总宽度为100%的div

我有一个问题，当我浮动两个div（一个左，一个右）时，我有一个奇怪的填充，我在下面的链接中的代码中找不到，您将看到我的问题。右边的div（侧边栏）右边有一些填充，我不知道如何删除它。 因此，我的问题是：如何删除上述填充

下面是我的HTML代码，后面是CSS

#包装器{
宽度：80%；
高度：980px；
保证金：自动；
填充：0px；
}
.标题{
宽度：100%；
边框样式：实心；
保证金：自动；
文本对齐：居中；
}
navbar先生{
宽度：100%；
身高：4%；
边框样式：实心；
}
.身体{
宽度：75%；
身高：80%；
边框样式：实心；
浮动：左；
边际：0px；
填充：0px；
}
.侧边栏{
宽度：25%；
身高：80%；
边框样式：实心；
边际：0px；
浮动：对；
填充：0px；
}

标题
边栏
身体

我猜这不是填充，而是边框的宽度。如果删除边框，它将起作用

.body {
        width: 75%;
        height: 80%;
        border: none;
        float: left;
        margin: 0px;
        padding: 0px;
        background-color: green;
}

.sidebar {
        width: 25%;
        height: 80%;
        border: none;
        margin: 0px;
        float: right;
        padding: 0px;
        background-color: red;
}

---

在符合标准的浏览器上，默认情况下，边框不影响宽度

通过调整宽度以考虑边框来解决此问题，或者更改长方体大小调整模型

边框框

宽度和高度属性包括内容、填充和边框，但不包括边距。这是Internet Explorer在文档处于“怪癖”模式时使用的长方体模型。请注意，填充和边框将位于框的内部，例如，框{width:350px；border:10px纯黑；}将导致在浏览器中呈现宽度为350px的框。内容框不能为负数，并被限定为0，因此无法使用边框框使元素消失。 这里的维度计算为：宽度=边框+填充+内容宽度，高度=边框+填充+内容高度

添加

框大小：边框框

是一个修复程序，它将使边界朝宽度方向计数

执行

width:calc（75%-2px）

可以让您以易于阅读的方式指定宽度

带边框框

#包装器{
宽度：80%；
高度：980px；
保证金：自动；
填充：0px；
}
#wrapper>div{/*仅限wrapper的直接div子代*/
框大小：边框框；
}
.标题{
宽度：100%；
边框样式：实心；
保证金：自动；
文本对齐：居中；
}
navbar先生{
宽度：100%；
身高：4%；
边框样式：实心；
}
.身体{
宽度：75%；
身高：80%；
边框样式：实心；
浮动：左；
边际：0px；
填充：0px；
}
.侧边栏{
宽度：25%；
身高：80%；
边框样式：实心；
边际：0px；
浮动：对；
填充：0px；
}

标题
边栏
身体

框大小：边框框

：宽度和高度属性（以及最小/最大属性）包括内容、填充和边框，但不包括边距。因此，使用填充或边框时，不会影响定义的宽度

用于修复：

只需添加

#wrapper*{box size:border box；}

#包装器{
宽度：80%；
高度：980px；
保证金：自动；
填充：0px；
}
#包装纸*{
框大小：边框框；
}
.标题{
宽度：100%；
边框样式：实心；
保证金：自动；
文本对齐：居中；
}
navbar先生{
宽度：100%；
身高：4%；
边框样式：实心；
}
.身体{
宽度：75%；
身高：80%；
边框样式：实心；
浮动：左；
边际：0px；
填充：0px；
}
.侧边栏{
宽度：25%；
身高：80%；
边框样式：实心；
边框宽度：3倍；
边际：0px；
浮动：对；
填充：0px；
}

标题
边栏
身体

默认的框模型将边框（和填充）的宽度添加到您为元素指定的宽度中，因此

.body

和

.sidebar

实际上都略宽于25%和75%，因此它们不能放在一行中

要更改长方体模型，使边框的宽度包含在指定的宽度中，请使用

长方体大小：边框长方体

例如

这是你的

---

以下是关于

的信息根据我的经验，使用CSS

float

s会使我的HTML和CSS容易出现像这样奇怪的溢出/未对齐问题。请注意，如果我声明属性值对

overflow:hidden#wrapper

上的code>它们似乎是对齐的。也就是说，每一个的右侧边界仍然会被截断。我可以通过包含

[box size][1]：边框框来解决此问题#wrapper

子对象的直接后代上进行编码>（即，使用

#wrapper>*

选择器）。当指定

宽度

s和/或

高度

s时，此属性仅确保

边框宽度

与常规内容和

填充

一起包括在内

#包装器{
宽度：80%；
高度：980px；
保证金：自动；
填充：0；
溢出：隐藏；
}
#包装器>*{框大小：边框框；}
.标题{
宽度：100%；
边框样式：实心；
* {box-sizing: border-box;} /* Make all elements use 'border-box' */