Tips for adjusting the height of both an iframe and a div to fit perfectly at 100% combined

Struggling to make an iframe and div both have 100% full height on the page? I need a footer menu with 280px height, leaving the rest of the page for the iframe.

After extensive research, it seems like jQuery might be necessary as CSS Flex didn't work for me.


<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8>
    <:title>Title</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <header class="header-flex">

                <div class="map">
                    <h2>One</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error ut.</p>
                </div>

                <div class="footer">
                    <h2>Two</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error ut.</p>
                </div>

            </header>
        </div>
    </div>
</body>
</html>

Any thoughts on how to achieve this?

Cheers!

javascriptjqueryhtmlcssiframe

Answer №1

Here is a live demonstration using CSS Flexbox:

body,
html {
  min-height: 100%;
  height: 100%;
  margin: 0;
}
.header-flex {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.map {
  background: red;
  flex: 1;
}
.footer {
  background: blue;
}
<header class="header-flex">

  <div class="map">
    <h2>One</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error ut.</p>
  </div>

  <div class="footer">
    <h2>Two</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error ut.</p>
  </div>

</header>

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

How can I bring in a dynamic MaterialUI theme object from another file?

Could anyone provide guidance on the correct syntax for importing a dynamic theme object from a separate file? I am attempting to retrieve the system theme based on a media query and then dynamically set the theme. Everything works as expected when all t ...

javascriptreactjsmaterial-ui

To style the input box, apply the CSS properties "filter: alpha(opacity=70);" and "background-image: url(image.png);"

Individual functionality for both the form and css has been achieved, but when trying to implement them together, they do not work as intended. This integration is specifically for a windows sidebar gadget. Here is the structure of the form: <form nam ...

javascriptcssfilterbackground-imageopacity

What is the purpose of setting the image border to inline block?

When I added a span element as the circular border to my image, which is placed inside a span tag, I observed that the span tag was being pushed down. By giving the span a display:inline-block property, the issue was resolved. But why does this happen? ...

htmlcss

What is a simple way to ensure that my image retains its square shape on a responsive design without having to use numerous media queries?

I've been searching for solutions to my issue, but none of them have worked for me so far. I am working on a form where users can edit or add images, and I want each image to be displayed as a square regardless of the device being used (desktop, mobil ...

cssimagebootstrap-4responsive

Personalized HTML Selection Arrow Graphic

I am seeking a solution to hide the default arrow of the HTML select list and instead add a custom image (arrow) to the list. https://i.sstatic.net/HF7vO.png .form-inline select { margin: 10px 35px 15px 0px; background-color: #fff ...

htmlcssstylesheet

Updating cluetip content post webpage loading

I need to update the content within a cluetip after the page has finished loading. Imagine there's a button inside the cluetip and upon clicking it, I want it to disappear. Here is the cluetip setup: $('a.notice_tooltip').cluetip({activa ...

javascriptjquerycluetip

How can a list of objects in a JPA entity with a many-to-one relation to a data entity be sorted based on the result of a method call from the data entity?

In my JPA entity User, there is a OneToMany relation to a UserStats entity. I made changes to the code to use UserStats instead of storing victoryRatio directly in the User entity. Now, calculateVictoryRatio() method is implemented in the UserDetails entit ...

javascriptjavareactjsspringspring-boot

Validate that a string is a correct file name and path in Angular without using regular expressions

Currently, I am using regex to determine if a string is a valid file name and path. However, when the string length becomes longer, it ends up consuming a significant amount of CPU, resulting in browser performance issues. public static readonly INVALID_F ...

javascriptregexangularfilenamesfilepath

Sending data between components in Angular can be achieved by using various methods. One common approach is to utilize

I am encountering an issue with a component named customers.component Below is the code from the customers.component.ts file: @Component({ selector: 'app-customer', templateUrl: './customer.component.html', styleUrls: ['./cu ...

htmlangulartypescript

send back the result to the primary function

I need help with this code. I'm trying to return the budget from callbacks in the main function. How can I return a value from the main function? // This method returns the current budget of the user getCurrentBudget: function (req) { var reqTok ...

javascriptnode.jsmongoose

Hide the entire TR if Mysql equals zero

How can I apply the style "display: none;" to an entire TR if the result from row credits is 0? Should I achieve this using CSS or a MySQL query? <?php $username = "root"; $password = ""; $database = "aaa"; $mysqli = ne ...

phpcssmysql

Tips for Avoiding Line Breaks in CSS Divs

I am currently designing a website menu with items such as Home, Contact us, and About us. Each item is styled with a background color and text size of 125X30. I initially used the float property in CSS to align them correctly in a single line from left ...

phphtmlcsslayout

Sustain unbroken websocket connection with Discord using Node.js

I've been working on developing a Discord bot using the raw API, but I've encountered an issue where the bot stops functioning after some time. I suspect that this is due to neglecting to maintain the websocket connection. How can I ensure that ...

javascriptnode.jswebsocketdiscord

Transforming a Multi-Dimensional Array into an HTML Table

Experimenting with a new idea. I hope the solution is straightforward; I just can't seem to figure it out. Imagine I have an array like this: var items = [[1,2,3],[4,5,6],[7,8,9],[10,11,12]]; My goal is to rearrange the data so that it looks like t ...

javascriptjqueryhtmlarrayshtml-table

Using Node.js to Merge the Responses of Two Results

Here is the code snippet for fetching a list of users associated with a particular ID from this service.ts file. async getId(id: number) { // Code to retrieve participants list based on ID let participants = await this.participantRepo.findById( ...

javascriptnode.jsnestjstypeorm

Using JavaScript to extract data from a JSON-formatted URL

I am currently facing a challenge with parsing JSON data from a specific URL. Despite my efforts, I am unable to retrieve any information related to the "ask" and "bid" values from this JSON feed. The URL in question is . The structure of the JSON data is ...

javascriptjsonapi

Javascript Using Promise to Await Ajax Content Loading

As a newcomer to JavaScript, I am exploring ways to traverse a DOM that utilizes Checkboxes for filtering results and displays them through Ajax. The checkboxes are organized in 4 levels: Grand Parent Parent Child Grand Child My goal is ...

javascriptdomgoogle-chrome-extension

Tips for effectively combining the map and find functions in Typescript

I am attempting to generate an array of strings with a length greater than zero. let sampleArray2:string[] = ["hello","world","angular","typescript"]; let subArray:string[] = sampleArray2 .map(() => sampleArray2 .find(val => val.length & ...

javascripttypescriptlambdaarrow-functions

Updating values of objects during iterations and for get requests is ineffective

Currently, I am looping through multiple select fields and attempting to run a get request for each of them. var selects = { key1 : value } $(".chosen-select-field").each( function ( index ) { selects[key2] = $( this ).attr('data-placeholder& ...

javascriptjquery

The JQuery remove button within the list does not function for every box

I have a list where each li element contains a remove button to delete it when clicked. However, I am encountering an issue where the remove button only works for the first item in the list and not for the rest of the li elements. I am unsure about what mi ...

jquerybutton