Tips on creating a React Vite Typescript website that utilizes the entire height and ensures a minimum width

I'm currently working on building a portfolio webpage with React, Vite, and Typescript, but I'm facing an issue where the content is not taking up the full height of the page. I have multiple pages with different lengths of content that I want to display, and I envision a layout where a navbar "floats" above a container div that holds the main content. Both the container and the pages themselves should have a background color. While I've managed to implement the navbar successfully, my current setup only extends the page if the content's length matches the browser height. If I try fixing this by setting a height of 100vh, it results in a visible border when the content exceeds the browser height:

https://i.sstatic.net/g1ZbJ.png https://i.sstatic.net/bFa6n.png

The ideal design I'm aiming for can be seen here: https://i.sstatic.net/6Wi1F.png

Currently, while the external appearance looks fine, internally it's messy as I had to use numerous break tags just to fill up the space to match the browser size.

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

This workaround feels like a hacky and inefficient solution. What would be the correct approach to achieve the desired layout?

I've attempted various solutions such as setting height: 100% on the container element, adding it to the css for html and body tags, as well as using min-height: 100%, but none seem to work effectively. Here is the rest of the code in question:

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

htmlcssreactjs

Answer №1

Sharing code through screenshots may not be the most efficient method - consider using the markdown editor when asking a question. Keep this in mind for future reference.

When setting height: 100%, it's important to consider what it's actually 100% of. Typically, it refers to the parent element, so ensure that the element above it occupies the screen space, or define the height and width explicitly within the element itself.

To make an element cover the entire screen, you can use the following CSS properties. However, be cautious as it may affect the positioning or sizing of other elements nearby.

.fullscreen-element {
  height: 100vh;
  width: 100vw;
}

There are various resources available explaining these properties in detail. Additionally, avoid overusing line breaks unnecessarily. It's best to follow proper formatting guidelines!

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 process for defining states in hooks?

