Using CSS Grid to Create Three Rows of Equal Height

I am facing an issue with my vertical menu that stretches 100% height. The rows inside this menu need to have equal height and be stretched to fit the container. Additionally, I noticed that adding a button seems to drop the container slightly below the page. Is there a way to fix this without making the .button class absolute?

Check out this link for reference.

<div class="button"><button>Mobile Menu</button></div>
<div class="mobileContainer">
<div class="mobileInner">
    <div class="row nopadding">
        <div class="col-md-6 col-sm-6 col-xs-6 nopadding">
            <div class="box">1</div>
        </div>
        <div class="col-md-6 col-sm-6 col-xs-6 nopadding">
            <div class="box">2</div>
        </div>
        <div class="col-md-6 col-sm-6 col-xs-6 nopadding">
            <div class="box">3</div>
        </div>
        <div class="col-md-6 col-sm-6 col-xs-6 nopadding">
            <div class="box">4</div>
        </div>
        <div class="col-md-6 col-sm-6 col-xs-6 nopadding">
            <div class="box">5</div>
        </div>
        <div class="col-md-6 col-sm-6 col-xs-6 nopadding">
            <div class="box">6</div>
        </div>
    </div>
</div>
</div>

Any suggestions or solutions would be greatly appreciated. Thank you!

htmlcsstwitter-bootstrapmenu

Answer №1

To address the issue of equal height, one approach could involve utilizing containers to divide cells into 3 rows and specifying a height of 33% for each row (or slightly more for accuracy). For this method to be effective, the parent container encompassing the rows must have a height set to 100%.

Regarding the issue of the dropping container: as the browser calculates element heights, it may yield results such as:

TotalHeight = (Height of .button div) + (Height of .mobileContainer div)
TotalHeight = (approximately 50px) + (100% of parent container) = Exceeds 100%

Essentially, an excess height is generated compared to the available space (100%), triggering the appearance of a scrollbar. Various remedies exist for this situation, with one option being to establish a fixed height for the .button div and adjust the .mobileContainer height as follows:

height: calc(100% - fixed height of .button div)

This adjustment guarantees that the overall height remains at 100% consistently.

I've updated your Fiddle to showcase both solutions.

http://jsfiddle.net/abc123de/2/>

Answer №2

To adjust the height using jQuery, assign a parent 

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
to each col-md-6 for maintaining order.

$(document).ready(function(){

    _height = $(window).height();    
    _innerheight = _height/3
    $(".respheight").height(_innerheight);
    $(".box").height(_innerheight);
    /*The border radius is set to 1px as it represents the line difference*/
});

View the jsfiddle for more details

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

"Select2 dropdown fails to function properly upon returning to the page using the browser's

I've encountered an issue while working on a search page with Select2 dropdowns. Everything functions smoothly upon the initial page load, however, problems arise when a user performs a search, hits the browser back button, and then revisits the page. ...

javascripthtmlasp.net-mvcrazorjquery-select2

Is there a way to customize the CSS ul menu specifically for the JavaScript autocomplete feature?

I have created a search page with autocomplete for the first textbox, but I noticed that the ul/li CSS classes used for styling the main menu are impacting the JavaScript list. How can I override the menu styling to display a regular list format? Being a ...

javascripthtmlcss

Crafting an interactive form

Creating a form with 2 options (Yes/No) is my current task. When the user selects one of these options, I want a collapsible subform to appear with specific details related to that selection. If the user chooses the other option, a different collapsible su ...

javascriptjqueryhtmlforms

Display issue on Safari when using flexbox?

I'm currently experiencing an issue with uploading a webpage to my domain, specifically on Safari. I have applied all the necessary prefixes, but it seems that the error lies with the display: flex property. When viewed on Chrome, the page looks like ...

htmlcss

Stripping initial tags from an xml string using PHP

My URL is: http://lx2.loc.gov:210/lcdb?operation=searchRetrieve&recordSchema=marcxml&version=1.1&maximumRecords=10&query=bath.isbn%3D9781594634123%0A++++ This URL returns an xml string, and I am looking to remove the opening tags of this ...

phphtmlxmlwebextract

Explore button that gradually decreases max-height

I have a "Show More" button that expands a div by removing the css attribute max-height, but I want to add an animation similar to jQuery's slideToggle() function to smoothly reveal the rest of the content. This is the code I am using: <div id="P ...

