Creating a child div that expands to the same size as its parent div using CSS only

Question

Creating a child div that expands to the same size as its parent div using CSS only

I am looking to create two div elements with 100% height.

The parent div should display an image and adjust its size automatically.

The child div should act as a color filter and maintain the same size as the parent div even when the page is resized.

I have come across similar solutions online where the child div either enlarges or shrinks compared to the parent div when resizing the page.

.main_slide_back {
    top: 0px;
    left: 0px;
    margin: -8px 0 0 -8px;
    width: calc(100% + 16px);
    height: 100%;
    z-index: 1;
}
.main_slide_back:after {
    content:'';
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    position: absolute;
    background: #08598D;
    opacity: 0.4;
}
.main_slide_back img {
    width: 100%;
    height: 100%;
}

Check out this Fiddle

Thank you in advance. Tobi

html css resize

Answer 1

Answer №1

To make it work, simply include a relative position to the ancestor element. Check out the updated fiddle.

.main_slider {
    position: relative;
}

Answer 2

To make it work, simply include a relative position to the ancestor element. Check out the updated fiddle.

.main_slider {
    position: relative;
}

Creating a child div that expands to the same size as its parent div using CSS only

Answer №1

Similar questions

Hamburger icon is failing to appear in the collapsed navbar for certain items

What strategies can be implemented to increase the number of backlinks?

Positives and negatives images for accordion menu

Using jQuery to dynamically swap out <tr> tags and all the elements inside of them

I'm having an issue with my link hover effect - it seems to be causing my link to disappear, despite the fact that the hover effect

Go to a distant web page, complete the form, and send it in

Internet Explorer is automatically inserting extra vertical space after the first list item in a basic menu design

Smooth scrolling feature malfunctioning in mobile view

Improving the way text entered in an input box is displayed using HTML table cells

Guide to autoplay an uploaded mp4 video in a flask application

Activating the onclick function to open a tab and automatically position the cursor inside a textfield

What could be causing a react element to fail to update?

Troubleshooting problems with CSS menus and submenus, along with addressing browser pixel issues specific to Web

Creating a Loop for Tabs on an HTML Form

Ensure the content spans the full width of the container without displaying an overflow scrollbar by using the "position: absolute

Tips on building a blog using solely index.html, style.css, and script.js files

Is there a way to alter visibility once a radio button has been selected?

javascript snippet for extracting the dynamically created div IDs

UTF-8 encoding experiencing issues on select Android mobile devices

Achieve hover overflow effect in HTML and CSS without altering element positions