Pin header at top when scrolling page

Question

Pin header at top when scrolling page

Navigation

#1 by (1 votes)

0

Some time ago I was looking 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, by using this code, I can set the header at the top when scrolling, but keep the structure of content and footer . >

html css

asked by anonymous 21.04.2016 / 17:23

1 answer

JFormattedTextField is not accepting any characters Problem with editing database data

score 1 · Answer 1

One of the solutions would be to position the header as position:fixed so that header has the top and left properties relative to window . And using the vw (Viewport width) and vh (Viewport height) measures 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 way you want.

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

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

Here is an example working:

link