1

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

0

2 Answers 2

2

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.

0
1

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

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.