Width attribute not acting properly on my webpage-CodePudding

I am new at web development and facing some problem in creating a web page. Actually, I was creating a loading bar animation at the top of the window and set its width to 100vw but it is taking more space than it should take. Here's a picture to demonstrate:

As you can see in the top-right corner it is overflowing the window. Why is that so?

Here's my code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loading Bar</title>
    <style>
        #progress{
            background-color: red;
            height: 3px;
            width: 0vw;
            transition: width 3s ease-in-out;
        }
        *{
            margin: 0;
            padding: 0;
        }
        header {
            height: 122px;
            background-color: black;
        }
        main {
            height: 899px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div id="progress"></div>
    <header></header>
    <main>
        <button id="btn">Reload</button>
    </main>
</body>

<script>
    btn.addEventListener("click", ()=>{
        progress.style.width = "100vw"
    })
</script>
</html>

Thanks in advance!!

CodePudding user response：

Try adding max-width: 100% to your progress bar css, according to https://caniuse.com/viewport-units there is a known issue on firefox in which the 100vw considers the entire length of the page including the vertical scrollbar as its width. This vertical scrolls is what making your webpage have an horizontal overflow.

CodePudding user response：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loading Bar</title>
    <style>
        body{ overflow-x: hidden; }
        #progress{
            background-color: red;
            height: 3px;
            width: 0vw;
            transition: width 3s ease-in-out;
        }
        *{
            margin: 0;
            padding: 0;
        }
        header {
            height: 122px;
            background-color: black;
        }
        main {
            height: 899px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div id="progress"></div>
    <header></header>
    <main>
        <button id="btn">Reload</button>
    </main>
</body>

<script>
    btn.addEventListener("click", ()=>{
        progress.style.width = "100vw"
    })
</script>
</html>