如何并排获得总宽度为 100% 的 div答案

【问题标题】：How to get div(s) side by side totaling 100% width如何并排获得总宽度为 100% 的 div
【发布时间】：2017-11-14 14:57:31
【问题描述】：

我有一个问题，当我浮动两个 div（一个左，一个右）时，我有一个奇怪的填充，我在以下链接的代码中找不到，你会看到我的问题。右侧（侧边栏）的 div 右侧有某种填充，我不知道如何删除它。所以我的问题是：如何删除上述填充？

下面附上我的 HTML 代码，后跟 CSS。

    #wrapper {
        width: 80%;
        height: 980px;
        margin: auto;
        padding: 0px;
    }
    
    .header {
        width: 100%;
        border-style: solid;
        margin: auto;
        text-align: center;
    }
    
    .navbar {
        width: 100%;
        height: 4%;
        border-style: solid;
    }
    
    .body {
        width: 75%;
        height: 80%;
        border-style: solid;
        float: left;
        margin: 0px;
        padding: 0px;
    }
    
    .sidebar {
        width: 25%;
        height: 80%;
        border-style: solid;
        margin: 0px;
        float: right;
        padding: 0px;
    }

    <body>
    <div id="wrapper">
        <div class="header">
            <h1>Header</h1>
        </div>
        <div class="navbar">

        </div>
        <div class="sidebar">
            <h1>sidebar</h1>
        </div>
        <div class="body">
            <h1>body</h1>
        </div>
        <div class="footer">
        </div>
    </div>
</body>

【问题讨论】：

你是用什么浏览器截屏的？转换为 Stack Snippet 后，我们会在 Chrome 上看到不同的结果。
我正在使用 chrome，抱歉旧截图，现在将更新。更新后会回复
更新截图：puu.sh/wiuni/54d3d47eb6.png

标签： html css padding

【解决方案1】：

box-sizing: border-box : width 和 height 属性（以及 min/max 属性）包括内容、填充和边框，但不包括边距。所以当您使用填充或边框时，不会影响您定义的宽度。

修复：

只需添加#wrapper * {box-sizing: border-box;}

#wrapper {
        width: 80%;
        height: 980px;
        margin: auto;
        padding: 0px;
}

#wrapper * {
    box-sizing: border-box;
}
    
.header {
        width: 100%;
        border-style: solid;
        margin: auto;
        text-align: center;
}
    
.navbar {
        width: 100%;
        height: 4%;
        border-style: solid;
}
    
.body {
        width: 75%;
        height: 80%;
        border-style: solid;
        float: left;
        margin: 0px;
        padding: 0px;
}
    
.sidebar {
        width: 25%;
        height: 80%;
        border-style: solid;
        border-width: 3px;
        margin: 0px;
        float: right;
        padding: 0px;
}

<div id="wrapper">
    <div class="header">
         <h1>Header</h1>
    </div>
    <div class="navbar">

    </div>
    <div class="sidebar">
        <h1>sidebar</h1>
    </div>
    <div class="body">
        <h1>body</h1>
    </div>
    <div class="footer">

    </div>
</div>

【讨论】：

【解决方案2】：

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

要么通过调整宽度以考虑边框来解决此问题，要么更改框尺寸模型；

https://developer.mozilla.org/en/docs/Web/CSS/box-sizing?v=control

边框

宽度和高度属性包括内容、内边距和边框，但不包括边距。这是文档处于 Quirks 模式时 Internet Explorer 使用的盒子模型。请注意，填充和边框将在框内，例如.box {宽度：350px; border: 10px solid black;} 导致在浏览器中呈现一个宽度为 350px 的框。内容框不能为负数，下限为0，无法使用border-box使元素消失。这里的尺寸计算为，width = border + padding + 内容的宽度，height = border + padding + 内容的高度。

添加box-sizing: border-box; 是一种修复方法，它会使边框计入宽度。

执行width: calc(75% - 2px) 可以让您以易于阅读的方式指定宽度。

