FCC editor showing wrong results?- Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:
FCC editor is showing me a different preview of my code than the chrome and edge browsers. In FCC, the main and nav elements aren’t filling up all the available space vertically, also sticky isn’t working. I copy pasted everything into visual studio und opened index.html with edge and chrome. In both cases the elements are taking up the space and sticky works. Any advice on what do to next would be highly appreciated.
Your code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

*{
    box-sizing:border-box;
    margin:0;
    padding:0;
  }
 
  body {
      display:flex;
      background-color:antiquewhite;
  }
  nav{
    display:flex;
    flex-direction:column;
    background-color:aqua;
    align-items:flex-start;
    height:100vh;
    position: sticky;
    top:0;
  }
  nav header{
    font-size:20px;
  }
  main{
    background-color:aliceblue;
  }
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    <link href="styles.css" rel="stylesheet">
  <head>
  <body>
    <nav id="navbar">
      <header>Java Documentation</header>     <a>Introduction</a> 
      <a href="#prerequisites">Prerequisites</a>
      <a href="#introduction">Introduction</a>
     <a href="#features">Features</a>
      <a href="#hello_world">Hello world</a>
     <a href="#variables">Variables</a>
     <a href="#data_types">Data types</a>
      <a href="#if_else">If else</a>
     <a href="#for_loop">For loop</a>
     <a href="#while_loop">While loop</a>
     <a href="#do_while_loop">Do while</a>
     <a href="#ontinue">Continue</a>
     <a href="#break">Break</a>
     <a href="#reference">Reference</a>
    </nav>
    <main id="main-doc">
        <header>Java Documentation</header>
      <section class="main-section">Prerequsites
        The tutorial is for complete beginner, no prerequisites are required. Happy learning!
      </section>
      <section class="main-section">
        <h1>Introduction</h1>
        <p></p>
<p> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</p>
      </section>
      <section class="main-section" id="hello_world"> 
        <h1>Hello world</h1>
        <p>This is a very basic java program that prints a message “This is my first program in java”.</p>
      </section>
      <section class="main-section" id="variables">
        <h1>Variables</h1>
        <p> </p>
      </section>
      <section class="main-section" id="data_types">
        <h1>Data types</h1>
        <p></p>
      </section>
      <section class="main-section" id="if_else">
        <h1>If else</h1>
        <p></p>
      </section>
      <section class="main-section" id="switch_case">
        <h1>Switch case</h1>
        <p> </p>
      </section>
      <section class="main-section" id="for_loop">
        <h1>For loop</h1>
        <p></p>
      </section>
      <section class="main-section" id="while_loop">
        <h1>While loop</h1>
        <p></p>
      </section>
      <section class="main-section" id="do_while">
        <h1>Do while loop</h1>
        <p></p>
      </section>
      <section class="main-section" id="continue">
        <h1>Continue</h1>
        <p></p>
      </section>
       <section class="main-section" id="break">
        <h1>Break</h1>
        <p></p>
      </section>
      <section class="main-section" id="reference">
        <h1>Reference</h1>
        <p>https://beginnersbook.com/java-tutorial-for-beginners-with-examples/</p>
      </section>

      
    </main>
  </body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

EDIT: I removed the text from the HTML file to make the code more readable.

2

Hi @jayendra,

Welcome to the community! I see what you’re saying about the difference in between the editor and loading your site locally. From what I can tell, position sticky isn’t like having to adjust for being in an iframe possibly. But, for a situation such as this, you should be using fixed position, which will work no matter what.

Using sticky positioning is useful for elements that are embedded within other elements: for example, I use sticky positioning for <th> elements in a table so that when the table scrolls, the header columns will stick to the top of the scroll box and make it nicer to read the table.

Using fixed, in this case, will do what you need to do which is to fix its position when scrolling.

2 Likes
3

Hey Marcus, thanks for your advice, I will try using fixed position instead.

2 Likes
4

sticky not working is because body is a flex container. You have to use align-items: flex-start on it (should fix the space distribution as well).

Or, you could make the body a grid container and use a two-column layout instead as well.

1 Like
5

Hi, thanks it did fix the issue, but I don’t really get why? Shouldn’t the items fill up all available space of their parent regardless of align-items:flex-start? I even tried using flex-grow on them but nothing worked. In fact, I thought align-items:flex-start; would do the opposite and place them at the start of the flex container, leaving space at the end.

Also, it’s weird that it worked in chrome and edge regardless. What makes them do that?

I would appreciate it a lot if you could break it down for me.

1 Like
6

As said, it likely has to do with the preview containers and their CSS. Pretty sure it affects the height calculation on the body making the content overflow the body. If you give your body some arbitrarily large height (like 10000px or whatever is enough to contain all the content) it would work as well. Or at least would look like it worked (it isn’t really a solution).

1 Like
7

Oh I see, thanks for the explanation.

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.