0

Estou fazendo alguns testes e eu queria tirar o scroll de cima da navbar, mas deixar no restante do conteúdo principal da página ou seja abaixo da navbar, mas não estou conseguindo. Algo parecido com o que acontece nessa página:

https://getmdl.io/templates/portfolio/index.html

Essa é minha página:

Minha página

Quero deixar assim:

Quero deixar assim

Meu código é:

    <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;  
    }

    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>

2 Respostas 2

2

Fiz da seguinte forma:

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

overflow-y: auto; colocando o scroll no eixo y da div container

height: calc(100% - 60px); com isso a div vai pegar toda a área da pagina e tiro a diferença dos 60px do menu.

margin-top: 60px; como a div esta pegando toda a área da pagina, isso vai contar com o menu também.

Fiz uma pequena modificação no body também, o body tem uma margin default, então a removi, para não ficar com bordas na parte do conteiner:

body {
    margin: 0;
}

Segue o código completo:

<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>
4
  • Isso mesmo. Valeu pelas dicas. Commented 24/06/2018 às 16:56
  • Wictor só uma coisa, na sua solução não apareceu a seta da parte de cima da barra de rolagem, só a seta da parte de baixo, parece que está indo além da onde começa o header, na parte de trás. Sabe me dizer como resolve isso? Commented 24/06/2018 às 18:13
  • 1
    Consegui resolver aqui, baseado na sua solução. Ficou assim: .container{ overflow-y: auto; box-sizing: border-box; margin-top: 60px; height: calc(100% - 60px);}. Obrigado!!! Commented 24/06/2018 às 18:27
  • Vou editar a pergunta de acordo com o seu comentário. Commented 24/06/2018 às 18:30
-1

Se você tirar footer e os demais partes do site de dentro da div main, seu site vai ficar normal. Como você esta englobando todo seu site dentro da div main, logo o eixo y esta sendo criado dentro dela, não no body. De toda forma, toda vez que for construir um site, não englobe tudo em uma unica div main, divida o site em section. E nunca especifique a altura com valores fixos para a div que vai englobar e sim para os elementos que vão dentro dela, pois se você especificar um tamanho, quando a altura dos elementos for maio, ele vai criar auto o eixo y, que seria a barra de rolagem.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .