CODEWITHSUNDEEP
htmlcss
Erbas
Erbas

Reputation: 11

HTML&CSS regulate the height of the content

i'm starting over with html and i have a question that i'm stuck on. I am building a store. All pages have the same structure: Header, Main, Footer. I want that the footer is always at the bottom of a page. I have already tried with position: absolute; bottom:0;. But that doesn't work, because the main-part is only as big as the content. On other pages I have the problem that the content is bigger than the main. What can I do to avoid these problems.

#edit enter image description here Here you can see, the content is bigger than de main. How can I solve this problem

Upvotes: 0

Views: 35

Answers (3)

Azer8
Azer8

Reputation: 559

hi there it's so simple you can use this and you will get your footer stick at the bottom:

  body{
       min-height: 100vh;
      display: flex;
      flex-direction: column;
   }
   footer{
       margin-top: auto;
   }

using flex-box like that make sur this works no matter what and using margin-top : auto it will force the footer to stay at bottom.

Upvotes: 0

Вадим Гаджимурадов
Вадим Гаджимурадов

Reputation: 51

Firstly you should make a sticky footer

html, body {
  min-height: 100vh;
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1 0 auto;
}
.footer {
  flex-shrink: 0;
}

And then fix your footer if it necessary

Upvotes: 0

Simon Ábris
Simon Ábris

Reputation: 84

You could use flexbox and create your layout like this: Codepen

Putting flex-grow: 1 on the main element ensures that it will always stretch the available space. Notice that you have to make sure that the body stretches the full height of the screen for this to work. That's what height: 100vh does.

If you're unfamiliar with flexbox here's a great guide that I always come back to when I'm not sure about something: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 0

Related Questions