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

问题描述 投票：0回答：1

所以，我的问题是，我的div看上去都好像是100％宽，但实际上不是，如果您查看一下inspect元素。在我在主体的第1节下添加2个新的div之前，问题不存在。在我添加2个新的div之前，标头的宽度为1000px，窗口的宽度为1000px，但是当我添加这2个新的divs时，标头比窗口宽度小17px，但看起来还是100％。这不仅弄乱了标题，而且在我添加了这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>
html css width
1个回答
1
投票

您的标题宽度和窗口宽度之间有16像素的差异，这是因为16像素用于滚动条。如果您通过使用overflow:hidden;编辑body标签的css隐藏滚动条，那么您将看到标题和正文的宽度相同

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.