Pin header at top when scrolling page

Question

Pin header at top when scrolling page

Asked 8 years, 2 months ago

Viewed 37,527 times

0

A while ago I was looking for how to put header and footer fixed at the top and bottom of the page respectively, adjusting to the content that would be between the two, and I got with the following code:

CSS:

#wrapper {
    min-height: 100%;
    position: relative;
}
#container {
    background: red;
    padding-bottom: 80px;
    overflow: hidden;
}
#content {
    background: blue;
    width: 1000px;
    margin: 0 auto;
}
header {
    height: 52px;
    background: black;
}
header div {
    width: 1000px;
    background: red;
    height: 52px;
    margin: 0 auto;
}

HTML

<div id="wrapper">
            <div id="container">
                <header>
                    <div></div>
                </header>
                <div id="content"></div><!--content-->
            </div><!--container-->
</div><!--wrapper-->

I would like to know how, using this code, I can fix the header at the top by scrolling the page, but keep the structure of the content and of footer.

What it means to "maintain content and footer structure"?

– Bacco

2016/04/21 at 16:20
The content would be what is between the header and the footer, which will adjust regardless of the size, and even then the footer would be in the fixed footer, and the header at the top ....

– Thiago

2016/04/22 at 14:10
I guess that’s what @Daniel answered then. The only thing you have to add is a padding in the content, above and below the same size as the footer and header, so the beginning and end of the content will not be covered up.

– Bacco

2016/04/22 at 14:12
I just saw the demo on Jsfiddle, but the footer is also fixed, it was just the header, for example, as it is on Facebook and Youtube, the header with the search bar is fixed and accompanies the scrolling of the site, but not the footer, the footer Fican the end of the page, understood?

– Thiago

2016/04/22 at 14:15
These things you have to always put in the body of the question, because I also only understood by the comments here below. Look in the next ones to describe the problem better, then we can help you better and at the same time whoever answers does not waste time with something that is not useful to you. But the solution is simple, he put one entry in the CSS for the header and another for the footer. Just don’t use the footer. If you want the footer to be at the bottom of the page when it is smaller than the screen, just a min-height:100% and body and html height with 100% as well.

– Bacco

2016/04/22 at 14:17
Yes, I only used the header snippet, and it worked , it is fixed and following the scrolling of the page, but it is "covering" the padding that I gave in the text that was inside the "content", how can I solve this?

– Thiago

2016/04/22 at 14:21
Increasing the top padding of the content pro header size, plus the space you want.

– Bacco

2016/04/22 at 14:26
Thanks, I did that, only I thought it was gambiara haha, but thanks

– Thiago

2016/04/22 at 14:29

Show 3 more comments

1 answer

Browser other questions tagged html css

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

by Daniel Beff • **291** points · Answer 1 · 2016-04-21T20:17:40+00:00

One of the solutions would be to position the header as position:fixed so that the header have the properties topand left relating to the window. And using the measurements vw (Viewport width) and vh (Viewport height) you can easily position an element in the viewport (visible area of the browser). Below is an example (well summarized) of what you can do to position these elements in the desired way.

header{
    position: fixed;
    top:0;
    left: 0;
}

footer{
    position: fixed;
    bottom:0;
    left: 0;
}

Follow an example working:

https://jsfiddle.net/kvkw1eex/1/