Ionic - Ensuring that various components occupy the entire vertical space of a parent <div> with a height of 100

Currently, I am developing an app using Ionic. My goal is to position four row elements and a button inside a div. The div occupies the entire screen with a height of `100%`, and the content within it should expand to match this full-height requirement.

Despite attempting the solution below, the issue remains unresolved:

ion-content {
    position: relative; 
    height: auto;
    width: 100%;
}

.boxes-container {
    position: absolute; 
    height: 100%;
    width: 100%;
}

If you need further context, feel free to check out the complete code here. Any suggestions on how to address this challenge would be greatly appreciated!

Thank you in advance for your assistance!

htmlcssionic-framework

Answer №1

To create this layout, you can utilize a combination of the calc function and viewport units.

Using height: 100vh will set an element's height to be equal to the viewport height.

If you have a header element that is 44px tall and each row has a vertical margin, you can subtract these values from 100vh using the calc function:

.boxes-container {
  height: calc(100vh - 44px - 50px);
}

This calculation will result in the element's height being the viewport height minus the header element's height.

Next, assign a height of 20% to your four rows and button so they fill the available vertical space within the container.

.row {
  ...
  height: 20%;
}

.button {
  height: 20%;
}

Check out the updated live demo.

The calc() function is supported in all major browsers and IE>8 (caniuse.com).

Another approach would be to give both .scroll and .boxes-container a height of 100% and assign a height of 20% to .row:

.scroll {
  height: 100%;
}

.boxes-container {
  height: 100%;
}

.row {
  ...
  height: 20%;
}

View the updated live demo.

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

What is the best way to send data from a child component to a parent component in Angular 2?

I want to retrieve data from my child component, which contains a form in a popup. How can I pass all the details to the parent component? Here is the TypeScript file for my parent component: import { Component, OnInit } from '@angular/core' ...

htmlangular

What methods can be used to crop and style images in a similar manner using html and css?

Is there a way to replicate this specific method? I attempted to achieve the same look by using CSS masking, but the results weren't pleasing. Does anyone have suggestions on how to accomplish this using HTML/CSS? ...

htmlcssimagestylesheet

Scrolling horizontally using jQuery and CSS

I have been experimenting with creating a horizontal scrolling page that moves to the right when scrolling down and to the left when scrolling up. Here is the current code: HTML <div class="scroll-sections"> <section id=&quo ...

javascripthtmljquerycss

Initiate Bootstrap 4 dropdown menus from the initial menu point

I need the dropdown menus to align with the position of the first dropdown. There are multiple dropdowns on the page. Check out the screenshot for reference. JSFiddel: https://jsfiddle.net/kfh9Lbep/ https://i.sstatic.net/hHAKz.png Any ideas on how to ac ...

jquerytwitter-bootstrapcssbootstrap-4

I recently edited my htaccess file to redirect my webpage, but now I'm facing issues with my CSS, images, and

Here is the htaccess code I am using: RewriteRule ^example1/([A-Za-z-]+)/?$ example2.php?name=$1 [NC] The page is loading, but the CSS and JS are not rendering correctly. Can anyone assist me in resolving this issue? ...

phphtmlcss.htaccess

Retrieve the div element using the jQuery selector for both the id and class

This is the structure I have set up: <div id="list_articles"> <div id="article"> <label>Select:</label><input type="checkbox" class="checked_art" id="1001" /> <div id="hide" style="display:none;" class="1001"> ...

jqueryclasshtmlshow

Vue.js V-for not rendering any content

I am currently working on populating an array with objects retrieved from an API. The objects are being fetched successfully, but I am facing issues when trying to display them using v-for in the array. Below are my data variables: data() { return { ...

htmlvue.js

In Google Chrome, the input types for email, URL, and search feature a thin 1px padding on the left and right sides

If you are a user of Google Chrome (the only browser I am familiar with that exhibits this behavior), please visit this example, uncheck the "Normalized CSS" box, and observe the input elements. In Google Chrome, the email, URL, and search input fields ha ...

htmlgoogle-chromeinput

Content is not being contained within a div container

I'm facing a unique issue that I've never encountered before - text is not wrapping inside a div element. Here's a snippet of my HTML code: http://jsfiddle.net/NDND2/2/ <div id="calendar_container"> <div id="events_container"& ...

cssword-wraphtmltext

Looking to shrink the image dimensions for optimal mobile display using bootstrap

In one section, I have two columns - one for an image and one for text. https://i.sstatic.net/QMLNF.png Here is the HTML code: <div class="row aboutRow"> <div class="col-lg-3 col-sm-2 col-xs-3 col-md-3 text-center"> ...

cssbootstrap-4bootstrap-5

Creating a responsive design for a cropped image using CSS

Hi there! I am using a cropped image as the background for the top of my webpage, with a fixed size defined in pixels for the containing div. The issue arises when I resize the browser window, causing the image to cover most of the page instead of just the ...

htmlcssresponsive-imagesbackground-size

A step-by-step guide on incorporating click and drag events into an HTML Canvas

I have developed a unique business tool using html canvas. It is equipped with a variety of draggable and droppable elements. I personally created the functionality with the following pseudocode: if(mouseIsDown && mouseInBoundsOfIcon){ icon.g ...

htmlcanvas

haphazardly showcase circular shapes within a confined space

Is there a way to display circles randomly inside a box without them extending beyond the box or touching its corners? Can the circles be plotted using relative values (percent) within the div? For example, can a circle be placed 10% from the left side and ...

javascripthtmlcss

New space is formed as the input box gains focus on the signin field

I'm currently working on a sign-in page and implementing JQuery. Everything seems to be functioning properly except for a minor issue. The problem is that when the password field gains focus, it creates extra space in IE 8 and later versions only. Th ...

javascriptjqueryhtmlcssinternet-explorer-8

Issue with the top margin of the body

Recently, I've encountered a peculiar problem with a standard website layout that I use. The issue seems to be centered around the space between the top and the first div: navbar. No matter what I try, I just can't seem to remove it, as the reas ...

htmlcss

Is there a way to create a fallback for SVG in a CSS pseudoe

As I work on my website, I am incorporating some decorative elements using SVG images, but I am aware that certain browsers may not support them properly. That's why I want to ensure I have a PNG fallback in place. I am utilizing the :after pseudo-el ...

csssvg

What is the process of triggering an email send via a button click in Django?

As a newcomer to Django, I am facing issues accessing the view via ajax code. The code is triggered by a button click and is supposed to send an email. In my view.py file, the code in the 'def error' block should display when there's an erro ...

htmljquerydjango

What is the process for updating a collection in MongoDB database with PHP?

After writing a code snippet to gather user input through a form and update a collection based on the entered product ID, I am encountering issues with incorrect results. It seems that I am unable to fetch the correct product ID value, which is causing t ...

phphtmlmongodb

Ways to transfer data from TypeScript to CSS within Angular 6

Trying to work with ngClass or ngStyle, but I'm struggling with passing the value. Here's my current code: strip.component.ts import { ... } from '@angular/core'; @Component({ selector: 'app-strip', templateUrl: &apo ...

htmlcssangulartypescript

It appears that the HTML links are non-responsive and appear to be arranged in an

I have a fairly straightforward website set up. It utilizes php to scan for images and then displays them one by one with navigation buttons at the top. These buttons allow users to switch back and forth between the images. At the top of the page, there ar ...

htmlcss