Can parent height be filled when using absolute positioning?

Question

Can parent height be filled when using absolute positioning?

I need to fill the parent height with color bars, but they are absolutely positioned in the top right corner. Is there a way to achieve this dynamically, adapting to the number of lines in the headline?

Take a look at the image and this example.

CSS for the color columns: (for full CSS, refer to the example)

.header .colorColumn { 
width: 18px; 
height: 70px; 
float: right; 
} 
.header .trackColors { 
position: absolute; 
right: 0; 
top: 0; 
}

Additional Question:
How can I make the bars appear behind the text but above the gray background? The z-index solution is tricky when both layers need to be absolutely positioned.

Update 1:
The number of color columns is dynamic - how can it be adjusted to work with a variable number of columns?

css css-position

Answer 1

Answer №1

Is this what you were looking for? The absolute position of the parent and the height: 100% of the color bars...

Here is the link: http://jsfiddle.net/StartStep/jj5b2gnq/5/

.programDetails .header {
    background-color: #404040;
    color: #e6e7e8;
    font-weight: bold;
    font-size: 22px;
    position: relative; /* Used as a reference point for absolutely positioned bars */
}
.programDetails .titles {
    padding: 10px 36px 10px 20px;
}
.programDetails .header .sub {
    font-weight: normal;
    font-size: 14px;
}
.header .colorColumn {
    width: 18px;
    height: 100%; /* Occupies the full height */
    float: right;
}
.header .trackColors {
    position: absolute;
    right: 0;
    top: 0; bottom: 0; /* Stretches the element vertically */
}

JavaScript solution for padding adjustment: http://jsfiddle.net/StartStep/jj5b2gnq/6/

$(document).ready(function() { // Execute as soon as the document is ready
    var columnsWidth = $('.header .trackColors').width(); // Obtain the width of columns
    $('.programDetails .titles').css("padding-right", columnsWidth); // Set the right padding
});

Answer 2

Is this what you were looking for? The absolute position of the parent and the height: 100% of the color bars...

Here is the link: http://jsfiddle.net/StartStep/jj5b2gnq/5/

.programDetails .header {
    background-color: #404040;
    color: #e6e7e8;
    font-weight: bold;
    font-size: 22px;
    position: relative; /* Used as a reference point for absolutely positioned bars */
}
.programDetails .titles {
    padding: 10px 36px 10px 20px;
}
.programDetails .header .sub {
    font-weight: normal;
    font-size: 14px;
}
.header .colorColumn {
    width: 18px;
    height: 100%; /* Occupies the full height */
    float: right;
}
.header .trackColors {
    position: absolute;
    right: 0;
    top: 0; bottom: 0; /* Stretches the element vertically */
}

JavaScript solution for padding adjustment: http://jsfiddle.net/StartStep/jj5b2gnq/6/

$(document).ready(function() { // Execute as soon as the document is ready
    var columnsWidth = $('.header .trackColors').width(); // Obtain the width of columns
    $('.programDetails .titles').css("padding-right", columnsWidth); // Set the right padding
});

Answer 3

Answer №2

Why not consider a different approach altogether? It appears that you are incorporating elements into your DOM (.colorColumn, .trackColors) solely for styling purposes. This practice is generally discouraged, as markup and styling should be kept separate.

If your goal is simply to add two colored stripes, you might want to consider using a box-shadow instead. Here's an example:

header {
    color: #fff;
    background: #777;
    padding: 8px;
    box-shadow: 
        inset -10px 0 0 red,
        inset -20px 0 0 green;
}

There are numerous other techniques to achieve this effect (gradients, pseudo-elements :before and :after, combining a border with an outline, etc.). The key is to find a method that works best for your specific needs without altering your markup unnecessarily!

Here's a demo to illustrate: http://jsfiddle.net/y0jw9x17/

Answer 4

Why not consider a different approach altogether? It appears that you are incorporating elements into your DOM (.colorColumn, .trackColors) solely for styling purposes. This practice is generally discouraged, as markup and styling should be kept separate.

If your goal is simply to add two colored stripes, you might want to consider using a box-shadow instead. Here's an example:

header {
    color: #fff;
    background: #777;
    padding: 8px;
    box-shadow: 
        inset -10px 0 0 red,
        inset -20px 0 0 green;
}

There are numerous other techniques to achieve this effect (gradients, pseudo-elements :before and :after, combining a border with an outline, etc.). The key is to find a method that works best for your specific needs without altering your markup unnecessarily!

Here's a demo to illustrate: http://jsfiddle.net/y0jw9x17/

Answer 5

Answer №3

Dealing with similar issues in the past, I found a solution that worked for me:

When filling a parent container with absolute positioning, I utilize percentages and set the height to 100%.

Instead of using float: right;, which caused confusion for me, I opt for text-align: right; to align elements to the right side.

Answer 6

Dealing with similar issues in the past, I found a solution that worked for me:

When filling a parent container with absolute positioning, I utilize percentages and set the height to 100%.

Instead of using float: right;, which caused confusion for me, I opt for text-align: right; to align elements to the right side.

Can parent height be filled when using absolute positioning?

Answer №1

Answer №2

Answer №3

Similar questions

Does the CSS :not() selector function properly when used with distant descendants?

Unable to see Primereact styles reflected on components

Attempting to place my icon font in a higher position than my link to achieve a similar effect to the one I am currently experiencing with my

Sending data from an HTML textarea to a PHP variable without user input

CSS - sticky header causing issues when resizing the browser window

What is the best way to extract a CSS rule using PHP?

What is the best way to make sure images and text are properly aligned for different screen sizes

Creating a visually stunning image grid akin to the meticulously designed layouts found

Saving a picture to local storage with the file input type in ReactJS

How can I make Firefox render the padding in a textarea the identical way as in a div?

Tips for aligning text to the right within a div using the "justify" text-align property

Issue with jquery .height(value) function not functioning properly on Internet Explorer

Looking to tilt text at an angle inside a box? CSS can help achieve that effect!

What is the most concise way to align one table row in the middle and another at the top?

Adjusting the content of mat-cards to fill in blank spaces

Mastering the art of carousel div creation with Bootstrap

Capture the contents of a table cell and store it in the clipboard

What techniques can be used to resize an image to perfectly fit a square on a webpage?

Show only the portion of the image where the cursor is currently hovering

Is anyone else experiencing issues with their imagemap due to Twitter Bootstrap?