Question

我有一个问题，当我浮动两个div（一个左，一个右）我有这个奇怪的填充，我在以下链接的代码中找不到你会看到我的问题。右边的div（侧边栏）右边有一些填充，我无法弄清楚如何删除它。 https://stackoverflow.com/a/14048046/7668448 所以我的问题是：我如何删除上面提到的填充？

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

默认情况下，在符合标准的浏览器上，边框对宽度没有贡献。

通过调整宽度来考虑边框来修复此问题，或者更改框大小调整模型;

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

边界框

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

添加box-sizing: border-box;是一个修复，它会使边框朝向宽度计算。

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

使用边框

＆＃13;

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

＆＃13;

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

＆＃13;

宽度

编辑：我无法成功创建宽度代码段，可能需要更多调整高度，清除页脚或将主体和侧边栏浮动在同一方向？或添加内容。

关于对宽度使用calc（）的警告：

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

Answer 2

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

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

E.g。

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

这是您的updated JSFiddle

此处有关CSS Box Sizing
的信息

Answer 3

box-sizing: border-box：宽度和高度属性（以及最小/最大属性）包括内容，填充和边框，但不包括margin.so当您使用填充或边框时，不会影响您定义的宽度。< / p>

对于修复：

只需添加#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 {
        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 5

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何并排获得100％宽度的div

5 个答案: