Ensure that the main section occupies the entire height of the body, excluding the header in a Next

Currently, I have a navigation element with the code snippet below:

export default function Nav() {
  return (
    <>
      <header
        className={
          "bg-white flex flex-row justify-between items-center px-20 py-4 filter drop-shadow-md"
        }
      >
      </header>
    </>
  );
}

Alongside this nav component is another component that gets rendered as a sibling in the _app:

function MyApp({ Component, pageProps }) {
  return (
    <SessionProvider>
        <Nav />
        <Component {...pageProps} />
    </SessionProvider>
  );
}

export default MyApp;

My goal is to ensure that the content of the Component takes up the entire height of the page below the navigation. The catch is, the navigation's height is not fixed and I want it to remain that way.

htmlcssreactjsnext.jstailwind-css

Answer №1

Applying some CSS can help resolve this issue.

  <SessionProvider>
    <Nav />
    <main>
      <Component {...pageProps} />
    </main>
    <style jsx>{'
      main {
        width: 100%;
      }
    '}
  </SessionProvider>

Answer №2

Thank you for your suggestion! I did my best to follow your instructions and I hope I got it right. Hopefully, this will be helpful to you. Best wishes and good luck :-)

Start by creating a new component called Layout.js. Within this component, include a main tag with the className set to "w-full" when using Tailwindcss or alternatively (width:100%).

import { Fragment } from "react";
import Nav from "./Nav";

function Layout(props) {
  return (
    <Fragment>
      <Nav />
      <main className="w-full">{props.children}</main>
    </Fragment>
  );
}

export default Layout;

Don't forget to wrap the _app.js file around .

import Layout from "../components/Layout/Layout";

function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}

export default MyApp;

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 method for displaying the value of a textarea?

I am relatively new to the world of coding, but I have already delved into HTML, CSS, and basic DOM scripting. My goal is simple - I want to create a comment box where people can leave messages like in a guestbook. However, when I input text and click on ...

javascripthtmlcss

Maintain the CSS style of a parent element even when hovering over its child elements

I have successfully created a navigation bar with a menu that highlights a blue line whenever you hover over a section. However, I am facing an issue with the submenu within a section. I want the parent section to still display the blue line when hovering ...

javascriptjqueryhtmlhoverjquery-hover

The server side is not displaying the data fetched by Fetch()

I've created a simple fetch() request to send data to my server: eo.put = function (state) { console.log('PUT:state', state); let _id = encodeURIComponent(state._id); const options = { headers: {'Content-Type': &apos ...

javascriptreactjsexpress

Extracting Table(Array) Index into a Component in Angular

For my data on the HTML page, I created a 2-dimensional array. <tbody> <tr *ngFor="let i of myarray2"> <td *ngFor="let j of i"> {{j}} </td> </tr> </tbody> This is how it appears: https://i.sstatic.ne ...

htmlnode.jsangulartypescript

Attempting to embed a Java applet into an HTML document

Here is how the directory looks: test.html blah hmmm In the "blah" directory, we have all the applet files, including blahBlah.class. In the "hmmm" directory, there are additional class files taken from a library or similar source that are also used by t ...

javahtmlappletlocalhost

The Sentry CLI Plugin experienced an error while attempting to execute during the npm run build operation

I've integrated Sentry into my existing Next.js (14.0.4) project and everything runs smoothly in development mode. However, I encounter issues when I try to build the project using the npm run build command. Below are the terminal errors that I recei ...

next.jssentry

Scrollbar becomes inactive following the loading of AJAX content

Having an issue with loading a div using Ajax. The div loads, however the scrollbar within it stops working afterwards. In Main.html, I load content from other HTML files like so: <div id="content1" > </div> The content is loaded as follows: ...

javascriptjqueryhtmlajaxjquery-load

Setting a maximum limit for selections in MUI Autocomplete

Code updated to display the complete script logic. I want to restrict the number of selections based on a value retrieved from the database, but in this example, I have set it to 3 manually. The error message I'm encountering is "Cannot read properti ...

reactjstypescriptmaterial-ui

Is this JavaScript function acceptable?

My dilemma involves a carousel (specifically Owl Carousel) with controls that need to be vertically centered. Due to the structure, I have had to absolutely position the previous and next arrow indicators. Given the responsive nature of the page, their pos ...

javascriptjquerycss

On smaller screens, the issue arises from the overlapping divs and HTML elements not displaying correctly

Currently, I'm tackling an issue on a website where objects are overlapping each other when viewed in mobile mode. Some elements are appearing over others and the screen is starting at the bottom instead of the top. Images: https://i.sstatic.net/jUtX ...

javascripthtmlcss

Retrieving the most recent state data in React by utilizing the useEffect hook in conjunction with a route protection

Struggling with obtaining the accurate state within the history.block callback. It seems like the history.block triggers prematurely, before the useEffect can update it to reflect the current state. Is there a recommended method for setting up a route guar ...

reactjsreduxreact-router

Are max-width:auto and max-width:100% the same thing?

Does max-width set to auto have the same result as setting max-width to 100% If not, what is the distinction between them? ...

htmlcss

Can ngFor be utilized within select elements in Angular?

I'm facing an interesting challenge where I need to display multiple select tags with multiple options each, resulting in a data structure that consists of an array of arrays of objects. <div class="form-group row" *ngIf="myData"> <selec ...

javascripthtmlangulartypescript

Detecting changes in radio button selections through SVG animations

My goal is to trigger an SVG animation when a user selects a specific radio button. The idea is that the value of the radio button should match the ID of the animation. Below is a simplified explanation of the process. Whenever a user clicks on a radio bu ...

javascriptjquerycsssvg

What could be the reason for PHP mysqli failing to insert data into the database in Xampp?

I attempted to use the code below to insert data into a database named sample, where the table is also named sample. The table consists of four fields: first_name, last_name, bio, and created. However, when I try using this code with an HTML form for inpu ...

phphtmlmysqlmysqlixampp

Having trouble locating elements that "match this specific selector" using jQuery's `.find()` method?

According to the jQuery documentation, the find function filters elements based on whether they match a given selector. This sentence may not be completely accurate, or I might be misunderstanding its meaning. For instance, when attempting to change the ...

javascriptjqueryhtml

Is it possible to adjust an attribute within a button based on specific conditions by using a flag in the controller with AngularJS?

<button type="button" class="btn btn-outlined" ng-click="vm.change()" data-modal-target="#add-save-all-alert-modal"></button> In my HTML, there is an attribute named "data-modal-target" that triggers a modal when ng-click is activated. I want ...

javascriptangularjshtml

Unable to modify state from a child element

As the pagination component's state moved into the parent component, an issue arises where the currentPage state is not being updated properly on page changes. In the previous setup, when the currentPage state was local, it functioned as expected: c ...

javascriptreactjs

jQuery fails to update the CSS3 animation speed dynamically in IE10

I am currently working on a side project that involves using moving divs with @keyframes and CSS3's animation property. Initially, I faced difficulties in getting this to work smoothly on webkit browsers due to issues with transform3d. However, after ...

jquerycssanimationinternet-explorer-10css-animations

Integration of a QR code scanner on a WordPress website page

I'm in the process of setting up a QR code scanner on my Wordpress site or within a popup. The goal is for users to be able to scan a QR code when they visit the page/popup link. Specifically, the QR code will represent a WooCommerce product URL, and ...

javascriptphphtmlhtml5-canvas