Achieve a vertical fill effect within a parent container using CSS to occupy the remaining space

I have set my sights on a specific goal.

https://i.sstatic.net/BqqTX.jpg

This represents my current progress in achieving that goal.

https://i.sstatic.net/unQY9.jpg

On the left side, I have an image with a fixed height.

The aqua color fills the left side perfectly to match that height.

Then on the right column, there is a blue section followed by a green section below it that should expand vertically to fill all remaining space. However, the expansion of the green section is not working as intended.

Below is the code snippet that showcases my efforts:

<div class="full-page">
    <div class="display-row">
        <div class="col-lg-5 age-update rounded-border">
            <div class="image-container"></div>
        </div>
        <div class="col-lg-7 ml-15 scale-height">
            <div class="info-banner rounded-border">
                <div>
                    <p>Free Civ Pool</p>
                </div>
                <div>
                    <p>Rotation Aug 18th</p>
                </div>
            </div>
            <div class="events-banner rounded-border"></div>
        </div>
    </div> </div>

Additionally, here is the relevant CSS code I've used:

.full-page {
    margin: auto;
    width: 95%;
}

.full-page p {
    color: white;
}

.display-row {
    display: flex;
}

.rounded-border {
    border-color: black;
    border-width: 2px;
    border-style: solid;
    border-radius: 15px;
}

.age-update {
    position: relative;
    /* Set the desired reduced height for the container */
    height: 300px; /* Adjust the value as needed */
    overflow: hidden; /* Hide any overflow from the image */
}

.image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('src\assets\images\age3update.jpg');
    background-size: cover;
    background-position: center;
}

.scale-height {
    flex-grow: 1;
    background-color: aqua;
}

.info-banner {
    background-color: blue;
    height: min-content;
}

.events-banner {
    flex-grow: 1;
    flex-direction: column;
    background-color: rgb(81, 255, 0);
}

I am new to CSS and eager to grasp different concepts within it.

Answer №1

To accomplish this task, utilize Flexbox: Transform scale-height into a flex element with a column flex direction.

.scale-height {
    flex-grow: 1;
    background-color: aqua;
    display: flex;
    flex-direction: column;
}

That's all you need to do as you have already included flex-grow: 1; for the .events-banner class.

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

utilize a modal button in Angular to showcase images

I am working on a project where I want to display images upon clicking a button. How can I set up the openModal() method to achieve this functionality? The images will be fetched from the assets directory and will change depending on the choice made (B1, ...

Using JavaScript to add a class when hovering over an element

I am trying to customize the ul inside one of my li elements in the nav by adding a class when hovered. However, I am encountering an issue where the menu disappears when I try to click on it after hovering over it. I want to achieve this functionality usi ...

AngularJS 1: Dynamically updating input values in real-time

Hey everyone, I'm experimenting with Angular and have encountered a roadblock. I am trying to assign values to an input element using ng-repeat for a list of parameters. <input type="text" ng-model="parameters.inParameterName" class="form-control ...

Sending AJAX data by clicking a link in Laravel 5

I am new to working with ajax and Laravel 5 I am facing some issues with passing data when clicking on a link. Let me explain what I am trying to achieve. Here is my HTML code: //this is the div that I want to append with data for each <div id="warun ...

How to insert an image into a placeholder in an .hbs Ember template file

I'm looking to enhance a .hbs template file in ember by incorporating an image. I am not a developer, but I'm attempting to customize the basic todo list app. <section class='todoapp'> <header id='header'> & ...

Unable to load XML in Chrome using JQuery

Can anyone explain why the code below works in Firefox but not Chrome? I'm currently testing it on my local machine. Thanks for any insights you can provide! <html> <head> <script type="text/javascript" src="jquery.js"> ...

Guide on invoking a JavaScript function within a jQuery upon a specific event, such as clicking a hyperlink

I have a website page where I display some important information. However, I want to make this text hidden initially and only visible when a user clicks on a specific link or button. I attempted to achieve this functionality using the following code snippe ...

There seems to be an issue with d3js bar charts as they are not displaying on the screen and there

Recently, I started delving into the world of D3js and decided to try my hand at creating some bar charts. However, despite my efforts, the bar charts failed to display on the screen. <!DOCTYPE HTML> <html> <head> <title> My D3 Pra ...

`To position an element within a div without affecting its layout, use absolute positioning``

Is it possible to add an element to a div that is aligned to the right but still sits on top of the other element within the div? Here are some images to illustrate the issue: https://i.sstatic.net/dW7ev.png The problem arises when you try to center the ...

Ways to conceal one message within another

I am currently working on incorporating Facebook's comments box into my website. My goal is to have the comments that I retrieve through GET requests and display in the template remain invisible to users, but visible to search engines. As part of an ...

I'm interested in utilizing Angular JS $anchorScroll to quickly navigate to the top of a page by using <a href>

Could you assist me in properly executing $anchorscroll with an href like this? Html: </div> <div> <a class="button" ng-click="scrollTo('section')" ng-href="#{{url}}" title="{{section}}">Next</a> </div> ...

Exploring the latest features in Bootstrap 4 Alpha and enhancing your

Rumors have it that Bootstrap 4 will make its debut during the year 2016. When duty calls for an upgrade, is a complete re-write truly the best solution? Tackling such a project from Boostrap 2 to 3 was no small feat, and I find myself hesitant to take on ...

Focused input filter in a tabular header style

I've been working on customizing the Tabulator header filter to have a more "flattened" style, as requested by my boss. In my CSS, I added the code ...input:focus{border:1px solid #1bb394} to change the input border to 1px green. While this change tak ...

MUI: Issue with pseudo element appearing cropped outside of Paper container

I am facing an issue where a red arrow pseudo element '::before' is partially cut off outside its container '.MuiPaper-root'. I need the arrow to remain visible, any suggestions on how to fix this? Here is the relevant code snippet and ...

Trouble expanding Bootstrap Dropdown menu on mobile devices

I am currently facing an issue with a Bootstrap navbar that includes a dropdown menu for selecting courses. On my desktop, everything works perfectly fine when I click on the courses tab. However, when I try to select a course on mobile, nothing happens. ...

Ways to verify the content within two separate p elements

<p> expanded state:</p> <P> true </p> Merging the text from both tags into a single output. Final Output: expanded state: true ...

What steps should I take to design and implement this basic search form?

Essentially, I have a three-page setup: - One page containing all possible search results such as: 'search result 1' 'search result 2' 'search result 3' - Another page with a search form and enter button. - And finally, a res ...

jQuery Load - Oops! There seems to be a syntax error: Unexpected token <

Error: Uncaught SyntaxError: Unexpected token < I encountered the error message mentioned above while trying to execute a jQuery load function: $('#footer').load(UrlOfFooterContent); The variable UrlOfFooterContent holds the URL of an MVC c ...

Sending data from Node.JS to an HTML document

Currently, I am working on parsing an array fetched from an API using Node.js. My goal is to pass this array as a parameter to an HTML file in order to plot some points on a map based on the API data. Despite searching through various answers, none of them ...

Creating an HTML Page and Hosting it on a Server

Currently, I am in the process of learning how to set up an HTML page on a server. Although I have managed to do so, the problem is that an index page appears by default. I do not want this page to show; rather, I would prefer my home page to be visible. Y ...