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

Asked

Viewed 3,652 times

3

I have a layout here, where, the background of container is transparent black, and it goes to the bottom of the page. but there is another problem, where it is written "Sitemap", is a menu that slides up, and this container has to stay behind this piece, the footer is using position: relative. layout do site onde container vai até o rodapé

this is the container code:

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

in the code, negative margin-bottom was the way I did the container lag behind the beginning of footer, but the client looked at his monitor and it doesn’t seem to have reached, I think it’s because of the resolution of his screen...(curse!)

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, that is, it is a Sticky footer, so, regardless of the size of the monitor, the * footer* always stays in the background, and that makes it harder, because this container should always stick to it too.

html css

  • If possible, add your HTML to the question.

  • Really? It’s fucking big!

  • @Leandroruel puts all your HTML and all your CSS in an example done on this site http://jsfiddle.net and then click update and get the link that will be generated in your address bar and post here as "Example in Jsfiddle" so that we can help you correctly

  • Check out this answer from another post: https://answall.com/a/413211/82200

2 answers

2

In that 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 in the header, in this container is enough to height: 100%. height: 100% is one of the most difficult things to work with in CSS because it has mouse grabs, but in some cases it works yes.

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

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

Example 1: Div does not go all the way

Example 2: Div GOES to the end

For the other examples, see the full article of Maujor. It is very enlightening.

  • I will try to do this, I came to think about it, including first tested the height: 100% in the container but it did not work, the background did not reach the content, nor got close to the footer

1

@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 that height: 100% in this case, my parent element which in this case is the body has to be with the height: 100% also.

For example, if the body is at 500px height and the container is at 100% height, the height of the container will be 500px. For he’s worth 100% of the parent element.

Browser other questions tagged html css

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