我正在使用网格布局创建文档页面。我有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;
}
答案 0 :(得分：1)
您可以在内部元素上尝试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将从流中删除元素，并且不再属于网格。除非您手动设置宽度，否则无法使其延伸网格区域。