Automatically adapt the height of elements to ensure they are consistently aligned on a single page

Question

Automatically adapt the height of elements to ensure they are consistently aligned on a single page

I'm working on adjusting the height of elements on my page

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

My goal is to dynamically change the height of A and B based on screen height so they always fit within a single screen without requiring scrolling.

Currently, I am using media queries to customize the height of my elements.

@media screen and (min-width: 1920px) and (max-width: 5000px) {
  .A{
    height: 600px;
  }
  .B{
    margin-right: 400px;
  }
}

@media screen and (min-width: 1279px) and (max-width: 1919px) {
  .A{
    height: 550px;
  }
  .B{
    height: 350px;
}

However, this method feels cumbersome as I'd like the heights of A and B to adapt automatically based on current screen size without having to create numerous media queries for each possible dimension.

Is there a more efficient solution for achieving this?

css sass responsive-design

Answer 1

Answer №1

To tackle this issue, we can utilize Flexbox with a vertical direction.

Given that the original code used 600px/400px, I assigned 6 and 4 as the flex-grow values for classes .a. and .b. correspondingly.
These flex-grow values are proportional, so whether it's written as .6, .4, or 600, 400, the outcome would be the same.
The elements header and footer will take up the remaining space in the container after .a and b have claimed their portion.

html, body {
  margin: 0;
}

.container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.container > * {
  padding: .5em;
}

.a {
  flex-grow: 6;
  background-color: #eee;
}

.b {
  flex-grow: 4;
  background-color: #ff0;
}

<div class="container">
  <header>header</header>
  <div class="a">A</div>
  <div class="b">B</div>
  <footer>footer</footer>
</div>

https://jsfiddle.net/j3kxr50L/2/

Answer 2

To tackle this issue, we can utilize Flexbox with a vertical direction.

Given that the original code used 600px/400px, I assigned 6 and 4 as the flex-grow values for classes .a. and .b. correspondingly.
These flex-grow values are proportional, so whether it's written as .6, .4, or 600, 400, the outcome would be the same.
The elements header and footer will take up the remaining space in the container after .a and b have claimed their portion.

html, body {
  margin: 0;
}

.container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.container > * {
  padding: .5em;
}

.a {
  flex-grow: 6;
  background-color: #eee;
}

.b {
  flex-grow: 4;
  background-color: #ff0;
}

<div class="container">
  <header>header</header>
  <div class="a">A</div>
  <div class="b">B</div>
  <footer>footer</footer>
</div>

https://jsfiddle.net/j3kxr50L/2/

Answer 3

Answer №2

  <!-- language: lang-css -->
    give this a shot

    * {
       margin:0;
       padding:0;
       box-sizing:border-box;
     }

     .container {
          height: 100vh; // adjust (.container) height based on the view screen size
      }

     .a{
         height: calc(60vh - 40px);//subtract the header height
       }

      .b{
         height: calc(40vh - 60px); //subtract the footer height
        }



<!-- language: lang-html -->

    <div class="container">
      <header>header</header>
      <div class="a">A</div>
      <div class="b">B</div>
      <footer>footer</footer>
    </div>

Answer 4

  <!-- language: lang-css -->
    give this a shot

    * {
       margin:0;
       padding:0;
       box-sizing:border-box;
     }

     .container {
          height: 100vh; // adjust (.container) height based on the view screen size
      }

     .a{
         height: calc(60vh - 40px);//subtract the header height
       }

      .b{
         height: calc(40vh - 60px); //subtract the footer height
        }



<!-- language: lang-html -->

    <div class="container">
      <header>header</header>
      <div class="a">A</div>
      <div class="b">B</div>
      <footer>footer</footer>
    </div>

Automatically adapt the height of elements to ensure they are consistently aligned on a single page

Answer №1

Answer №2

Similar questions

"Is there a way to target an element within another element that has inline styles using

Using Jquery to toggle classes between "display block" and "display none

Creating a radiant button with HTML and CSS that gradually glows

Could images be positioned in this manner without using the float property?

Having trouble getting the jQuery toggle function to work properly with div elements

The hamburger icon menu is malfunctioning

What could be causing the background image on my Jumbotron to fail to load?

When you hover over the image, a thin white line materializes along the bottom edge

Creating separation between a dropdown menu and its corresponding button

What is the best way to prioritize .py-md-6 over .p-3 in Bootstrap 4?

Tips for including numerous hyperlinks in a single row for a website's navigation menu

LFT Etica font showcases digits with varying heights

The rendered typeface may vary from the specified font family

Using CSS to style the last element in a set of dynamic content

Creating a personalized version of Material UI with unique styles, and uploading it to my GitHub repository for universal reuse across all my projects

"Adjusting the height of a div element while considering the

Parallax scrolling and Swiper slider, a match made in digital design

Having issues with animation performance in IE11

Troubleshooting: Unable to fetch CSS file in Node.js Express framework

Tips for keeping the footer at the bottom center of the page with Bootstrap?