Search code examples
htmlcsstemplatesfrontendeleventy

Body size not responsive to height change after switching to templates

SOLVED: by including <!DOCTYPE html> at the beginning of the generated file.

Not sure why, but I can include it in the base template but it does not show up in the generated html file. Yet if I inspect in the browser, it's there and solves the issue.

I am porting a static website over to to a static website generator which uses templates. The static-site generator is Eleventy and I am using the Nunjucks templating engine. For development, I am using Visual Studio live server for the original version and Browsersync for the Eleventy port.

On the original implementation, my styling works fine. This picture shows my problem after I've tried to implement templating:Body size not respsonsive. I have also added a live version. Enable dark mode in the navbar to see the same thing (or inspect to see that the html/body element does not span the whole height and the main element overflows).

The dark background is the height of the <html>, <body> and <div id="theme-body"> elements. It should extend the entire length of the page (and does in my original implementation), but it only takes up the height of the screen after I've inserted it into my base template, while the <main> element (which include my cards) extends beyond the body. The css is identical to the working version.

I anticipate the problem is a result of me not fulling understanding how to order css declarations and templates. The height seems to be set before the content is inserted, but I can't see a way around this. And even still, I would think that it should still respond to changes.

I have set up a base template which includes all my meta data, navigation, styling, and footer. Then I insert my index page (landing page w/ cards) into the base template between my navigation and footer. Here is a shortened versions of my base template:

base.njk

<html lang="en">
  <head>
    ...
    <!-- Style -->
    <link rel="stylesheet" type="text/css" href="/css/main.css">
    ...
  </head>
  <body>
    <input type="checkbox" id="theme-switch">
    <div id="theme-body">
      <header>
        <!-- Navigation -->
        ...
      </header>

      <!--CONTENT -->
      {{ content | safe }}

      <!-- Footer -->
      <footer class="page-footer">
        ...
      </footer>
    </div>
  </body>

  <!-- Bootstrap requirements: jquery, popper, bootstrap js plugins -->
  ...
  <script src="/js/main.js"></script>
</html>

The content (in this case my homepage - hardcoded HTML) populates in the {{ content | safe }} section. HTML structure is the same in the generated page as the original.

I have tried to set the height of html and body to 100%, min-height 100% in every conceivable location and it always considers 100% as the screen height. None of the suggestions in this SO answer helped, and they can't explain why they would work before but not now.

In addition, here is some css in a pastebin. I am also using bootstrap, which this pastebin does not include.

Solution

  • Solved by including <!DOCTYPE html> at the beginning of the generated file.

    Not sure why, but I can include it in the base template but it does not show up in the generated html file. Yet if I inspect in the browser, it's there and solves the issue.