Geek asks and answers

Position: fixed with vertical space

I have a pretty basic problem with the position: fixed.

Here is an example: http://jsfiddle.net/wxEsY/

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

Any help was appreciated.

Hi

+3
source share
4 answers

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

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

When you say scrolling under the back panel, it seems that you want the content to start under the back panel. So add some indentation to the second div to account for the presence of a fixed div.

+2
source

Does it do this?

http://jsfiddle.net/Vqncx/

DIV- y , "nav", "nav" z-index, .

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

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

You just need to add the top edge of your .content div equal to the size of the .nav block + some addition:

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

Here's a more flexible way of doing this, which does not require knowing the height of a fixed div (although it is less semantic).

Just duplicate the markup for the fixed element. Set the positionfirst duplicated pair to fixedand the visibilitysecond value to hidden(also make sure that the positionsecond item is not set or relative). Here is 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>
Run codeHide result
0
source

More articles:


All Articles