Making a rubber layout, set the minimum width of the body and made it so that the heder and footer stretched across the width of the window, and all the content between the mini-center:

 body{ ... min-width: 1024px; ... } header, footer{ ... width: 100%; ... } main{ ... width: 1024px; margin: 0 auto; ... }

Firstly, such a solution did not lead to the fact that at 1024px there is no horizontal scroll bar: they disappear only somewhere at 1260px.

If the initial screen size is less than 1260px scroll to the left, then to the right will be empty space, as shown in the figure below:

enter image description here

My questions are:

  1. How to remove a scrollbar with window widths up to 1024px?
  2. How to remove empty space for any window width?
  • 1. Remove scrollbar up to 1024px by removing body min-width: 1024px . The scrollbar appears because the minimum width is set. 2. Without your code it is difficult to understand what could be the problem. How to create a minimal, self-sufficient and reproducible example - stackanon
  • If you remove the minimum width of the body, then the header and footer will no longer stretch across the width of the screen when it is more than 1024px, and thus it will no longer be a rubber imposition. - Bokov Gleb
  • the header and footer will stretch with a width of more than 1024px, if you do not specify body min-width: 1024px jsfiddle.net/jg6cu877 . Scrollbar to 1024px still appears due to main width: 1024px; . - stackanon
  • Thank you for your decision. Unfortunately, when I began to adapt it to my situation, another problem arose. I considered it in a separate question . - Bokov Gleb
  • Stackanon, can you still find out why the scrollbar appears because of main width: 1024px ;? After all, once the main width: 1024px; and is located exactly in the middle of the parent block, then, in theory, there should be no scrollbar with widths less than 1024px. - Bokov Gleb

0