htmlcssdomwidthpage-layout

How can I make an element as wide as the page width including scrolling?

In the snippet below, the footer takes the whole width of the visible part of the page, but as soon as scrolling happens, it is apparent that the footer is shorter than the whole page, because of the scrolling.

How can I express the intent of "making a element as wide as the whole page, incuding the area not visible because of scrolling"?

<style type="text/css" media="screen">
* {
  margin: 0;
}
footer {
  width: 100%;
  border: 1px solid black;
}
</style>
<main>
mainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmain
</main>
<footer>
  footer content
</footer>

What puzzles me, is that, as far as I can tell from the dev tools, the whole html element is just as wide as the initially visible area; if I scoll a bit to the right and then hover with the mouse on the <html> element in the Elements tab of Chrome dev tools, I see the the blue-ish overlay only covers the original part of the view, and not the part become visible after scrolling: enter image description here

Solution

  • The issue isn't that the footer isn't extending the full width: it's that the text element you have is wider than its container.

    The width % of the footer is being defined by its parent element (in this case main HTML element, which is getting its width from the screen). The text, on the other hand, is not being contained and is running "out of bounds" so to speak. If you hide the overflow on the parent element of the text the issue is fixed.

    One reason not to use breakword is that I'm assuming your real-life use case isn't a single line of text with no breaks and is more likely an image or other element that is extending beyond the document width.

    <style type="text/css" media="screen">
main {
  overflow-x: hidden; //hide the page overflow
}
* {
  margin: 0;
}
footer {
  width: 100%;
  border: 1px solid black;
}
</style>
<main>
mainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmain
</main>
<footer>
  footer content
</footer>