Next.js: NextJS is wrapping my content - 100vh sizing issue

Created on 10 Feb 2017 · 6Comments · Source: vercel/next.js

Ive just refactored a project im working on to use nextjs. I have a slight problem with the layout.

I have zero margin and padding on html and body and a height of 100vh. I also have a container div that is 100% height using flex. The child containers use flex and the content container (header>content>footer) is set to grow (flex-grow) so that the footer is always at the bottom of the window.

It seems next is wrapping my content in divs which break my full screen layout.
The nav element is my first element.

Can anyone offer advise? Thanks.

Source

itaylorweb

Most helpful comment

Just wanted to comment so that this is easier to find for other people. I was struggling with this for a good hour after having not done CSS for a good few months. Making the body and html tags 100% height and then all the subsequent divs 100% was just a waste of time. Setting the inner div to 100vh is the right way to go. Thanks for the answer!

adrianmcli on 22 Aug 2017

👍7

All 6 comments

Its my fault. I was applying 100vh to the wrong element. :) 👍 👎

itaylorweb on 10 Feb 2017

@itaylorweb Hi! I'm facing the same problem. It seemed to me that next's container is blocking my page from being full height. Can you please share your solution?

binchik on 3 Mar 2017

@binchik if you want to have a full height container using 100vh it needs to be the main wrapping container before any other content e.g.:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div class="some-div"> // I was incorrectly applying 100vh here and on the below 'another-div' container
      <div class="another-div">
        <div class="main-wrapper"> //  If you apply 100vh here but no other styles on the containing divs it it will work fine
          <p class="some-content"></p>
        </div>
      </div>
    </div>
  </body>
</html>

Hope that helps. Sorry for my poor explanation. :)

itaylorweb on 3 Mar 2017

👍4

@itaylorweb Big thanks, it really helped!

binchik on 3 Mar 2017

👍1

adrianmcli on 22 Aug 2017

👍7

Thanks, vh with next.js did the trick!