Creating vertical lines that extend the full height of a webpage: Frontend techniques

Question

Creating vertical lines that extend the full height of a webpage: Frontend techniques

My goal is quite straightforward and you may have come across it on other websites before.

I want to create thin lines (1px) that match the column borders and extend from the top to the bottom of the page. These lines should always be visible and on top of the content.

I am using bootsrap 5 for this task.

Here is a reference screenshot:

https://i.sstatic.net/6pR6b.png

My approach involved creating a container with absolute position, 100% height and 6 different bordered columns with a higher z-index than the page content.

The visual outcome turned out perfect.

However, due to it being on top of the main content, users are unable to interact with the page as the container sits on top of everything.

Here is the code snippet that I am using:

<div class="container-fluid position-absolute top-0 z-990 h-100 d-none d-md-block">
   <div class="container h-100">
      <div class="row h-100">
         <div class="col-2 border-start border-end"></div>
         <div class="col-2 border-end"></div>
         <div class="col-2 border-end"></div>
         <div class="col-2 border-end"></div>
         <div class="col-2 border-end"></div>
         <div class="col-2 border-end"></div>
      </div>
    </div>
 </div>

css twitter-bootstrap user-interface frontend bootstrap-5

Answer 1

Answer №1

If you're looking to achieve a similar effect, you can utilize the background-image css property along with repeating-linear-gradient.

.bg-lines {
  background-color: #ffffff;
  opacity: 0.8;
  background-size: 60px 60px;
  background-image:  repeating-linear-gradient(to right, #dfdfdf, #dfdfdf 1px, #ffffff 1px, #ffffff);
}

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
  </head>
  <body class="bg-lines">
  </body>
</html>

UPDATE

To apply the effect to the covered DOM element, you can include pointer-events:none css. For instance:

.cover-lines {
  background-color: transparent;
  background-size: 60px 60px;
  background-image:  repeating-linear-gradient(to right, #dfdfdf, #dfdfdf 1px, transparent 1px, transparent);
  
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  
  pointer-events: none;
}

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <button>Test</button>
    <div class="cover-lines"></div>
  </body>
</html>

Reference:

Answer 2

If you're looking to achieve a similar effect, you can utilize the background-image css property along with repeating-linear-gradient.

.bg-lines {
  background-color: #ffffff;
  opacity: 0.8;
  background-size: 60px 60px;
  background-image:  repeating-linear-gradient(to right, #dfdfdf, #dfdfdf 1px, #ffffff 1px, #ffffff);
}

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
  </head>
  <body class="bg-lines">
  </body>
</html>

UPDATE

To apply the effect to the covered DOM element, you can include pointer-events:none css. For instance:

.cover-lines {
  background-color: transparent;
  background-size: 60px 60px;
  background-image:  repeating-linear-gradient(to right, #dfdfdf, #dfdfdf 1px, transparent 1px, transparent);
  
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  
  pointer-events: none;
}

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <button>Test</button>
    <div class="cover-lines"></div>
  </body>
</html>

Reference:

Creating vertical lines that extend the full height of a webpage: Frontend techniques

Answer №1

UPDATE

Similar questions

Explore the world of interior CSS border styles

Interactive sidebar scrolling feature linked with the main content area

Choose the radio button upon clicking away from the input field

Is there a way to determine the orientation of an image in React-Native, whether it is horizontal or vertical

Modify the color of CSS for all elements except those contained within a specific parent using jQuery

Tips for setting a uniform width for all bars in apexcharts bar column width

Specify padding or margin for all sides in a single line of XML code

yii2 truncates CSS classes in the email templates

Can you please provide me with detailed instructions on how to use the radio button?

What methods does Coinbase use to achieve this effect? Is it possible to recreate it in a React application? (Dropdown menu positioned relative to a button on hover or click

What is the procedure for automatically playing the next audio track in HTML5 after the current one finishes playing

Display or conceal various content within div elements using multiple buttons

Modifications to the toolbar styling are made by the Angular Material mat-form-field

Can CSS achieve Turing completeness?

Is Angular 2 Really Suitable for Multi-Page Applications?

Error Encountered: Unable to Locate 'bootstrap' label in Bootstrap 5 Popover

The switch statement within Angular returns null when using getElementById()

Updating the user interface in a distinct class outside of the controller in JavaFX

Placing the input-group-addon above the text-input for better positioning

Is there a way to vertically align the content of two <li> elements when one contains an image within an anchor tag?