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

Show specific hyperlinks in Django depending on the user group

{% extends 'base.html' %} {% block content %} <p>Welcome to the homepage.</p> <p>{% user.groups.all() %}</p> {% endblock %} Currently, I'm exploring ways to display all the user's groups on the page. Howeve ...

htmldjangotemplates

Error: Trying to assign a value to a null property

I am facing an issue while trying to dynamically create "iframe's textarea" and insert the value of a variable. Unfortunately, I keep encountering an error. Any suggestions on how to resolve this problem? P.S: Using Google Chrome as the browser ...

javascriptiframetextarea

I seem to be facing some challenges with loading and parsing XML using jQuery. Can anyone please guide me on what might be going wrong

I'm having trouble retrieving settings from an XML file. It seems like the object is not being loaded correctly or maybe my selector isn't working as expected. The log message inside the appendImages function isn't showing up, and I'm u ...

jqueryxmlajax

Converting PHP arrays into JavaScript arrays with the help of json_encode()

Is there a way to pass an array from PHP to the JavaScript function console.log()? I'm currently simulating a database and need help with this specific task. Despite not having an array declared in my code, I attempted to use the .getJSON() function w ...

javascriptphpjqueryarraysajax

Tips for invoking a JavaScript class method from an HTML document

I've created a Typescript class that dynamically inserts an HTML element to a page after it's loaded. Here is the code snippet: const calcElement: string = ` <div class="container"> <span class="cc-title">Field</span> ...

javascripthtml

Is it possible to manipulate the attribute of an object using Object.defineProperty when a value is passed as a function parameter?

As I delve into understanding reactivity in Vue, the concept of how reactivity is achieved when passing a value as a function parameter perplexes me. //here is the actual code snippet var obj = {a: 'aa'} function reactive(obj, key, value) { ...

javascriptvue.js

Issues with the execution of Typescript decorator method

Currently, I'm enrolled in the Mosh TypeScript course and came across a problem while working on the code. I noticed that the code worked perfectly in Mosh's video tutorial but when I tried it on my own PC and in an online playground, it didn&apo ...

javascripttypescriptvisual-studio-codemethodsoutput

Clicking on ng-click can lead to the dissociation of the Angular factory

My situation involves a factory with a series of prototypes that need to call each other. The issue arises when the reference to "this" is mistakenly applied to the html template instead of the original factory class when using ng-click. For example: ang ...

javascriptangularjs

How to showcase images and text from an array of objects using React

I'm currently working on a React lightbox that is supposed to display a loop of objects containing images and text. However, I'm facing an issue where the images are not showing up with the corresponding text label as intended. It seems like I a ...

javascriptreactjs

Unable to locate the "fcm-node" module in Node.js with TypeScript

When working on a TypeScript project, I usually rely on the fcm-node package to send Firebase push notifications in Node.js. However, this time around, I faced an issue. I know that for TypeScript projects, we also need to install type definitions (@types ...

javascriptnode.jstypescriptexpressfirebase-cloud-messaging

Express JS res.send() with an array response data is posing a concern during the Checkmarx scan

When using the axios library in my express middleware to retrieve responses from APIs, I encountered a security concern raised by Checkmarx scan report. router.post(someurl,req,res) { axios .get(someurl) .then((response=>{ **res.send(response.data);**/ ...

javascriptnode.jsreactjsexpresscheckmarx

javascriptchange the format from <string, string[]> to <string, string>

In my code, I came across a JavaScript object that consists of key/value pairs. Each value in this object is an array of strings: var errors = { "Message": ["Error #1", "Error #2"], "Email": ["Error #3", "Error #4"] }; My goal is to transform thi ...

javascriptjquery

Tips on customizing the color of checkboxes in a ReactJS material table

I'm working on a project that involves using the Material table, and I need to change the color of the checkbox when it's selected. Can anyone help me with this? https://i.stack.imgur.com/JqVOU.png function BasicSelection() { return ( <M ...

javascriptreactjsmaterial-ui

Steps to activate a single button within a deactivated fieldset

Is there a way to deactivate all elements within a Fieldset, while keeping certain buttons active? Check out this demo. <fieldset ng-disabled="true"> <legend>Personalia:</legend> Name: <input type="text"><br> Em ...

javascripthtmlangularjs

Processing JSON data by reading multiple files using Node.js

I've encountered a situation where I have multiple files containing data with time stamps. It's important for me to read these files in order, line by line. However, I noticed that most Node packages utilize asynchronous methods for file reading. ...

javascriptjsonnode.js

Is there a way to maintain the checked status of the checkboxes after a page refresh?

Is there a way to keep the checkboxes checked even after the page is refreshed in this code snippet? Any code sample or explanation on how to achieve this would be highly appreciated. The complete project code can be found here: https://github.com/Orelso/P ...

javascriptmaterial-ui

What steps should be taken to properly assess an AngularJS provider setup?

My provider definition looks like this: (function(angular) { angular.module('myModule', []) .provider('myService', function () { var service = {}; service.configureSomething = function () { }; service.$get = function () { ...

javascriptunit-testingangularjs

Interaction between index file and module instance

As I develop a computer system, I have divided it into various smaller components. My experience in software development has taught me the value of keeping systems compact and focused. To achieve this, I am creating modules that perform specific function ...

javascripthtmleventsdom-eventsmodularity

Exploring the possibilities with a Nuxt Site as a foundation

[![enter image description here][1]][1] Exploring the world of nuxt and vue, I aim to build a basic website using vue and then convert it into a static site utilizing: nuxt generate I have successfully accomplished this task with nuxt and vuetify (check ...

javascriptvue.jsnuxt.js

Issue with handling multiple messages in WebSocket responses as Promises

In my web project using angularjs, I have the task of downloading data every second via a WebSocket. However, I encounter issues with handling multiple requests of different types. Although I utilize Promises to structure the requests, sometimes the respon ...

javascriptangularjswebsocketpromise