Ensure that the heights of various Flexbox rows are always visible within the boundaries of the browser window

Within flexbox, I've laid out three rows of boxes with varying heights. This layout ensures that the rows always align perfectly with the bottom of the browser window without any gaps. You can see the full layout on Codepen by following this link: https://codepen.io/heavymessing/pen/gBzvZX?editors=1100

Everything is working well so far, but what I'm aiming for is to keep all the boxes in view even when the browser window is resized to a height between 660px and 1300px.

This way, users won't have to scroll down to see the last row of boxes if they are using a smaller laptop or if their browser window is set to a lower height.

View at 1300px - large screen view: https://i.sstatic.net/qAKOi.jpg

View at 660px - small screen view: https://i.sstatic.net/rINYE.jpg

Here's how the code looks:

HTML

            <div class="container">
                <div class="row">

                <!-- HTML content omitted for brevity -->

                </div>
                <!-- /row -->
            </div>
            <!-- /container -->

SCSS

            * {
                box-sizing: border-box;
            }

            body {
                background-color: rgba(0, 0, 255, 0.1);
                font-family: "Raleway", sans-serif;
                font-size: 14px;
                padding: 0;
                margin: 0;
            }

            .container {
                background-color: rgba(0, 255, 0, 0.1);
                width: calc(100% - 1rem);
                width: 100%;
            }

            /* SCSS styling omitted for brevity */

Answer №1

To start, it is important to delete the min-height: 160px property from the .block class.

Next, adjust the height of the .row class to be calc(100vh - 65px) instead of just 100vh, taking into consideration the menu height.

Update the heights of cells according to their respective rows:


.block {

  /* Set height for general row: one quarter of 100vh minus menu height */
  height: calc((100vh - 65px)/4); 

  /* Set height for second row: half of 100vh minus menu height */
  &:nth-child(4), &:nth-child(5)  {
    height: calc((100vh - 65px)/2);
  }
}

View the changes in action here.

If you wish to use this code on other pages where the taller blocks are not necessarily the 4th and 5th, it is advisable to create a separate class like I used 1\/2 in the example:

&.\31\/\32 {
  height: calc((100vh - 65px)/2);
}

Remember, if you do not want these adjustments to apply on certain screen sizes, enclose them within the appropriate @media query.

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

Is there a way to position the logo icons on the right side of the footer?

My goal is to connect social media platforms with their respective logos, and I'm encountering an issue. The problem arises when attempting to align the list items to the right of the footer. <footer> <div class="footer-wrapper"> ...

Creating tailored output data from a single table

Can you please assist me with a problem I am facing in generating output data using PHP and MySQL? Below is an image of my table: https://i.stack.imgur.com/zaieZ.png I would like the output to be displayed to the user in the following format: 1. Account ...

Creating: A Pair of Vue Components with Matching Sass Styles

As I ponder on the best way to structure my Vue components, I am faced with a dilemma. Two of my Vue components share the same sass code, yet they have different markup, state, and methods. I am seeking a solution to reduce repetition of sass code across t ...

Retrieving a boolean value (from a JSON file) to display as a checkbox using a script

Currently, I am utilizing a script to fetch data from a Google Sheet $.getJSON("https://spreadsheets.google.com/feeds/list/1nPL4wFITrwgz2_alxLnO9VBhJQ7QHuif9nFXurgdSUk/1/public/values?alt=json", function(data) { var sheetData = data.feed.entry; va ...

Adjustable DIV based on screen size

I am attempting to create a flexible div that will adjust its width and height proportionally based on the viewport size. However, in the example above, this method only seems to make the div expand horizontally without affecting the vertical height (wh ...

What's the reason for the inability to resize fieldset using both?

Can someone explain why the resize control is not enabled on the fieldset element? The documentation mentions that resize does not work with: Inline elements Block elements that have overflow set to visible fieldset { resize: both; overflow: h ...

What is the best way to save a jQuery or JavaScript variable into a JSON file?

Is there a way to save a jquery variable in a json file? I have the following: var image='/test/test.png'; I am obtaining this path through file upload: <input type="file" name="imageurl" value="imagefile"></input> Therefore, I ne ...

Identifying 404 image status in AngularJS triggering by a button press

One question I have is about a button directive that I am working with: <button-data></button-data> The template for the button data directive looks like this: <div class="buttonDiv"> <a ng-show="!isSomthing" class="{{className}}" ...

Maintaining a one-line CSS menu layout, the middle element is designed with two inner elements that seamlessly stack without disturbing the appearance of the menu items

I'm facing a challenge with aligning the two elements in the "inline" class - I need them stacked so that the element containing "SECURITIES" is under "A.M.S". The issue arises when I try to add a line break after the A.M.S element, which also affects ...

Customizing the hover behavior of a div element without causing displacement of surrounding elements

I am facing an issue where the descriptions in my list of 100 items are longer than the width of the div, causing the text to be cut off. I want to display the full description on hover without affecting the layout of other items. Currently, when I hover o ...

Updating and managing the CSS style for button states

In my asp.net application, I have 5 list items functioning as tabs on a Masterpage. When a user clicks on a tab, I want to redirect them to the corresponding page and visually indicate which tab is active by changing its class. What is the most effective ...

Is it achievable to set a tab value for an HTML form element?

I'm wondering if it's possible to set a tab character as the value for an HTML dropdown list. Here is the code I currently have: <select id="delimiter-select" class="form-control form-control-sm csv-select"> <option value ...

Transitioning images in JQuery by using a rollover effect

Is there a way to use Jquery for a hover effect that transitions images with a slide up animation? I've looked everywhere online, but I can't seem to find a code that works. All the examples I've found use fadeIn or fadeOut. Thank you for yo ...

Is there a way to create a two-toned horizontal rule tag?

Looking for a way to create a stylish two-toned divider line at the bottom of my header. It should be two pixels tall, with a grey top half and white bottom half. While I considered using two one pixel divs stacked together, I'm hoping there's a ...

- Lorem ipsum dolor sit amet, consectetur adipiscing elit

I am looking to create a list with lower-roman indexes that are enclosed in parentheses (ii), where the content of each item is indented. Here is an example: (i) lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut metus nec urna ...

Is there a way to produce random colors using this SCSS function?

The current function is returning an output in the color #ff0063, but my goal is to create a variety of colorful pixel dots on the screen. Could someone provide an explanation of what this code is doing? @function multiple-box-shadow ($n) { $value: &apos ...

"Encountering a form submission error - requested resource not located

I am currently trying to submit a form to an MVC controller using AJAX, where the controller is expected to take a form collection. I came across this helpful resource on Stack Overflow regarding passing formcollection using ajax call to an action. However ...

Tips for using the window.print() function to display and print another php or html page

<script type="text/javascript> window.print('page.php'); //Can you help me understand how to use window.print() function to print another php or html page? ...

In JavaScript, the condition can function properly even without the "&&" logical operator, but if the "&&" is included, the condition does not operate

I need the error message to be shown if the character length in the #nameT id is less than 3 or greater than 20. When I use the && logical operator, it does not function correctly, as when the && is not present, it works perfectly when ex ...

The application is experiencing issues with loading Django's CSS files properly

When working on my Django application, I've noticed that the CSS code being loaded differs from what is written in the files. What could be causing this discrepancy and how can it be fixed? ...