How to make the container reach the footer? (even with low content)

Question

How to make the container reach the footer? (even with low content)

Navigation

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

3

I have a layout here, where the container background is transparent black, and it goes to the bottom of the page. but it has another problem, where it is written "Sitemap", it is a menu that slides up, and that container has that behind it, the footer is using'position : relative '.

This is the container code:

.container {
    width: 1000px;
    margin: 0 auto;
    margin-bottom: -50px;
}

In the negative 'margin-bottom' code it was the way I made the container behind the beginning of the footer , but the client looked at his monitor and looks like it did not reach, I think it's because of the screen resolution of it ... (damn!)

ps: bg transparent is another class that inserts the transparent background into the container.

edit: my footer is always stuck at the bottom of the page, ie it is a sticky footer , then regardless of monitor size, footer always is in the background, and this makes it harder, because this container should always stick to it too.

html css

asked by anonymous 11.02.2014 / 13:13

2 answers

Text input text box on the right How to list available events in an element in IE8?

score 2 · Answer 1

In this case, put the background not in the container that has the text but in a container that would be at the bottom of it .

If the HTML of your site is simple and there is nothing special about the header, in that container it is enough for height: 100% . height: 100% is one of the hardest things to work on CSS because it has handle-mice, but in some cases it does.

I recommend you read this Maujor article on Why height: 100% does not work?

Summarizing the idea: for height: 100% to work, all parent elements must have height defined attributes, or children can not do what value is 100%.

Example 1: Div does not go to the end

Example 2: Div GO to the end

For the other example, see Maujor's full article. It is very enlightening.

score 1 · Answer 2

@LeandroRuel, I made an example that can be seen by clicking HERE .

HTML:

<body>
  <div class="container">
    <p>Quase nada de conteudo</p>
  </div>
</body>

CSS:

body, html{
  height: 100%;
}

.container{
  background: red;
  width: 500px;
  margin: 0 auto;
  height: 100%;
}

For height: 100% in this case, my parent element that in the case is the body has to be with height: 100% too.

For example, if the body is 500px height and the container is height: 100%, the height of the container will be 500px. For it is worth 100% of the parent element.