Html div 的 100% 宽度看起来像是 100%，但实际上缺少一些像素

Question

所以，我的问题是，如果您查看检查元素，我的 div 看起来都是 100% 宽度，但实际上不是。直到我在 body 的第 1 节下添加 2 个新的 div 时，问题才出现。在我添加2个新的div之前，header的宽度是1000px，window的宽度是1000px，但是当我添加这2个新的div时，header比[=30少了17px =] 宽度，但看起来仍然是 100%。这不仅搞乱了 header，而且在我添加这 2 个 div 之后，所有元素都是 17px 的缩写。我想不通..

在这里你可以明白我的意思：Fiddle

var header = document.getElementsByClassName("header")[0].clientWidth;
var headerWidth = document.getElementsByClassName("header-width")[0];

headerWidth.innerHTML = "Header width is: <span>" + header + "</span>, but window width is: <span>" + window.innerWidth + "</span>";

window.onresize = () => {
 header = document.getElementsByClassName("header")[0].clientWidth;
  headerWidth.innerHTML = "Header width is: <span>" + header + "</span>, but window width is: <span>" + window.innerWidth + "</span>";
}

/* Root ------------------------------------------------- */
:root {
    font-size: 62.5%;
    --orange-color: #FFB82F;
    --background-dark-1: #222222;
    --background-dark-2: #2B2B2B;
    --text-color: #E7E7E7;
    --drop-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
/* Root END --------------------------------------------- */


/* Global ----------------------------------------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    margin: 0;
    padding: 0;
    position: relative;
    font-family: sans-serif;
    font-size: 0;
}
/* Text --------------------------------------- */
/* Section title text --------------- */
.section-title {
    font-size: 3rem;
    font-weight: 500;
    color: var(--orange-color);
    text-decoration: underline;
}
/* Global END ------------------------------------------- */


/* Header ----------------------------------------------- */
.header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 80px;
    background: #1A1A1A;
    z-index: 100;
}
/* Logo --------------------------------------- */
.logo {
    float: left;
}
.logo a {
    display: block;
    text-decoration: none;
    color: white;
    font-family: cursive;
    font-size: 3.7rem;
    line-height: 80px;
    padding: 0 20px;
}
/* Toggle menu button ------------------------- */
#toggle {
    display: none;
}
/* Menu --------------------------------------- */
.menu-box {
    float: right;
}
.menu ul {
    list-style: none;
}
.menu li {
    display: inline-block;
}
.menu a {
    display: block;
    padding: 0 10px;
    line-height: 80px;
    text-decoration: none;
    color: white;
    font-size: 1.8rem;
    font-weight: 700;
    transition: color 75ms ease-in-out;
}
.menu a:hover {
    color: var(--orange-color);
}
.menu li:last-child {
    margin-right: 10px;
}
/* Header END ------------------------------------------- */


/* Page content: Home page ------------------------------ */

/* Hero section ------------------------------- */
.hero-section {
    position: relative;
    width: 100%;
    height: calc(100vh - 80px);
    margin-top: 80px;
    background-size: cover;
    background-position: 80% 50%;
}
.hero-section-overlay {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(18, 18, 18, 0.6);
}
.hero-text {
    font-size: 5rem;
    font-weight: 300;
    color: white;

}
.hero-text span {
    color: var(--orange-color);
}
.hero-btn {
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    bottom: 30px;
    width: 70px;
    height: 70px;
    background: var(--background-dark-2);
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
    cursor: pointer;
}

/* Page content: Home page END -------------------------- */

.header-width {
  position: fixed;
  top: 0;
  transform: translateX(-50%);
  left: 40%;
  font-size: 2rem;
  color: white;
  z-index: 101;
}
.header-width span {
  color: red;
}
.header-width span:nth-child(2) {
  color: green;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
    <!-- Header -------------------------------------------- -->
    <div class="header">
        <!-- Logo ------------------------------------ -->
        <div class="logo">
            <a href="#">Logo</a>
        </div>
        <!-- Toggle menu button ---------------------- -->
        <input type="checkbox" id="toggle">
        <label for="toggle" id="toggle-btn">
            <div class="fa-bar"></div>
            <div class="fa-bar"></div>
            <div class="fa-bar"></div>
        </label>
        <!-- Menu -->
        <div class="menu-box">
            <div class="menu">
                <ul>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li><a href="#">6</a></li>
                    <li><a href="#">7</a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- Header END ---------------------------------------- -->


    <!-- Page content: Home page --------------------------- -->
    <!-- Hero section ---------------------------- -->
    <div class="hero-section">
        <div class="hero-section-overlay">
            <p class="hero-text">Hello.</p>
            <div class="hero-btn">
            </div>
        </div>
    </div>

   <!-- THIS ARE 2 DIVS I ADDED AND THEN PROBLEM IS HERE --> 
    <!-- Section 1, About us ---------------------- -->
    <div class="h-about-us">
        <div class="h-about-us-box">
            <p class="section-title">About us</p>    
        </div>
    </div>
    <!-- Page content: Home page END ----------------------- -->
    
    <p class="header-width">Header width is:</p>
</body>
</html>

Answer 1

您的 header 宽度和 window 宽度之间存在 16px 的差异，这是因为 16px 用于滚动条。如果您通过使用 overflow:hidden; 编辑 body 标签的 css 来隐藏滚动条，那么您将看到 header 和 body 具有相同的宽度

Html div 的 100% 宽度看起来像是 100%，但实际上缺少一些像素

Html div of 100% width seems like it is 100%, but is actually missing some pixels

html

css

width