I am currently trying to refactor my code from a class-based component to a functional component. The challenge lies in updating states and methods, specifically within the setState function. Here is a snippet of my current code: const [userForm, setUserFo ...

reactjsreact-hooks

Having trouble with the authorization aspect of Next Auth. The error message reads: "NextAuth.js does not support the action api with HTTP GET method

Recently, I've been encountering a puzzling error with my Next.js app authentication. It seems that I am unable to authenticate with the provided credentials. After reviewing the documentation, everything appears to be correct on my end. Additionall ...

javascriptnode.jsreactjsnext.jsnext-auth

The React application functions properly when initiated with `npm start`, but displays a 404 error after being built

I encountered an issue while developing a React App. Everything seemed to be working fine during the execution of `npm start`. However, after running `npm run build` and entering `serve -s build` in the terminal under the build folder, the browser displaye ...

reactjsnpmserveryarnpkg

Style large and small text side by side with CSS styling

I've been trying to figure out how to position a smaller biography-style text next to this large title, but I'm having trouble finding a solution. I've experimented with float: left, float: right, and display: flex in my CSS code. Below is t ...

htmlcsstextalignment

Inquiry about NPM, ReactJS, and the distinction between globally and locally installed packages

Seeking help with NPM, ReactJS, and global vs local package installation. Despite extensive research, I have not found a solution. Here is the main App component from my project: import React, { Component } from 'react' // import ReactLogger from ...

node.jsreactjsnpm

The cascading menu causes interference with the function of other elements in the

I am currently designing a navigation bar that includes a drop-down menu (with plans to add another one in the future). The issue I'm facing is that when the user clicks on the drop-down menu, it shifts all of the navigation links to the right. What I ...

javascriptjquerycss

Tips for updating text in a freshly opened window using JQuery or JavaScript

I have a function that is triggered by a button click to open a new window or tab, display an alert, and update text. Here is the code snippet: function nWin(p) { var setStyle = "<style rel='stylesheet'>\ .vTop {\ ...

javascriptjqueryhtmlcss

Email contact form using PHP

After following a tutorial on creating a basic 'contact us' form using PHP, I want the form to display a thank you message or error message directly on the same page instead of redirecting to a separate thank you page. How can I modify the code ...

phphtmlformsemail

The child element with a minimum height of 300 pixels is failing to inherit the height of its parent

Here is the HTML code for a div block I am working with: <div className={'row ge-container'}> <div className={'a-span3 ge-container-navigation'}> hello </div> <div className={'a-span9 ge-containe ...

css

Implementing a PHP form for seamless image uploads

I have been attempting to upload a form that includes an image. I have successfully retrieved the data for the brand name and other fields. However, I am encountering an issue with retrieving the image name and type. Can someone please assist me in ident ...

phphtml

Whenever I adjust the layout of the navigation bar, the edges end up getting clipped

I'm having trouble with the border shape of my navbar. When I try to make it a rounded pill shape, the edges get cut off instead of being properly displayed. https://i.stack.imgur.com/sUN2Y.png Below is the HTML template: <template> <div cl ...

javascriptcssvue.jsbootstrap-4bootstrap-5

jquery target descendants with specific names

In the provided HTML code snippet, there is a main div with the class name of cxfeeditem feeditem, and it contains multiple child elements with similar class names and structure. My query pertains to extracting values from specific children within all the ...

javascriptjqueryhtmljquery-uijquery-selectors

Is it more effective to import an entire library or specific component when incorporating it into Create-React-App?

I have a question about optimizing performance. I understand that every library has its own export method, but for instance, on react-bootstrap's official documentation, it suggests: It is recommended to import individual components like: react-boo ...

javascriptreactjsreact-nativedeploymentcreate-react-app

"Endowed with improper dimensions, the BootStrap collapse feature

Yesterday, I posted about an issue with BootStrap and panel collapsables causing graph sizes to become distorted. The post was locked because there was no accompanying code. I have now created a code snippet for you all to see the exact problem I am facing ...

javascriptjquerycsstwitter-bootstraphighcharts

Transferring scope between pages without the need for an angular service definition

Looking to open a new JSP page while passing the $scope in order to utilize an array response generated in the initial page. Example from test.js file: (function() { 'use strict'; angular .module('test', []) .control ...

javascriptangularjshtml

Stop accidental clicking on objects in React-Fiber which are using Three.js

Check out this interactive cube made up of planes! An issue I've encountered is that clicking on a plane passes through to the ones behind it, rather than only registering a click on the plane directly under my mouse. Any suggestions for fixing this ...

javascriptreactjsthree.jsreact-three-fiber

Numerous applications of a singular shop within a single webpage

I have a store that uses a fetch function to retrieve graph data from my server using the asyncAction method provided by mobx-utils. The code for the store looks like this: class GraphStore { @observable public loading: boolean; @observable ...

javascriptreactjsmobx

Issue encountered while constructing my application (utilizing the "yarn run build" command and in Vercel)

Encountered an error during the build process, whether on the server or locally. This issue arises when using package managers like yarn, npm, and others. The error specifically points to a problem in the CSS file, but it only occurs in the production bu ...

javascriptreactjstailwind-cssyarnpkgvercel

I am in need of a datepicker for my project that will display the END date as the current date and set the START date as 7 days before the END date

$(document).ready(function () { $("#end").datepicker({ dateFormat: "dd-M-yy", minDate: 0, onSelect: function () { var start = $('#start'); var startDate = $(this).datepicker('getDate') ...

javascriptcssajaxtwitter-bootstrap

Is it possible to integrate a Twitter bootstrap theme into a Rails 4 application if the Vendor/assets directory is missing?

My goal is to integrate a theme from wrapbootstrap.com into my rails 4.1 application. After creating a new app with rails 4 scaffolding, I proceeded to extract the downloaded zip directory which contains 4 directories and an index.html file. I then placed ...

javascriptcssruby-on-railstwitter-bootstrap