Is it possible to have my div inherit its height and position from one div, while inheriting its width from another div

Question

Is it possible to have my div inherit its height and position from one div, while inheriting its width from another div

I am facing an issue with a div (div1) nested inside other divs. I want this div to span the full width of the display but maintain the same height and position as its parent div (div2). I have experimented with using position: absolute; on div1, but encountered difficulties in achieving the desired layout.

One approach involved setting the body to position: relative; to enable div1 to occupy 100% width while struggling to synchronize its height with that of div2.
Alternatively, setting the parent div (div2) to position: relative; allowed div1 to fill 100% height but presented challenges in matching its width with that of the body.

It would be beneficial if CSS offered functionality like:

.div1 {
height: 100%(.div2);
width: 100%(body);
position: 0(.div2);
}

Or something similar

JSFiddle showcasing the relevant details: https://jsfiddle.net/Hamleyburger/fqe5o46c/1/#&togetherjs=K02DaSO2nR

My goal is to have the div ".selectable" contain a sub-div (inside?) that appears on hover, aligning in height with ".selectable" (its parent) and spanning the entire width of the body.

Additional information that may be pertinent: I incorporate Bootstrap and (Jinja2) templating. The widths of the existing divs derive from a wrapper container (.main) in my base template which is intentionally set narrower than the body for responsive design. If I were to eliminate .main div, adjusting individual div widths becomes necessary. While this solution might work by making non-div1 divs narrower, it lacks DRYness. SASS is utilized in my workflow.

html css sass bootstrap-4 styling

Answer 1

Answer №1

One way to make a div expand to the full width of the viewport is by using the unit vw. It may seem a bit unconventional, but it can be done like this:

body,
html {
    margin: 0;
    padding: 0;
}

.outer {
    width: 300px;
    height: 300px;
    background-color: #eeeeee;
    margin: 0 auto;
    position: relative
}

.inner {
    width: 100vw;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

<div class="outer">
    <div class="inner"></div>
</div>

If you prefer a more straightforward approach, you could make the outer div fill the entire width and specify a width for the inner div:

body,
html {
    margin: 0;
    padding: 0;
}

.outer {
    width: 100%;
    background-color: #eeeeee;
    position: relative
}

.inner {
    width: 300px;
    height: 300px;
    margin: 0 auto;
    background-color: rgba(0, 0, 0, 0.1);
}

<div class="outer">
    <div class="inner"></div>
</div>

Answer 2

One way to make a div expand to the full width of the viewport is by using the unit vw. It may seem a bit unconventional, but it can be done like this:

body,
html {
    margin: 0;
    padding: 0;
}

.outer {
    width: 300px;
    height: 300px;
    background-color: #eeeeee;
    margin: 0 auto;
    position: relative
}

.inner {
    width: 100vw;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

<div class="outer">
    <div class="inner"></div>
</div>

If you prefer a more straightforward approach, you could make the outer div fill the entire width and specify a width for the inner div:

body,
html {
    margin: 0;
    padding: 0;
}

.outer {
    width: 100%;
    background-color: #eeeeee;
    position: relative
}

.inner {
    width: 300px;
    height: 300px;
    margin: 0 auto;
    background-color: rgba(0, 0, 0, 0.1);
}

<div class="outer">
    <div class="inner"></div>
</div>

Is it possible to have my div inherit its height and position from one div, while inheriting its width from another div

Answer №1

Similar questions

What is the best way to add a transition to a list element so that it expands in size without impacting its background image or the surrounding list items?

Tips for incorporating scrollbars into a full screen web application's content area that spans the entire height of the screen with CSS

Troubleshooting the problem with Bootstrap 4 dropdowns not opening

Is there a way to prevent errors from appearing when using PHPMailer, ensuring that the email is sent and received successfully without any error messages showing

When integrating React with Tawk, the user's name and email are automatically encoded before being sent

Ionic2 - Ion-select malfunctioning on a particular page

Modifying drop down select list by adding or removing options entirely

Dynamic background scaling for Wordpress sections - is it responsive?

What are the ways to integrate JSON data into Angular?

Display the current date on a webpage using a Google calendar integration

Identify whether the file is suitable for downloading via UIWebview

Looking for the location of a matching brace in a dataset?

Exploring ways to tailor regex for tel input type in HTML5

Encountering a display issue with Facebook page iFrame on a Bootstrap Template when integrating Laravel as the backend for embedding the iFrame

Utilizing Bootstrap to emphasize the selected navbar item by adding the active class upon

Exploring the Interaction of Users with HTML Table Cell <td>

Troubleshooting issue: Failure in proper functionality of Jquery's slideDown

Tips for identifying when the value of a div changes using Selenium

Combine three sets of columns with three additional sets of columns using the Bootstrap framework, without considering their sizes

Is it necessary to update the HTML lang attribute when switching between languages dynamically?