CODEWITHSUNDEEP
htmlcss
zacatac
zacatac

Reputation: 27

I cannot make my html body scroll using overflow

Here is the html and css that i am using: https://gist.github.com/zacatac26/d5733e9289be157982a448a03bda6711 this is only a single page but just making this page work is fine.

I want to make it so the header and body is always in the same place on the webpage but also have the text in the body scroll. I have tried position: fixed and overflow: scroll/auto, but when i do so the page appears how i want but the text does not scroll. Any help would be appreciated.

Upvotes: 1

Views: 222

Answers (2)

zacatac
zacatac

Reputation: 27

I had to make the background image part of the fixed header so that the page content would go underneath the header image and navmenu with no overlapping. I used the same percentages that enclosed the header for the background image with top:, bottom:, left: and right:

Upvotes: 0

percygrunwald
percygrunwald

Reputation: 433

Typically the best way to achieve this is just to apply the position: fixed CSS rule to the container of the header element. position: fixed removes the element from the flow, like position: absolute, so you need to also tell the browser where to position the container, e.g. top: 0. To manage the width of the header, you can use left: 0; right: 0; or width: 100%.

I think this page gives the best example of how to achieve what you are going for: https://www.w3schools.com/howto/howto_css_fixed_menu.asp. I'd suggest starting with the HTML/CSS templates given in the tutorial and then add the content and styles from your Gist piece by piece, reviewing the results after each change to make sure that it still looks/behaves as you expect.

Upvotes: 1

Related Questions