Utilizing CSS flexbox to occupy the remaining vertical space

I'm facing a scenario where I have three elements: div with content 1, div with content 2, and an image that spans 100% width (with variable height). My goal is to align div 1 at the top, the image at the bottom, and fill the remaining space with content 2. All three elements should fit perfectly within the device view.

I've heard that using flexbox could help me achieve this layout, but I'm unsure about how to actually implement it.

It's important to note that I'm looking for a CSS-only solution.

Here's a link to the Plunker demonstration: Click here

<ion-view title="Welcome">
  <ion-content has-header="true" style="display: flex; flex-flow: column;">
    <div style="height: 100%">
      <div style="background-color: red;">
        Content 1 (height based on content)
      </div>
      <div style="background-color: blue; flex: 2;">
        Content 2 (remaining height)
      </div>
      <div>
        <img style="width: 100%;" src="http://dummyimage.com/600x400/000/fff" />
      </div>
    </div>
  </ion-content>
</ion-view>

https://i.sstatic.net/Te5RF.png

htmlcssflexbox

Answer №1

In order to get the flexbox layout working correctly, it is recommended to eliminate the <div style="height: 100%">. Otherwise, that div will be the sole flex item. Instead, set height: 100vh; on the <ion-content> element.

If removing the div is not an option, you can designate that div as the flex container directly and define the height accordingly. Another approach could involve a nested flexbox layout, though it may not be necessary in this case.

Check out the example on jsFiddle

<ion-view title="Welcome">
  <ion-content has-header="true" style="display: flex; flex-flow: column; height: 100vh;">
    <div style="background-color: red;">
      Content 1 (height based on content)
    </div>
    <div style="background-color: blue; flex: 1;">
      Content 2 (remaining height)
    </div>
    <div>
      <img style="width: 100%;" src="http://dummyimage.com/600x400/000/fff" />
    </div>
  </ion-content>
</ion-view>

Answer №2

     <ion-view title="Welcome">
  <ion-content has-header="true" >
    <div style="height: 100%;" class="d-flex flex-column justify-content-between">
      <div style="background-color: red;">
        Section 1 (height varies based on content)
      </div>
      <div style="background-color: blue; height:100%;">
        Section 2 (remaining height)
      </div>
      <div>
        <img style="width: 100%;" src="http://dummyimage.com/600x400/000/fff"/>
      </div>
    </div>
  </ion-content>
</ion-view>

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

Basic HTML Audio Player Featuring Several Customizable Variables

I have a unique API that manages music playback. Instead of playing audio in the browser, it is done through a Discord bot. Achievement Goal https://i.stack.imgur.com/w3WUJ.png Parameters: current: indicates the current position of the track (e.g. 2:3 ...

javascripthtmlcssangular

Struggling to eliminate HTML entities in PHP

Hey everyone, I've been attempting to sanitize a string with HTML entities using PHP, but I'm running into some issues. Below is a snippet of my code: $body = "Mal ein neuer &amp;lt;b&amp;gt;Test&amp;lt;/b&amp;gt;&amp;lt;br& ...

phphtmlstringentities

Converting Markdown to HTML using AngularJS

I'm utilizing the Contentful API to retrieve content. It comes in the form of a JSON object to my Node server, which then forwards it to my Angular frontend. This JSON object contains raw markdown text that has not been processed yet. For instance, t ...

javascripthtmljsonangularjsmarkdown

Halt the CSS transition on the preceding element

I tried to pause a CSS transition and came across a question with a solution that seems similar: Is there a way to pause CSS transition mid-way? However, I couldn't make it work for my code. I suspect the issue lies with the before element. What cou ...

javascripthtmlcss

Json Swagger Editor: Error - Undefined

There is an undefined error in rendering when using the Swagger Editor. Here is the code snippet: swagger: '2.0' info: version: 1.0.0 title: AccountBalance host: localhost:2625 basePath: /accountbalance schemes: - http - https consumes: ...

cssfacebookspring

What is preventing me from displaying my paragraph?

