Блог

Я создаю страницу документации, используя макет сетки. У меня есть 2 столбца, первый из которых представляет собой вертикальную навигационную панель / меню. Поскольку я установил положение навигационной панели / меню на «фиксированное», это не растягивает всю область сетки. Почему это происходит и что я могу сделать, чтобы это исправить? Ниже приведены коды HTML и CSS соответственно:

 <div class="wrapper">
        <div class="menu">
            <header>JS Documentation</header>

            <ul>
                <a class="nav-link" href="#Introduction" rel="internal"><li>Introduction</li></a>
                <a class="nav-link" href="#What_you_should_already_know" rel="internal"><li>What you should already know</li></a>
                <a class="nav-link" href="#JavaScript_and_Java" rel="internal"><li>JavaScript and Java</li></a>
                <a class="nav-link" href="#Hello_world" rel="internal"><li>Hello world</li></a>
                <a class="nav-link" href="#Variables" rel="internal"><li>Variables</li></a>
                <a class="nav-link" href="#Declaring_variables" rel="internal"><li>Declaring variables</li></a>
                <a class="nav-link" href="#Variable_scope" rel="internal"><li>Variable scope</li></a>
                <a class="nav-link" href="#Global_variables" rel="internal"><li>Global variables</li></a>
                <a class="nav-link" href="#Constants" rel="internal"><li>Constants</li></a>
                <a class="nav-link" href="#Data_types" rel="internal"><li>Data types</li></a>
                <a class="nav-link" href="#if...else_statement" rel="internal"><li>if...else statement</li></a>
                <a class="nav-link" href="#while_statement" rel="internal"><li>while statement</li></a>
                <a class="nav-link" href="#Function_declarations" rel="internal"><li>Function declarations</li></a>
                <a class="nav-link" href="#Reference" rel="internal"><li>Reference</li></a>
            </ul>

        </div>
        <div class="main">
            <div id="intro">
                <h2>Introduction</h2>

                <article>
                    <p>
                        JavaScript is a cross-platform, object-oriented scripting language. It is a small and lightweight language. Inside a host environment (for example, a web browser), JavaScript can be connected to the objects of its environment to provide programmatic control over them.
                    </p>

                    <p>
                        JavaScript contains a standard library of objects, such as Array, Date, and Math, and a core set of language elements such as operators, control structures, and statements. Core JavaScript can be extended for a variety of purposes by supplementing it with additional objects; for example:
                    </p>

                    <li>
                        Client-side JavaScript extends the core language by supplying objects to control a browser and its Document Object Model (DOM). For example, client-side extensions allow an application to place elements on an HTML form and respond to user events such as mouse clicks, form input, and page navigation.
                    </li>

                    <li>
                        Server-side JavaScript extends the core language by supplying objects relevant to running JavaScript on a server. For example, server-side extensions allow an application to communicate with a database, provide continuity of information from one invocation to another of the application, or perform file manipulations on a server.
                    </li>
                </article>
            </div>
</div>

  

 .wrapper{
    display: grid;
    grid-template-columns: minmax(300px, 0.7fr) 2fr;
    grid-template-areas: "menu main";

}

.menu{
    border-right: solid 5px;
    position: fixed;
    height: 100%;
    grid-area: menu;
}

.main{

    grid-area: main;
}
  

Вы можете попробовать position:sticky добиться аналогичного эффекта с внутренним элементом:

 .wrapper {
  display: grid;
  grid-template-columns: minmax(300px, 0.7fr) 2fr;
  grid-template-areas: "menu main";
}

.menu {
  border-right: solid 5px;
  grid-area: menu;
}

.menu>div {
  position: sticky;
  top:0;
}

.main {
  grid-area: main;
}  

 <div class="wrapper">
  <div class="menu">
    <div>
      <header>JS Documentation</header>

      <ul>
        <a class="nav-link" href="#Introduction" rel="internal">
          <li>Introduction</li>
        </a>
        <a class="nav-link" href="#What_you_should_already_know" rel="internal">
          <li>What you should already know</li>
        </a>
        <a class="nav-link" href="#JavaScript_and_Java" rel="internal">
          <li>JavaScript and Java</li>
        </a>
        <a class="nav-link" href="#Hello_world" rel="internal">
          <li>Hello world</li>
        </a>
        <a class="nav-link" href="#Variables" rel="internal">
          <li>Variables</li>
        </a>
        <a class="nav-link" href="#Declaring_variables" rel="internal">
          <li>Declaring variables</li>
        </a>
        <a class="nav-link" href="#Variable_scope" rel="internal">
          <li>Variable scope</li>
        </a>
        <a class="nav-link" href="#Global_variables" rel="internal">
          <li>Global variables</li>
        </a>
        <a class="nav-link" href="#Constants" rel="internal">
          <li>Constants</li>
        </a>
        <a class="nav-link" href="#Data_types" rel="internal">
          <li>Data types</li>
        </a>
        <a class="nav-link" href="#if...else_statement" rel="internal">
          <li>if...else statement</li>
        </a>
        <a class="nav-link" href="#while_statement" rel="internal">
          <li>while statement</li>
        </a>
        <a class="nav-link" href="#Function_declarations" rel="internal">
          <li>Function declarations</li>
        </a>
        <a class="nav-link" href="#Reference" rel="internal">
          <li>Reference</li>
        </a>
      </ul>
    </div>
  </div>
  <div class="main">
    <div id="intro">
      <h2>Introduction</h2>

      <article>
        <p>
          JavaScript is a cross-platform, object-oriented scripting language. It is a small and lightweight language. Inside a host environment (for example, a web browser), JavaScript can be connected to the objects of its environment to provide programmatic control
          over them.
        </p>

        <p>
          JavaScript contains a standard library of objects, such as Array, Date, and Math, and a core set of language elements such as operators, control structures, and statements. Core JavaScript can be extended for a variety of purposes by supplementing it
          with additional objects; for example:
        </p>

        <li>
          Client-side JavaScript extends the core language by supplying objects to control a browser and its Document Object Model (DOM). For example, client-side extensions allow an application to place elements on an HTML form and respond to user events such
          as mouse clicks, form input, and page navigation.
        </li>

        <li>
          Server-side JavaScript extends the core language by supplying objects relevant to running JavaScript on a server. For example, server-side extensions allow an application to communicate with a database, provide continuity of information from one invocation
          to another of the application, or perform file manipulations on a server.
        </li>
      </article>
    </div>
  </div>  

Настройка position:fixed удалит элемент из потока и больше не будет принадлежать сетке. Если вы не установите ширину вручную, вы не сможете заставить ее растягивать область сетки.