javascriptjqueryhtmlcss

Neighbor wrapping causing Flex to shrink

Is there a way to make the element shrink when the flex container below grows due to flex-wrapping? Currently, the new space is created below the container instead of shrinking the one above. The flex-grow and flex-shrink properties do not seem to work as ...

htmlcssflexbox

What are the ways to personalize the material UI select component?

I am looking to customize a MUI select component that I have rendered on a dark background. My goal is to make the outline and all its contents light colors, specifically grey and white. https://i.sstatic.net/HFUBj.png So far, I have successfully changed ...

cssreactjsmaterial-ui

Learn how to easily reset the index value within the same template in Angular

In my template, I have 3 tables with the same JSON data as their parent elements. <tbody> <ng-container *ngFor="let row of reportingData.RecommendationData; let i=index"> <tr *ngIf="row.swRecommendations"> <td& ...

htmlangularhtml-table

Click anywhere outside the sidemenu to close it

I want the menu to behave like the side menu on Medium. When the side menu is open and the user clicks outside of #sidebar-wrapper, the side menu should close. Currently, I have to click the toggle X to close the menu. html <a id="menu-toggle" href="# ...

javascriptjqueryhtmlcssmenu

Using CSS3 gradient in grey instead of white

I came across an amazing example by Chris Coyier showcasing a "read more" button. I attempted to replicate this by creating a simple fadeout effect from white to transparent, but unfortunately, I ended up with a grey gradient instead. You can view my atte ...

google-chromecssgradient

creating a countdown timer for the carousel

While experimenting, I decided to create a basic carousel from scratch. Initially, I used onclick="function()" to cycle through the images. Later on, I attempted to replace it with onload="setInterval(function, 4000)", but it seems like something went wron ...

javascripthtmlcarousel

Visual Studio 2017 experiencing compatibility issues with Bootstrap

I've been working on creating a carousel using bootstrap within Visual Studio 2017. I utilized the NuGet package manager to install jQuery and Bootstrap, and to test its functionality, I generated a bootstrap snippet for the carousel. Take a look at ...

htmlcssbootstrap-4visual-studio-2017

Navigating the world of date pickers: a deceptively easy challenge

Take a look at this fiddle example to get started: http://jsfiddle.net/1ezos4ho/8/ The main goals are: When a date is selected, it should be dynamically added as the input value, like <input type text value="date selected".... Update: <s ...

javascriptjqueryajaxhtml

Is there a way to ensure that the column widths in the Huxtable RTF output align perfectly with the widths of the HTML

It appears that the HTML output in huxtable has a column width setting that automatically adjusts to fit the content, creating an aesthetically pleasing output. On the other hand, the RTF output makes all columns equal width, which is not as visually appea ...

htmlrrtfhuxtable

The automated Login Pop Up button appears on its own and does not immediately redirect to the login form

Hey guys, I'm struggling with modifying the jquery and html to ensure that when the login button is clicked, the login form pops up instead of displaying another login button. Another issue I am facing is that the login button seems to pop up automati ...

javascriptjqueryhtmlcss

Catalog of items in Mustache

I am currently working on generating HTML content using the mustache template engine. However, I have encountered an issue when trying to render a list of objects. Below is an example of my object: var Prod={ "Object1": { "name": "name1", "cat ...

javascripthtmlnode.jsmustache

Is there a way to switch between showing and hiding all images rather than just hiding them one by one?

Is there a way I can modify my code to create a button that toggles between hiding and showing all images (under the user_upload class), instead of just hiding them? function hidei(id) { $('.user_upload').toggle(); Any suggestions would be grea ...

javascriptjqueryhtmlcsshide

Using AngularJS to update attributes in an HTML tag within a string

My string contains HTML tags : var str = "<div><p></p><p><i>blabla</i></p><p><i><b>blaaaaaablaaaaa</b></i></p><iframe src='urlAAA' height='400' width=&ap ...

javascripthtmlangularjs

Internet Explorer: JQuery deselects radio button upon its selection

One issue I have encountered is with a listener for a group of radio buttons in IE. When a radio button is selected, it triggers a database call to populate a select element. However, in IE, after the code runs successfully, the selected radio button becom ...

javascriptjqueryhtml