I have some content that I want to show a paragraph with the class paragraphtoggle when clicked, but it's not working as expected. Here is what I have tried: https://example.com/jsfiddle HTML <div class="enzimskiprogramindex herbaprogramindex he ...

javascriptjqueryhtmlcss

How to locate the nearest parent link containing a specific attribute using jQuery

I am trying to locate the nearest link with the attribute findme from a child element .startpoint. Here is the structure: <ul> <li><a href="#">Point one</a></li> <li><a href="#" data-findme="yipi">Point tw ...

jqueryhtmllistclosest

CSS tip: Create a trendy design by adding a slanted border to the last

I need help creating a unique menu list with a white border design. The borders should all be straight by default, except for the last border which must be slanted. ul { background-color: #183650; } li { list-style: none; display: inline-block; b ...

javascripthtmlcsscss-transforms

Bootstrap 3 Full-Width Responsive Image Overlapping

I have designed a grid layout with col-md-7 on the left side and col-md-5 on the right side. The images in the col-md-5 are responsive and have a full-width of col-md-12. <div class="container"> <div class="row"> <div class="col ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is stopping me from utilizing ES6 template literals with the .css() method in my code?

I am currently working on a project where I need to dynamically create grid blocks and change the color of each block. I have been using jQuery and ES6 for this task, but I am facing an issue with dynamically changing the colors. Below is the snippet of m ...

javascriptjquerycssecmascript-6

Which domain do I need to use: Google or my own, in order to bypass the Access Denied issue in JQuery

I'm currently experiencing a puzzling issue with my website while using Internet Explorer. Despite loading fine in other browsers, I keep encountering a permission denied error within my JQuery code. What's even more perplexing is that this error ...

phpjqueryhtmlinternet-explorer

Crafting numerous CSS templates

I am currently working on creating multiple boxes or templates (5 on each row) from a movie API. I have successfully retrieved all the necessary data and do not require a responsive design. https://i.sstatic.net/CNz9R.png The issue arises when I attempt ...

jquerycssajax

Incorporate custom styles into Joomla articles

Is there a way to apply custom styles to articles in Joomla without them getting deleted by the editor? <style> span{ color: #0099ff; } img{ float: right; } </style> <div> <h3> <span ...

cssjoomla

Hover over images for cool effects

Check out the code snippet I created on this link The current functionality enlarges images by 20 percent and overlaps into the table on hover. How can I enlarge both the image and table dimensions simultaneously? Below is the HTML code: <table borde ...

htmlcss

Unable to retrieve table header information when clicking on a table cell

My code is working perfectly, except for the fact that when I click on a cell, I cannot retrieve the table header text. Retrieving the row text works fine based on the code. If I use Object.keys(data) inside the alert function to retrieve the data, it give ...

javascripthtmlcssreactjshtml-table

Creating a mechanism that fetches web links and automatically substitutes the URL with the corresponding title of the webpage

Just the other day, I noticed that putting a link in my profile resulted in it being replaced by the exact title of the question. This got me thinking, how exactly do they accomplish this? My hunch is that they achieve this by using ajax to send the link ...

phphtmlajax

Problem with displaying information in the table based on the numerical input

How can I dynamically set the number of rows in a table based on an input field? var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $scope.myObj =[ {"Name" : "Alfreds Futterkiste", "Country" : "Germany","City" : "Berlin ...

htmlangularjs

Adjust the height of the list when including or excluding floated list items that are not in the final row

Within my ul are li elements with varying widths that wrap around inside a container into multiple rows. When removing an li element from the ul, I want the container's height to adjust dynamically in case a row is eliminated. If the removal happens ...

javascriptjqueryhtmlcss

How come this straightforward VueJS component template is appearing in the wrong location in the DOM, positioned above a table?

These illustrative examples are not the actual faulty code, but rather simplified for discussion purposes. Issue with Code The code snippet below displays a table, but unexpectedly places the Component values above the table element visually and in the D ...

htmlvue.js

Arrange the labels and input fields within nested elements in a synchronized manner

My data is structured semantically as shown below: <div class="inputs"> <div class="top"> <h4>Top</h4> <label for="top-1">Label 1</label> <input id="top- ...

csslayout