Div with height 100%

Asked

Viewed 3,345 times

4

I need to leave one div with height: 100% of content and below it still stand the footer, but, for example, when you have no content to complete the entire screen, the footer appears at the end of the page. He has 100px and when the content completes the page, the footer is only after the content, after the same scrolling...

I have this problem because I’m using the bootstrap And my navbar is vertical in the right-hand corner. My html tag has the same color as the navbar to complete the color until the end because the menu doesn’t complete everything and the footer has the same color as this sidebar and the html tag.

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

Does anyone have a solution to this?

html css twitter-bootstrap
  • 5

    You can post the code on jsfiddle ?

  • 2

    There are several solutions to the problem you present, but to find out which one is appropriate for your case it will be necessary to know how you have the structure of the page. As already mentioned, you can create a Jsfiddle with the HTML required to replicate the problem or put the same in your question.

  • @Caiogomes by chance your page has size equal to the size of the current window height? Could you tell if some fixed size is applied to your page?

  • 1

    Nothing against also use Jsfiddle, but remember to put the relevant code in the question.

  • possible duplicate of How to make the container reach the footer? (even with little content)

  • Possible duplicate of http://answall.com/questions/5189/comort-container-alcancar-o-rodape-rodape-com-pouco-conteudo/5193 . They are not exactly the same question, but they are the same answer. The other question is only more elaborate than this

  • Remember to choose the best answer. You ask a lot of questions and those who answer like to get feedback as well. Hug.

Show 2 more comments

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
}

1

From what I understand you leave the footer fixed:

thus:

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

following example:here

0

From what I understand you want something like this:

If the page has little content, the footer remains attached to the browser footer. Click on Example.

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

See another example using the same technique: Click on Example. (Change the window size to understand the footer).

Another possibility is that you want the footer fixed. Just use the example above by changing the property position from the footer to Fixed.

For more details about this technique:

Browser other questions tagged html css twitter-bootstrap

You are not signed in. Login or sign up in order to post.