CODEWITHSUNDEEP
htmlcss
Attila Naghi
Attila Naghi

Reputation: 2686

Position fixed issue in css

This is my fiddle: https://jsfiddle.net/5e37gjtp/. What i want is to my class content will begin right after the header. I don't want to use margin-top, or padding-top. This is my code:

<div class="header"></div>
<div class="content"></div>

and the css:

.header {height:200px;border:1px solid black; width:100%;position:fixed;left:0px;top:0px;}
.content{height:800px;border:1px solid black}

As you can see the content is behind the header. I want to show right after it . I want to keep the position fixed because is the header of the page and i want to keep it after scrolling down. Is it possible ? thx

Upvotes: 0

Views: 68

Answers (3)

Derk
Derk

Reputation: 42

you can accomplish that by adding position:absolute; and top:201px; to your Content, the 1px extra is to because of the 1px border that is calculated in the header.

You might also want to add left:-1px; to make align it to the left. I hope this helps!

Upvotes: 0

Goowik
Goowik

Reputation: 803

If the height of your header is always the same, you can simply do:

.content{
   height:800px;
   border:1px solid black
   position: absolute;
   top: 200px;
}

fiddle: https://jsfiddle.net/ckmbemzp/

An alternative if your header doesn't have the same height, would be to use a onLoad event and calculate the height of your header, which after you can change the top property.

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

It becomes crap and ugly to the core if you are using absolute or top. Your wish. Better you could use padding-top for the body that matches the height of the <header>:

body {
    margin-top: 210px;
}
.header {
    height:200px;
    border:1px solid black;
    width:100%;
    position:fixed;
    left:0px;
    top:0px;
    z-index: 2;
    background-color: #fff;
}
.content {
    height:800px;
    border:1px solid black;
}

Fiddle: https://jsfiddle.net/og3auchm/1/

Upvotes: 2

Related Questions