Scroll overlaying the navbar header in HTML / CSS

Question

Scroll overlaying the navbar header in HTML / CSS

Navigation

#1 by (1 votes)
#2 by (-1 votes)

0

I'm doing some testing and I wanted to take the scroll off of the navbar, but leave the rest of the main content on the page or below the navbar, but I'm not getting it. Something similar to what happens on this page:

link

This is my page:

Iwanttoleaveitlikethis:

Mycodeis:

<html><head><metacharset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale = 1.0">
    <style>
    html {
        height:100%;
    }
    body {
        height: auto;
        font-size:14px;
        background: black;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover; 
        font-family: 'Roboto', sans-serif;  
    }

    html.cursor {
        cursor: pointer;
    }

    nav {
        font-family: 'Roboto', sans-serif;
        width: 100%;
        height: 59px;
        border-bottom:1px solid #ddd;
        position: fixed;
        top:0;
        left:0;
        z-index:20;
        background-color:#F6F6F6;
    }

    nav ul,
    #sideNav ul,
    #sideNav ul ul  {
        margin:0;
        padding:0;
        list-style:none;
    }

    nav li {
        margin:0;
        float:left;
        border-right:1px solid #ddd;
        font-size:18px;
    }

    nav a,
    #sideNav a {
        color:#5b6064;
        text-decoration:none;
        display:block;
        padding:10px 30px;
        height:59px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -o-box-sizing: border-box;
        line-height:35px;
    }
    </style>    
    </head>

   <body>
   <nav>
    <ul>
        <li><a href="#" class="icon icon-menu" id="btn-menu">Menu</a></li>
    </ul>
    </nav>

    <div id="sideNav">
    <ul>
    </ul>   
    </div>  

    <div class="container"> 
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </div>
    </body>
    </html>

css header rolamento

asked by anonymous 24.06.2018 / 09:20

2 answers

-1

If you take footer and the other parts of the site from within the main div, your site will get normal. As you are encompassing your entire site within the div main, soon the y axis is being created inside it, not in the body. Anyway, every time you build a site, do not include everything in a single div main, divide the site in section. And never specify the height with fixed values for the div that will span but for the elements that go into it, because if you specify a size, when the height of the elements is in May, it will create the y axis, which would be the scrollbar.

24.06.2018 / 15:22

How to integrate two forms that are on the same page? Android - How to create a Standard Fragment to be used / extend multiple Child Fragments?

score 1 · Accepted Answer

1

I did as follows:

.container{
    overflow-y: auto;
    height: calc(100% - 60px);
    margin-top: 60px;
    box-sizing: border-box;
}

Overflow-y: auto;

height: calc (100% - 60px);

margin-top: 60px;

I made a small modification to body also, body has a margin default , so I removed it, container :

body {
    margin: 0;
}

Follow the complete code:

<html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale = 1.0">
        <style>
            html {
                height:100%;
            }
            body {
                height: auto;
                font-size:14px;
                background: black;
                -webkit-background-size: cover;
                -moz-background-size: cover;
                -o-background-size: cover;
                background-size: cover; 
                font-family: 'Roboto', sans-serif;  
                margin: 0;
            }

            html.cursor {
                cursor: pointer;
            }

            nav {
                font-family: 'Roboto', sans-serif;
                width: 100%;
                height: 59px;
                border-bottom:1px solid #ddd;
                position: fixed;
                top:0;
                left:0;
                z-index:20;
                background-color:#F6F6F6;
            }

            nav ul,
            #sideNav ul,
            #sideNav ul ul  {
                margin:0;
                padding:0;
                list-style:none;
            }

            nav li {
                margin:0;
                float:left;
                border-right:1px solid #ddd;
                font-size:18px;
            }

            nav a,
            #sideNav a {
                color:#5b6064;
                text-decoration:none;
                display:block;
                padding:10px 30px;
                height:59px;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                -o-box-sizing: border-box;
                line-height:35px;
            }
            .container{
                overflow-y: auto;
                height: calc(100% - 60px);
                margin-top: 60px;
            }
        </style>    
    </head>

    <body>
        <nav>
            <ul>
                <li><a href="#" class="icon icon-menu" id="btn-menu">Menu</a></li>
            </ul>
        </nav>

        <div id="sideNav">
            <ul>
            </ul>   
        </div>  

        <div class="container"> 
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        </div>
    </body>
</html>

24.06.2018 / 15:15