带边框

    #wrapper {
        width: 80%;
        height: 980px;
        margin: auto;
        padding: 0px;
    }
    
    #wrapper > div {/*direct div descendents of wrapper only*/
        box-sizing:border-box;
    }
    
    .header {
        width: 100%;
        border-style: solid;
        margin: auto;
        text-align: center;
    }
    
    .navbar {
        width: 100%;
        height: 4%;
        border-style: solid;
    }
    
    .body {
        width: 75%;
        height: 80%;
        border-style: solid;
        float: left;
        margin: 0px;
        padding: 0px;
    }
    
    .sidebar {
        width: 25%;
        height: 80%;
        border-style: solid;
        margin: 0px;
        float: right;
        padding: 0px;
    }

    <body>
    <div id="wrapper">
        <div class="header">
            <h1>Header</h1>
        </div>
        <div class="navbar">

        </div>
        <div class="sidebar">
            <h1>sidebar</h1>
        </div>
        <div class="body">
            <h1>body</h1>
        </div>
        <div class="footer">
        </div>
    </div>
</body>

有宽度

编辑：我无法成功创建宽度的 sn-p，可能需要对高度进行更多调整，清除页脚，或者将正文和侧边栏浮动在同一方向？或添加内容。

关于使用 calc() 作为宽度的警告：

默认边框大小在浏览器中不是标准的。为了正确指定宽度，您需要使用跨浏览器兼容的方法声明边框的大小。

【讨论】：

【解决方案3】：

根据我的经验，使用 CSS floats 会使我的 HTML 和 CSS 容易出现此类奇怪的溢出/错位问题。请注意，如果我在 #wrapper 上声明属性值对 overflow: hidden;，它们似乎是对齐的。也就是说，每个的右侧边界仍然被截断。我可以通过将[box-sizing][1]: border-box; 包含在#wrapper 孩子的直系后代中来解决此问题（即，使用#wrapper > * 选择器）。此属性仅确保在指定 widths 和/或 heights 时将 border-width 与通常的内容和 padding 一起包含在内。

#wrapper {
    width: 80%;
    height: 980px;
    margin: auto;
    padding: 0;
    overflow: hidden;
}
#wrapper > * { box-sizing: border-box; }
.header {
    width: 100%;
    border-style: solid;
    margin: auto;
    text-align: center;
}
.navbar {
    width: 100%;
    height: 4%;
    border-style: solid;
}
.body {
    width: 75%;
    height: 80%;
    border-style: solid;
    float: left;
    margin: 0;
    padding: 0;
}
.sidebar {
    width: 25%;
    height: 80%;
    border-style: solid;
    margin: 0;
    float: right;
    padding: 0;
}

<body>
    <div id="wrapper">
        <div class="header">
            <h1>Header</h1>
        </div>
        <div class="navbar">

        </div>
        <div class="sidebar">
            <h1>sidebar</h1>
        </div>
        <div class="body">
            <h1>body</h1>
        </div>
        <div class="footer">

        </div>
    </div>
</body>

【讨论】：

解决问题的唯一部分答案是更改盒子大小。推荐 overflow:hidden 而不解释它的作用很容易为 OP 带来未来的错误。

【解决方案4】：

默认框模型添加边框宽度（和填充）到您为元素指定的宽度，因此.body 和.sidebar 实际上每个都略宽于 25%和 75%，因此它们不能排成一行。

要更改框模型以使边框宽度包含在您指定的宽度中，请使用box-sizing: border-box。

例如

* {box-sizing: border-box;} /* Make all elements use 'border-box' */

这是你的updated JSFiddle

这里是关于CSS Box Sizing的信息

【讨论】：

【解决方案5】：

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

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

【讨论】：

哇，原来如此！
你知道我可以保留边框的方法吗，比如我可以将边框宽度设置为 2px，然后沿着宽度 = 75% -2px 的线做一些事情
在 CSS 中查找 calc() 函数。您可以执行以下操作：width: calc(75% - 2px); 我记得。 @Jason1232
使用 box-sizing:border-box，这样当你设置一个宽度时它包括边框和内边距