Is it possible to make the dashboard reach 100% height?

I am struggling with designing a dashboard that needs to take up 100% of the height of any monitor. Despite reading multiple posts on Stackoverflow and trying different options like hv 100% and height: 100%, I still can't get it to work. I am using Bootstrap 4 for this project. Currently, I have set a fixed height to show the dashboard to my client, but I really need it to take the full height. Below is a simple HTML layout to give you an idea of the height I need for each DIV. MY LAYOUT HERE

Check out the code below:

<!-- THE ENTIRE DASHBOARD SHOULD TAKE 100% HEIGHT OF ANY SCREEN SIZE -->

<body>
    <div class="container"><!-- 100% HEIGHT -->
      <div class="row">
        <div class="col-12 gray">Top Navigation</div>
      </div>
      <div class="row">
        <div class="col-3 gray">
          Side Table: 100%
        </div>
        <div class="col-9 gray">
          <div class="row">
            <div class="col-5 gray">Box 1: 50% height</div>
            <div class="col-7 gray">Box 2: 50% height</div>
          </div>
          <div class="row">
            <div class="col-9 pink">Box 3: 50% height</div>
            <div class="col-3 pink">Box 4: 50% height</div>
          </div>
        </div>
      </div>
    </div>
  </body>

Answer â„–1

Include the following CSS code:

html, body { 
height:100%;
}

Next, ensure that your elements occupy the entire height by setting the height to a random percentage so that each element has sufficient space relative to its parent element.

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

Navigate to web pages through hyperlinks in a Textview using a WebView on an

Here is the text that needs to be displayed in a text view. I want the hyperlink to open a webview when clicked, while the rest of the text should not be clickable. String value = "Check out this link: <a href="http://www.google.com">Go to Google< ...

Tips on modifying webpage content based on page size (zoom) in responsive web design using CSS

I have a good understanding of responsive design and how to set elements with relative width. My specific question is regarding the transition of the page from thisto that. Any insight on this would be greatly appreciated. Thank you in advance. ...

Using Testcafe to extract the value attribute of a hidden input element

Is there a way to retrieve the value of an <input>, especially what is contained within its value attribute even if the input is not visible? I am using testcafé, but it seems like this could be a challenge. Does anyone have any suggestions or opti ...

Configuring a JavaScript calendar with custom margins

Having trouble selecting a date with the Bootstrap datepicker class. After running the snippet, the calendar appears below the textbox: <input type="text" class="form-control datepicker" name="due_date" id="due_date" onclick="calendar_up()" value="" pl ...

Creating a CSS dropdown menu with absolute positioning and setting the left position to auto

Just laying out my usual HTML menu structure: <div id="page"> <h1>Home</h1> <ul id="nav"> <li><a href="http://example.com/">Home</a> <ul> <li><a href="http://examp ...

I'm looking to create a chart similar to this using Bootstrap 4 - any advice on how to

Is there a way to implement animations in this chart? https://i.sstatic.net/YpabJ.png ...

Is it possible to optimize the performance of my React and TypeScript project with the help of webpack?

I am working on a massive project that takes 6 to 8 minutes to load when I run npm start. Is there a way to speed up the loading process by first displaying the sign-in page and then loading everything else? ...

I'm looking to add a next and previous button within my jumbotron- can anyone offer guidance?

As I near the completion of my Full Stack Nanodegree final project and await assistance from my instructor, I've taken on the task of developing my portfolio. However, I'm facing a challenge with implementing next and previous buttons within my j ...

Tips for hiding the frame of a React MUI Select component

I am having trouble figuring out how to remove the border around the <Select> component from the React Material UI library. In the image below, you can see that when the <Select> component is not selected, it has a black border/frame. https:// ...

Creating an HTML form that adjusts its size and layout based

Struggling to make my HTML Form responsive - it displays well on desktops, but not on mobile devices or tablets. Want to take a look at the code? Here's the link: JSFiddle I've attempted removing overflow: hidden and white-space: nowrap; from t ...

Unable to submit form within a while loop in PHP table

After making some changes to my form, I noticed that only the hidden input field is being submitted when I try to submit the form. It's strange because it was working perfectly fine before. while ($row = mysqli_fetch_array($gettimesheets)) { $dat ...

Strange glitch in the Trebuchet MS font

I am currently attempting to utilize the jquery.fullcalendar plugin with jQuery UI theming. Everything seems to be functioning properly, except for an issue where the user's selection of a time range (week or day view) is displaced by approximately on ...

Responsive Design and Advertising with CSS Media Queries

For my application, I am utilizing Twitter's bootstrap (responsive) css. My goal is to incorporate banner ads in the sidebar section. However, due to different media query settings, the sidebar's width will vary, resulting in the need for the ban ...

Issue with border radius not applied to input-group in Bootstrap 3

Can anyone explain why the input-group in Bootstrap 3.4 is missing all border radius? <form action="{{ route('dashboard.users.index') }}" method="get"> <div class="input-group"> <input type="text" name="search" class="f ...

Ways to align a DIV in the center of another DIV?

I am currently working on building a footer. My goal is to center the 4 divs in the footer, similar to the first paragraph or the 5 icons that are not rendering correctly. What would be the most effective approach to achieve this? Demo: http://jsfiddle.n ...

The functionality of resizing a layout in Html5/CSS3 is not functioning correctly

Whenever I resize the window, I am looking to have A B C displayed one after the other in a vertical sequence, I have been struggling with this for quite some time. Can someone please help me figure out how to achieve this? Thank you! A B C div#me ...

"Optimizing Background Images with IE 8 Stretch Cover in Bootstrap

Page Broken I've searched all over Stack Overflow for a solution to resolve this background image issue. I'm using Bootstrap for the boxes and removed any margins. The problem arises when setting the background as cover; in IE8, it doesn't ...

Display the application unless a certain condition is met, in which case trigger an alert notification

Goal: My objective is to trigger an Alert component if a specific condition is met (e.g., no data from URL pathname), otherwise, render the application as usual. Approach I've Taken app.layout = dbc.Container([ dbc.Alert([...], id='alert&ap ...

Having trouble with setting an image as a background in CSS for Nativescript on iOS?

In my NativeScript app, I am trying to set an image as the background using the CSS property background-image: url("res://ic_more"). It works perfectly on Android, but unfortunately, it does not display on iOS devices. I have confirmed that the image is l ...

The pseudo class before is experiencing issues with background color in Safari and not functioning as

Issue with Pseudo class before not displaying background colour in Safari browser To view the code, please visit the following link here HTML <div id='test'> <p>Test </p> </div> CSS #test { position: relative; per ...