How to make a web page that will span the full width of any laptop or desktop monitor it is viewed on without horizontal a scroll bar

Get Help Make & Deploy a Website
,
#1

I have gone through the web development course and have completed it. However, I still have this singular issue that has always given me concern. It is about making a webpage to span the full width of a PC monitor, without showing horizontal scroll bars, regardless of the monitor it is being viewed on.

I often connect an external monitor to my PC while working or learning, making it a total of 2 monitors in use. I have made a few web pages but have discovered that if I have to align the items on the page as I want, then the page will have a horizontal scroll bar and prevent certain contents to be hidden until I scroll to either sides of the page and I do not want this.

My question is;

How can I make a page, what attribute or style should I include so that the horizontal scroll bar does not show when I maximize the page to take the full width of the monitor it is being viewed on?

Thanks as I anticipate a favourable response.

#2

I really don’t know why you want to hide the scrollbar but just know you won’t be able to scroll on the page.
This is the property to hide the scroll bar

overflow: hidden;

or if you only want to hide the vertical or horizontal scroll bar

overflow-y: hidden; /* Hide vertical scrollbar */
overflow-x: hidden; /* Hide horizontal scrollbar */
#3

No! I do not mean to hide any scroll bars. I just want to have a page that fits well on any monitor PC or external monitor.

The scroll bar should show up normally when I minimize the page to a certain size. But when the page is maximized, it should take up the full width of the monitor and have everything on the page visible without the need for a scroll bar.

Do you understand what I mean?

I see so many pages that don’t have horizontal scroll bars, example is this one we’re on now (CC), You can only see a horizontal scroll bar when you minimize the page below a certain size.

I hope this makes sense.

Thanks

#4

Use CSS to set body or a containing div to width: 100%;
Example:

body {
  width: 100%;
}

Or make a div set an id (ex: id=“page”), and put the rest of the page within that.

#page {
  width: 100%;
}

If you’re manually repositioning things to the side, you may need overflow-x: hidden; to prevent spillover on the side that doesn’t respect the pages boundaries.

1 Like