Sample code for displaying a scroll bar after the HTML page is zoomed out

Here is a record of how to make a scroll bar appear at the bottom after the HTML page is reduced in size, so that you can scroll the scroll bar to browse the areas that are covered by the reduced interface.

Talk about the benefits of doing this.

First of all, generally, when the interface is reduced in size, no scroll bar appears, and users cannot access hidden areas, so the interface must be enlarged.

Secondly, due to the relative or absolute layout of some interfaces, as the interface becomes smaller, the interface on the right will move to the bottom, which may make the interface layout unsightly. The most worry-free method is to display the scroll bar after shrinking it.

The implementation is very simple, just a few lines of code

body{
    min-width: 1200px;
    overflow: scroll;
    /*max-width:100%;*/
}

Knowledge point expansion:

Scroll bar appears automatically when html page is zoomed out

Just import this style and set the attributes in the body as required.

<style>

body{
  margin:0px;
  width:100%;
  min-width:1500px;
  max-width:100%;
  height:100%;
  background-color:#F0F0F0;
}
#head{
  background-color:#FFFF00;
  width:100%;
  height:100px;
}
#center{
  background-color:#00FFFF;
  width:100%;
  min-height:100%;
}
#foot{
  background-color:#FF00FF;
  width:100%;
  height:100px;
}
</style>

This is the end of this article about the sample code for displaying a scroll bar when the HTML page is reduced in size. For more related content on displaying a scroll bar when the HTML page is reduced in size, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future!