100 percent header

+1 Wilo Muyoma · October 25, 2014
hi guys I am new to  web development.  I want to have a 100% width top header, however top header is under wrapper which is fixed 1000px.How can I get  top header to be 100% of the entire screen?  

Post a Reply


Oldest  Newest  Rating
0 Phillip Drake · October 26, 2014
Could you please post your code so we can see what's up and give you some accurate suggestions.  Thanks.
0 HyJax LTD · October 26, 2014
If the item is inside a fixed wrapper; it will adjust to 100% of THAT available width so its adjusting to 100% of 1000px.

If you want it to go across the entire screen, move it outside the wrapper or remove it from the parent value inside the wrapper.
+1 Wilo Muyoma · October 27, 2014
Thank you guys I figured it out!
0 Ron Butcher · November 1, 2014
CSS3 has two new attributes called vh and vw (viewport height, and viewport width respectively).

You can keep your header in the Wrapper (sometimes it is necessary to make things match up correctly) but set the width to '100vw' and the header will be the full width of the browser no matter the screen resolution.

The only catch is that like a lot of HTML5 new attributes you need to call a modernizer script or something similar when your user has an older browser (ie 9 or lower).
  • 1

HTML / CSS / Web Design


Discuss, share, ask, learn and teach HTML5 and CSS3.