CODEWITHSUNDEEP
css
ienes
ienes

Reputation: 266

Position: fixed with vertical space

What I have is a rather basic issue with position: fixed.

Here's a sample:

* {
    margin: 0;
    padding: 0;
}
.nav {
    width: 100%;
    height: 50px;
    background: #000;
    position: fixed;
}

.content {
    background: #ccc;
    width: 100%;
    height: 5000px;
}
<div class="nav"></div>
<div class="content">test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br /></div>

What I want is the scrolling to start below the black bar (with a fixed position).

Upvotes: 17

Views: 28688

Answers (5)

Dgloria
Dgloria

Reputation: 301

Added an empty div above my fixed header made it invisible, with this css

.invisible_placeholder{
  height:80px;
}

Upvotes: 0

Trevor
Trevor

Reputation: 13437

Here's a more flexible way of accomplishing this that doesn't require the height of the fixed div to be known (though it is less semantic).

Simply duplicate the markup for the fixed element. Set the position of the first of the duplicated pair to fixed and the visibility of the second to hidden (also make sure the position of the second element is unset or relative). Here's an example:

* {
    margin: 0;
    padding: 0;
}
.nav {
    width: 100%;
    height: 50px;
    background: #000;
}
.fixed{position:fixed}
.filler{visibility:hidden}

.content {
    background: #ccc;
    width: 100%;
}
<div class="nav fixed"></div>
<div class="nav filler"></div>
<div class="content">
  
  First<br />
  Second<br />
  Third<br />
  Fourth<br />
  Fifth<br />
  Sixth<br />
  Seventh<br />
  Eigth<br />
  Ninth<br />
  
  <br /><br /><br /><br />
  <br /><br /><br /><br />
  <br /><br /><br /><br />

  Last<br />

</div>

Upvotes: 8

kdtong
kdtong

Reputation: 184

You just need to add a top margin to your .content div equal to the size of the .nav block + some padding:

.content {
    margin-top: 60px;
    background: #ccc;
    width: 100%;
    height: 5000px;
}

Upvotes: 1

Yammi
Yammi

Reputation: 735

Does this do it?

http://jsfiddle.net/Vqncx/

I just gave the 'content' DIV relative positioning and a y-axis from the top equal to the height of the 'nav' and then gave the 'nav' a z-index to keep it on top of the 'content'.

.nav {
 width: 100%;
 height: 50px;
 background: #000;
 position: fixed;
 z-index: 5;
}

.content {
 background: #ccc;
 width: 100%;
 height: 5000px;
 position: relative;
 top:50px;
}

Upvotes: 4

mrtsherman
mrtsherman

Reputation: 39872

Add padding to second div equal to height of second div.

.content {
    padding-top: 50px;
    background: #ccc;
    width: 100%;
    height: 5000px;
}

When you say scrolling below the back bar, it sounds like you want the content to begin below the back bar. So add some padding to second div to account for presence of fixed div.

Upvotes: 12

Related Questions