How do i make a rectangle in CSS to cover the width of the screen?
AzureScripts (164)

I want to have a rectangle to go from the left side of the screen, to the right side of the screen.

You are viewing a single comment. View All
heyitsmarcus (314)

@vedprad1 It is a tad more complicated than just width: 100% because percentage is relative to the container of the div and also unless the div has content (or a height specified), this CSS will do nothing on the page.

What you can do to ensure you see a rectangle, regardless of where the element is declared on the page, is to use the following CSS on an element such as a div:

div {
  position: fixed;
  top: 0;
  left: 0;
  height: 80px;
  width: 100vw;
  background: dodgerblue;

The position fixed property will cause it to be a sticky rectangle that you can move around the screen with the top, bottom, left, and right properties. You must either have content inside the div itself or a height property for the rectangle to show up. Also, the vw unit is always relative to the viewport, so 100vw is the entire width of the window. Only use % if you know what you're doing; otherwise, you'll end up with strange behavior you weren't expecting.

Here's a repl of the behavior: