-1

I am using this CSS:

html{
height:100%;
}

#Nav{
position:fixed;
top:0;
}

#Heading{
position:absolute;
top:0;
}

The problem is that when using the DIV #Heading in the HTML file, it will cause a scrollbar.

So is it impossible to use two DIVs with "fixed" positioning and top 0?

When I remove the second div (position:absolute) the scrollbar disappears.

Could you tell me how to code the CSS correctly?

Thanks a lot!

Dom85
  • 21
  • 5
  • What are you trying to accomplish and why do you need to use `position`? – Baruch Jun 08 '16 at 02:26
  • I need this for a fixed background scrolling site. On this site, the heading should overlap the first image shown. Like this in this video: https://www.youtube.com/watch?v=PWoOpJtkyjI thx! – Dom85 Jun 08 '16 at 02:31
  • I think I forgot to add overflow:hidden; to html – Dom85 Jun 08 '16 at 02:45
  • Can you post your HTML? – Baruch Jun 08 '16 at 02:46
  • This is way too few information to give you an actual answer helping you. Your CSS states no dimensions whatsoever for the fixed/absolute positioned elements. An absolute positioned container exceeding the height of its ancestors (I assume `html` since its height is set to 100%) will cause a scrollbar to be shown. I think you should learn basic HTML and CSS first before trying to do something like a section scroller. – Seika85 Jun 08 '16 at 09:51
  • The DIV does not really have a dimension, just a width of 100%; the nav is 1024 px wide. Is it somehow possible to remove the scrollbar? – Dom85 Jun 08 '16 at 12:13

1 Answers1

0

I've found hear a solution:

Make body have 100% of the browser height

html { height:100%; }
body { position:absolute; top:0; bottom:0; right:0; left:0; }

The next problem is that I want to add a DIV with position: absolute to the bottom of the site, but this DIV is hanging in the middle of the page.

Community
  • 1
  • 1
Dom85
  • 21
  • 5