Can you make a vertical line that remains a constant size even when the window is resized?

Can someone help me with this? I'm not sure if I'm using the right values for top, left, and bottom. Here's an example below:

div.line {
    width:4px;
    background-color: black;
    position: fixed;
    top:180px;
    bottom:400px;
    left:130px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ed8f8282999e999f8c9dadd8c3ddc3ddc08f88998cdc">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
    <link rel="stylesheet" href="test2.css">
    <title>test</title>
</head>
<body>
    <div class="container">
        <div class="line"></div>
    </div>
</body>
</html>

Thank you in advance!

htmlcssbootstrap-4

Answer №1

div.line {
    width:4px;
    background-color: black;
    position: fixed;
    top:0;
    bottom:0;
    left:50%;
    transform: translateX(-50%);
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0e6c61617a7d7a7c6f7e4e3b203e203e236c6b7a6f3f">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
    <link rel="stylesheet" href="test2.css">
    <title>test</title>
</head>
<body>
    <div class="container">
        <div class="line"></div>
    </div>
</body>
</html>

The line you have included is not displayed properly in the preview window due to size constraints. I made some adjustments to your code so that the line can be visible within the margins provided - 180px from the top and 40px from the bottom. Is this how you intended the appearance of the line to be?

Answer №2

The positioning of the top and bottom elements actually determines a relative height.

You have the option to include a min-height property... This could potentially override the bottom positioning.

div.line {
    width:4px;
    background-color: black;
    position: fixed;
    top:180px;
    bottom:400px;
    left:130px;
    
    min-height: 580px; /* Specify the desired value here */
}
<!DOCTYPE html>
<html lang="en>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3e5c51514a4d4a4c5f4e7e0b100e100e135c5b4a5f0f">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
    <link rel="stylesheet" href="test2.css">
    <title>test</title>
</head>
<body>
    <div class="container">
        <div class="line"></div>
    </div>
</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

downloading responsive design

Using media queries to define backgrounds with separate images based on browser size: @media (min-width:1440px){div.container{background:URL('bg1440.png');}} @media (min-width:960px){div.container{background:URL('bg960.png');}} @media ...

htmlcssmedia-queries

Design a layer that rests on top of a specific table column

I am currently working with a table that consists of 5 columns (city, 1st quarter, 2nd quarter, 3rd quarter, 4th quarter). My goal is to create an overlay on each column if we have already passed a specific quarter. However, I am encountering difficulties ...

htmlcss

Creating a variety of Flexslider slideshows on the fly

Check out this snippet of code: <?php foreach ($objVideos as $objVideo) : ?> jQuery('#carousel-<?php echo $objVideo->id; ?>').flexslider({ animation: "slide", controlNav: false, animationLoop: false, ...

javascriptjqueryhtml

How to exclude an article in a Django query

I am facing an issue with my query set named most_viewed which contains only one element. I need to exclude this particular element from the other articles section as it is already displayed in the main section. The error message "Not enough values to un ...

pythonhtmldjango

Persist with displaying and concealing divs as we navigate through different pages

Incorporating a function into my main page has been successful so far, but I am seeking guidance on how to effectively utilize the function: localStorage.setItem("language", selectedLanguage); currentlanguage= localStorage.getItem("language"); My object ...

javascriptjqueryhtmlcssshow-hide

changing html numbered list to xml format

Looking to convert HTML ordered lists with different types into XML markup? <ol type=a> <li>This is list item a</li> <li>this is list item b</li> </ol> <ol type=i> <li>This is list item 1</ ...

htmlxmlxslt

JavaScript's 'Alert' Function Fails to Display My Success Notification

Hey there! I've been working on a website and just adding the finishing touches to a page. I recently incorporated an HTML form that allows users/readers to input their 'full name', 'email', and a 'message'. I connected t ...

javascripthtmlformsalert

SignalR enables the display of identical dashboard data pulled from queries on various browsers. By utilizing SignalR/hub, MVC, and C#.NET, the data can

Encountering an issue with my signalr/hub while fetching dashboard data. I'm using 2 browsers to access data based on dates. However, when searching for July on browser 1 and then switching to another month on browser 2, the data in browser 1 gets upd ...

javascriptc#cssmodel-view-controllersignalr-hub

jQuery Slider not appearing on the page

I am attempting to incorporate the Basic jQuery Slider into my website. Below is the code I have used: For HTML file: <div id="slides"> <ul class="bjqs"> <li><a href="somelink"><img src="someim ...

javascriptjqueryhtmlcss

Looking to adjust line-height property for text with different line heights

I am struggling with adjusting the line-height of row-based text content in HTML enclosed in <p> tags. The challenge I'm facing is that the text could vary in length, resulting in either one or two lines. If it's a single line, it should co ...

jqueryhtmlcssheightline

The removal of a JQuery element can result in causing the webpage to become unresponsive and lead to

When attempting to create a loop in JQuery to remove elements from my HTML, I encountered an issue where the function caused my browser to hang and become unresponsive. Here is the JQuery code I used: function removeElement(){ var i =0; ...

javascriptjqueryhtml

Adjust the width of the table after refreshing it for 10 seconds when resizing the column?

I am facing an issue with a page that refreshes every 10 seconds and has a resizable column feature. However, after the page refresh, the table header (th) reverts back to its original position. The main question is how to obtain the width of a specific ...

javascriptjqueryhtmlcss

Is there a way to ensure that my background color extends across the entire webpage background?

I'm curious about how to make sure that the background color of sections 1 and 2 fills the entire webpage, similar to this example. Currently, the background color only covers half of the webpage, but I want it to extend across the entire background o ...

css

The inline variables in CSS transitions are failing to be detected

The CSS transitions are not recognizing the inline variables, or if they are, they are not receiving the correct information. Below is an illustration of how the inline variables are defined in the HTML: <p class="hidden" style="--order ...

javascripthtmlcss

Elements in Internet Explorer become unresponsive after being hidden or shown using jQuery

One issue I'm encountering is with a group of tabbed divs that I'm using jQuery hide() and show() to toggle the visibility. This method functions perfectly in most browsers, but unfortunately in Internet Explorer (IE), the hidden tabs become unre ...

jqueryhtmlcssinternet-explorer

Encountered an issue while trying to reset the dropdown menu values on a Dash application when utilizing a clear button

I'm attempting to add a clear button for users to reset the values in a dropdown menu. However, when I run the application, I encounter the following error preventing me from selecting an option in the dropdown: Unable to access property 'leng ...

pythonhtmlcssweb-applicationsplotly-dash

What steps are involved in implementing an ordering system on a restaurant's website using React?

As I work on developing my portfolio using React, I'm interested in incorporating an online ordering feature. However, the information I have found through Google so far hasn't fully addressed my questions. Can anyone provide guidance on the best ...

javascripthtmlreactjse-commerce

I'm unable to modify the text within my child component - what's the reason behind this limitation?

I created a Single File Component to display something, here is the code <template> <el-link type="primary" @click="test()" >{{this.contentShow}}</el-link> </template> <script lang="ts"> imp ...

javascripthtmltypescriptvue.js

Triggering div visibility based on jQuery select change event

I am currently working on a form feature that involves showing a div when a specific option in a select element is chosen, and hiding the div when the option is not selected. Here is the current structure of my markup: Here is the current HTML markup I ha ...

jqueryhtmlhideshow

The default value for an input of type date should be set to the current date

I am working on a project that involves an input field with the type of "date". I have implemented Materialize to provide a user-friendly date picker. My goal is to set the default value of this input field to the current date when it is initialized. Here ...

htmltypescriptmaterialize