React JS - application not occupying the entire screen dimensions

I'm currently utilizing React JS and have organized my components as follows:

  1. nav
  2. div
  3. section

In the respective folders:

  • (Folder: Navbar.js, Navbar.scss)
  • (Folder: MyDivSection.js, MyDivSection.scss)
  • (Folder: MySection.js, MySection.scss)
  • All these are called in App.js file.
  • The rendering is done in index.js file ( ReactDOM.render(, document.getElementById('root')); )

This is how my page layout looks like: https://i.sstatic.net/3gE2P.png

There's an unwanted white space at the bottom of the page, specifically present in resolutions 768px, 480px, and 1200px. How can I remove it using sass/css?

Please note: The white space issue occurs only under certain resolutions mentioned above.

javascripthtmlcssreactjssass

Answer №1

If I grasp the issue correctly, you should have menu=nav, content=div, and section=footer.

The menu's height should be fixed while the content and footer could be in percentages. This seems to be the root of the problem you are facing.

To resolve this, you need to expand the content so it occupies the entire white section.

My approach would be as follows:

.app{
display:inline-block;
width: 98vw;
height:95vh;
}

.app> div{
  width:100%;

}

.app .nav{
background:red;
height:30px;
}

.app .content{
background:blue;
height:75%;
}

.app .footer{
background:green;
height:20%;
}
<div class="app">
<div class="nav">nav</div>
<div class="content">div</div>
<div class="footer">section</div>
</div>

Answer №2

If you're looking to learn more about flexbox, I recommend checking out some examples of layouts that can assist you. Here's a helpful resource: Webpage Layout Examples with Flexbox

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

What is the best way to assign a Python variable to an <a-assets> element?

There exists a Python function that provides the chosen background <a-sky ID="sky" color="{{object.background}}"></a-sky> The backgrounds can be in the format of '#c6aa99', '#e1a600', '#290942', 'star' ...

pythonhtmlaframe

Center the primary content on the screen when the header is present

I am struggling to vertically align the main content in the center of the screen. While I was able to achieve vertical alignment within a div, the presence of a header on the page is causing difficulty in centering the main content vertically with respect ...

htmlcsstwitter-bootstrapbootstrap-4

Incorporate Live Data into Google Charts Using Ajax Response for a Dynamic Visualization

I am struggling to successfully load a responsive Google Line Chart after an Ajax call. I have attempted to place the entire Google Chart code within the success part of the Ajax call, but it does not seem to work as expected. Below is my current Ajax code ...

javascriptphpjqueryajaxgoogle-visualization

Deciphering base64 encoded data inside an HTML document and substituting these encoded strings with their decoded representation using Python

Can someone please assist me with this flipping program that is causing me endless headaches? I am dealing with multiple files containing base64 encoded strings. Here is an excerpt from one of the files: charset=utf-8;base64,I2J...encoded string... Thes ...

pythonhtmlbeautifulsoupbase64decoding

Error Handling in PHP Form with HTML and Image Upload

Let me give you some context first. Recently, I've delved into the world of php and have been at it for a few days now. My code might be a bit messy, but I've done my best to markup as much as possible. I have a form where three things are expec ...

phphtmlformsemail

Updating a standalone component in React JS when the localStorage state is modified

I am currently working on two components. One is named "GenerateRecipesFromList," which consists of a series of "boxes" displaying the titles of different recipes. The other component is a child component called "AddButon." Despite the fact that the Add bu ...

javascriptreactjslocal-storage

Fixing an $injector:unpr issue with Angular 1.6, MVC 4.6, and UI-Grid: A Step-by-Step Guide

Hello there! I'm currently in the process of developing a Web-App using Angular 1.6 / MVC 4.6 / E.F 6.0, and I've integrated UI-Grid into it from UI-Grid. The setup is running smoothly as intended. However, I've encountered an issue while t ...

javascriptangularjsmodel-view-controller

Resizing the background image alters the perspective on Android devices

I'm currently developing an ionic3 application and everything is running smoothly, except for one issue. Whenever the keyboard is used in inputs or when the inputs are focused, the background image resizes, creating a less than ideal view. After searc ...

htmlcssangularionic-framework

Similar to the functionality of componentDidUpdate in React, but implemented using React

tldr; Is there a way to reset a component using React hooks like componentDidUpdate by utilizing the key prop with an array? I'm working on a timer component that triggers a callback when it reaches zero. The callback updates a list of objects. The c ...

javascriptreactjsreact-hooks

Tips for storing user input as a file in HTML and Django

I'm in the process of developing a website where users can enter text and submit it to be saved as a file on the server. However, I'm unsure about the steps involved in taking the inputted text and saving it as a file. Can someone provide guidan ...

htmldjangofiletextdjango-models

Issues with MUI TextField number input not enforcing min and max values

Material UI version: "@ui/core": "^5.15.15", Check out the following code snippet <TextField className="input-quantity form-input" defaultValue={0} name={"quantity"} type="number" InputProps={{ ...

reactjsmaterial-uifrontend

Display sourcemaps on Chrome's network panel

Recently, I began utilizing source maps for my SASS code in order to debug more efficiently in Chrome. My understanding was that Chrome should request both the stylesheet resource and the .map resource, however, only the stylesheet is visible in the netwo ...

cssgoogle-chromesasssource-maps

Stop button from being clicked inside a div when mouse hovers over it

I am facing an issue with a div containing a mouseenter event and a button inside it with a click event. The concept is that when the user hovers over the div triggering the mouseenter event, the div becomes "active", allowing the button to be visible and ...

javascriptvue.jsvuejs2

Looking to insert an icon into the placeholder?

I am trying to insert a location icon into the placeholder of a label in a React component. <label> Places <input className="p-2" ...

reactjsbootstrap-4iconsplaceholder

Updating anchor class on click of a divORModify anchor

While I have come across some similar posts, my knowledge of Javascript is limited. Can anyone lend a hand? The code below modifies the CSS Class of <div class="contact"> and adds extra classes when a main menu link (e.g. #contact) is clic ...

javascripthtmljquerycss

The callback function fails to execute the click event following the .load() method

Hey there, I've hit a roadblock and could really use some help figuring out where I went wrong. Let me break down my script for you. On page1.html, I have a div that gets replaced by another div from page2.html using jQuery's .load() method. Here ...

javascriptjqueryhtmlcssajax

The Node application seems to be encountering an issue when attempting to handle

Whenever I click a button on my page in Node using Express, my JavaScript file sends the following request: toggleCartItem = index => { http = new XMLHttpRequest(); http.open("POST", `/cart_item/${index}`, true); http.send(); } Th ...

javascriptnode.jsexpressxmlhttprequesthttprequest

WARNING: No matches found in the MySQL database for the searched word

Exploring the realm of coding 1) Gathering data from MySQL via PHP 2) Transferring data from PHP to D3 based on input using a PHP URL. Want to trigger an alert when the text in the input field does not match any records in the MySQL database. Upon testi ...

javascriptphpjquerymysql

Providing settings to Vue.js components that have been globally registered

When registering my Vue.js components, I follow this pattern: In the index.js file of a separate reusable npm and webpack project called myComponents: import MyButtons from './src/components/my-buttons.vue' import MyInput from './src/compo ...

javascriptvue.jsnpmwebpackvuejs2

How can one save a text value element from a cascading list in ASP.NET MVC?

I have recently started learning about javascript, jquery, and ajax. In my model, I have defined the following classes: namespace hiophop.Models { public class CarMake { public class Category { public int CategoryID { g ...

javascriptc#jqueryajaxasp.net-mvc