如何并排获得 div(s) 总宽度为 100%

Question

我遇到一个问题，当我浮动两个 div(s)（一个左，一个右）时，我有这个奇怪的填充，我在下面的代码中找不到 link你会看到我的问题。右侧（边栏）的 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>

Answer 1

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

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

Answer 2

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

通过调整宽度以解决边界问题或更改框大小模型来解决此问题；

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

border-box

The width and height properties include the content, the padding and border, but not the margin. This is the box model used by Internet Explorer when the document is in Quirks mode. Note that padding and border will be inside of the box e.g. .box {width: 350px; border: 10px solid black;} leads to a box rendered in the browser of width: 350px. The content box can't be negative and is floored to 0, making it impossible to use border-box to make the element disappear. Here the dimension is calculated as, width = border + padding + width of the content, and height = border + padding + height of the content.

添加 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>

宽度

编辑： 我未能成功创建宽度片段，可能需要对高度进行更多调整，清除页脚，或同时浮动正文和侧边栏在同一个方向？或添加内容。

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

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

Answer 3

box-sizing: border-box : The width and height properties (and min/max properties) includes content, padding and border, but not the margin.so when you use of padding or border no affect on width that you defined.

修复：

Just add #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>

Answer 4

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

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

例如

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

这是你的 updated JSFiddle

这是关于 CSS Box Sizing
的信息

Answer 5

根据我的经验，使用 CSS floats 会使我的 HTML 和 CSS 容易出现像这样奇怪的 overflow/misalignment 问题。请注意，如果我在 #wrapper 上声明 property-value 对 overflow: hidden;，它们似乎是对齐的。也就是说，每个的 right-hand 侧边框仍然会被截断。我可以通过在 #wrapper child 的直接后代中包含 [box-sizing][1]: border-box; 来解决这个问题（即，使用 #wrapper > * 选择器） .这属性只是确保 border-width 与通常的内容和 padding 一起包含在指定 widths and/or heights 时。

#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>

如何并排获得 div(s) 总宽度为 100%

How to get div(s) side by side totaling 100% width

html

css

padding