Div with height 100%

Navigation
4

I need to leave a div with height: 100% content and below it I still have the footer, but, for example, when I do not have content to complete the entire screen, the footer appears at the bottom of the page. It has 100px and when the content completes the page, the footer stays only after the content, after the same scroll ...

I'm having this problem because I'm using bootstrap and my navbar is vertical in the right-hand corner. My html tag has the same color as navbar to complete the color until the end because the menu does not complete everything and the footer has the same color of this sidebar and the html tag.

My div content has another color, when the page does not complete everything, the footer goes up and the color of the footer is extended to a good part of the page, leaving it aesthetically ugly. The footer should be at the bottom of the page and the color of the content part should be where the footer appears.

Does anyone have a solution for this?

    
asked by anonymous 18.02.2014 / 14:11

3 answers

3

HTML 

<div id="geral">
<div id="topo">TOPO</div>
<div id="conteudo">CONTEÚDO</div>
</div>
<div id="rodape">Rodapé</div>

CSS 

html, body, #geral { height: 100%; }
body > #geral { height: auto; min-height: 100%; }
#conteudo { padding-bottom: 40px; } /* O padding, deve ser o mesmo valor da altura do rodapé */
#rodape {
    position: relative;
    margin-top: -40px; /* Este margin, tem que ser o mesmo valor da altura do rodapé, só     que negativo */
    height: 40px; /* E aqui, fica a altura do rodapé */
    clear: both
}
    
18.02.2014 / 17:30
1

From what I understood you to leave the footnote fixed:

like this: 

        div#footer {
            width: 100%;
            background-color: #ccc;
            color: white;
            position: fixed;
            bottom: 0;
            left: 0;
            height: 100px;
            text-align: center;
            z-index: 10;
        }

follow example: here

    
18.02.2014 / 14:39
0

I understand that you want something like this:

If the page has low content, the footer remains stuck in the browser footer. Click the Example .

If the page has a lot of content, the footer adjusts the height of content that has exceeded the height of the browser window. Click the Example .

See another example using the same technique: Click the Example . (Change the size of the window to notice the footer). Home Another possibility is that you want the fixed footer. Just use the above example by changing the position property of the footer to fixed .

For more details on this technique:

18.02.2014 / 15:33
Prioritize word in SQL query - MsSQL Specific application of the attribute [ChildActionOnly]