Why position is changing when I rotate the view?-CodePudding

I have a simple website with some divs. When I rotate the view from horizontal to vertical it should behave like this:

https://www.loom.com/share/c7cab98155aa4f05a9a8f6319625fbc6

But it behaves like this:

https://www.loom.com/share/b43c6c51792f49a29a3d9582d9fffc4c

The only difference is in the second example the div #nav is fixed position.

It seems like this strange behavior on rotation is happening when:

the divs have height in the vh units
the nav div is fixed or sticky

Is there a way to make it stay in the same position on rotation when the nav div is sticky and other divs have height in the vh units?

Thank you in advance for your help.

body {
    margin: 0px;
}

p {
    display: block;
    margin:0px;
    height: 30px;
}

div {
    height: 100vh;
    width: 100%;
}

#first {
    background-color: green;
}
#second {
    background-color: blue;
}
#third {
    background-color: red;
}
#fourth {
    background-color: cyan;
}
#fifth {
    background-color: pink;
}
#sixth {
    background-color: orange;
}

#nav {
    height: 70px;
    position: fixed;
    top:0px;
    background: black;
    opacity: 50%;
}

<head>
     <meta content="width=device-width, initial-scale=1" name="viewport">
</head>
<body>

    <div id="nav">

    </div>
    <div id="first">
        <p>Some text in the first div</p>
    </div>
    <div id="second">
        <p>Some text in the second div</p>
    </div>
    <div id="third">
        <p>Some text in the third div</p>
    </div>
    <div id="fourth">
        <p>Some text in the fourth div</p>
    </div>
    <div id="fifth">
        <p>Some text in the fifth div</p>
    </div>
    <div id="sixth">
        <p>Some text in the sixth div</p>
    </div>

</body>
</html>

CodePudding user response：

use position: absolute; in the place of position: fixed; for top navbar.

CodePudding user response：

I think I found a solution. I am not sure if it is the best possible solution but at this moment it is ok for me.

here is the link to the correct behavior:

https://www.loom.com/share/42edf3921c4349eab586fc176892c381

Here is the code that solved the problem:

let divnav = document.querySelector('#nav');


window.addEventListener("orientationchange", () =>{
    console.log('on orientation change - nav disappearing ...')
    divnav.style.display = 'none';
})

window.addEventListener("resize", () => {
    console.log('on resize - nav appearing again ;) ');
    divnav.style.display = 'block';
})

body {
    margin: 0px;
}

p {
    display: block;
    margin:0px;
    height: 30px;
}

div {
    height: 100vh;
    width: 100%;
}

#first {
    background-color: green;
}
#second {
    background-color: blue;
}
#third {
    background-color: red;
}
#fourth {
    background-color: cyan;
}
#fifth {
    background-color: pink;
}
#sixth {
    background-color: orange;
}

#nav {
    height: 70px;
    position: fixed;
    top:0px;
    background: black;
    opacity: 50%;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="styles.css">
     <meta content="width=device-width, initial-scale=1" name="viewport">
</head>
<body>

    <div id="nav">

    </div>
    <div id="first">
        <p>Some text in the first div</p>
    </div>
    <div id="second">
        <p>Some text in the second div</p>
    </div>
    <div id="third">
        <p>Some text in the third div</p>
    </div>
    <div id="fourth">
        <p>Some text in the fourth div</p>
    </div>
    <div id="fifth">
        <p>Some text in the fifth div</p>
    </div>
    <div id="sixth">
        <p>Some text in the sixth div</p>
    </div>

</body>
<script src="myscirpt.js"></script>
</html>