【发布时间】：2022-01-20 14:11:10
【问题描述】：
我正在尝试为 freecodecamp 创建一个指导页面。我在左侧有一个导航栏 (id=nav-bar) 作为弹性框，右侧有一组部分 (id=main-doc) 也使用弹性框。
如何修复导航栏的位置，以便在我滚动页面的其余部分时它不会滚动。我已经能够修复未包含在弹性框中的标题。
body{
display: flex;
flex-direction: row;
background-color: rgba(10, 10, 10, 0.3);
}
#link{
color: blue;
}
#navbar{
width: 25%;
display: flex;
flex-direction: column;
margin-top: 30px;
}
#header{
font-size: 200%;
font-family: 'Dongle', sans-serif;
position: fixed;
top: 0;
}
.nav-link{
font-size: 200%;
font-family: 'Dongle', sans-serif;
color: black;
border-top-style: solid;
border-width: 1px;
text-decoration: none;
}
.nav-link:hover{
background-color: white;
padding: 20px;
border-radius: 10px;
transition: 1s;
}
@media only screen and (max-width: 500px){
#navbar{
display: none;
}
}
#main-doc{
display:flex;
flex-direction: column;
justify-content: center;
}
.main-section{
font-family: 'Dongle', sans-serif;
font-size: 7vw;
padding-left: 5%;
}
.section-text{
margin-left: -2%;
font-size: 2vw;
line-height: 75%;
}
.codebox {
border:1px solid black;
background-color:#EEEEFF;
width:300px;
overflow:auto;
padding:10px;
line-height: 10%;
}
.codebox code {
font-size:.1em;
}<html>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dongle:wght@300&display=swap" rel="stylesheet">
<body>
<nav id="navbar">
<header id="header">C Documentation</header>
<a class="nav-link" href="#welcome">Welcome</a>
<a class="nav-link" href="#Hello_World">Hello World</a>
<a class="nav-link" href="#Int_Main(Void)">Int Main(Void)</a>
<a class="nav-link" href="#Printf">Printf</a>
<a class="nav-link" href="#Variables">Variables</a>
<a class="nav-link" href="#Loops">Loops</a>
<a class="nav-link" href="#Input">Input</a>
</nav>
<main id="main-doc">
<section id="welcome" class="main-section">
<header>Welcome</header>
<p class="section-text">C (/ˈsiː/, as in the letter c) is a general-purpose, procedural computer programming language supporting structured programming, lexical variable scope, and recursion, with a static type system. By design, C provides constructs that map efficiently to typical machine instructions. It has found lasting use in applications previously coded in assembly language. Such applications include operating systems and various application software for computer architectures that range from supercomputers to PLCs and embedded systems.</p>
<p class="section-text">A successor to the programming language B, C was originally developed at Bell Labs by Dennis Ritchie between 1972 and 1973 to construct utilities running on Unix. It was applied to re-implementing the kernel of the Unix operating system.[6] During the 1980s, C gradually gained popularity. It has become one of the most widely used programming languages,[7][8] with C compilers from various vendors available for the majority of existing computer architectures and operating systems. C has been standardized by ANSI since 1989 (ANSI C) and by the International Organization for Standardization (ISO).</p>
<p class="section-text">C is an imperative procedural language. It was designed to be compiled to provide low-level access to memory and language constructs that map efficiently to machine instructions, all with minimal runtime support. Despite its low-level capabilities, the language was designed to encourage cross-platform programming. A standards-compliant C program written with portability in mind can be compiled for a wide variety of computer platforms and operating systems with few changes to its source code.
<a href="https://en.wikipedia.org/wiki/C_(programming_language)" id="link">-- From Wikipedia</a></p>
</section>
<section id="Hello_World" class="main-section">
<header>Hello World</header>
<p class="section-text">Lets right our first code. Below is an example of a simple program you can run on C! </p>
<div class="codebox">
<code>
#include <stdio.h><br>int main(void)<br>{<br>printf("Hello World")<br>}
</code>
</div>
<ul class="section-text">
<li>The #include is a preprocessor command that tells the compiler to include the contents of stdio.h (standard input and output) file in the program.</li>
<li>The stdio.h file contains functions such as scanf() and printf() to take input and display output respectively.</li>
<li>If you use the printf() function without writing #include <stdio.h>, the program will not compile.</li>
<li>The execution of a C program starts from the main() function.</li>
<li>printf() is a library function to send formatted output to the screen. In this program, printf() displays Hello, World! text on the screen.</li>
</ul>
</section>
<section id="Int_Main(Void)" class="main-section">
<header>Int Main(Void)</header>
<div class="codebox">
<code>
int main(void)
</code>
</div>
<p class="section-text">int main(void) is the beginning of a function definition. Inside the curly braces that follow it, there are statements that are executed when your program runs. Let’s break it down piece by piece:</p>
<p class="section-text">main is the name of the first function executed in your program when your run it. Strictly speaking, main is not exactly the very first thing that runs. There is some startup code you don’t see that is run first, to prepare a few things before it calls finally your main function. But from the point of view of your own source code, main is the first function that will be called when you run your program.</p>
<p class="section-text">int, as it appears before the function name main, is the data type of the return value of the function. The main function should always return an int. In environments that have an operating system (OS), the OS starts your program running. The integer value returned from main provides a way for your program to return a value to the OS indicating whether the program succeeded, failed, or generated some integer result.</p>
</section>
<section id="Printf" class="main-section">
<header>Printf</header>
<div class="codebox">
<code>
printf()
</code>
</div>
<p class="section-text">The C library function int printf("something in here") sends formatted output to stdout.</p>
</section>
<section id="Variables" class="main-section">
<header>Variables</header>
<p class="section-text">A variable is nothing but a name given to a storage area that our programs can manipulate. Each variable in C has a specific type, which determines the size and layout of the variable's memory; the range of values that can be stored within that memory; and the set of operations that can be applied to the variable.</p>
<p class="section-text">The name of a variable can be composed of letters, digits, and the underscore character. It must begin with either a letter or an underscore. Upper and lowercase letters are distinct because C is case-sensitive.</p>
<div class="codebox">
<code>
char
</code>
</div>
<p class="section-text">Typically a single octet(one byte). It is an integer type.</p>
<div class="codebox">
<code>
int
</code>
</div>
<p class="section-text">The most natural size of integer for the machine.</p>
<div class="codebox">
<code>
float
</code>
</div>
<p class="section-text">A single-precision floating point value.</p>
<div class="codebox">
<code>
double
</code>
</div>
<p class="section-text">A double-precision floating point value.</p>
<div class="codebox">
<code>
bool
</code>
</div>
<p class="section-text">Represents true or false</p>
</section>
<section id="Loops" class="main-section">
<header>Loops</header>
<div class="codebox">
<code>
while()
</code>
</div>
<p class="section-text">Repeats a statement or group of statements while a given condition is true. It tests the condition before executing the loop body.</p>
<div class="codebox">
<code>
for()
</code>
</div>
<p class="section-text">Executes a sequence of statements multiple times and abbreviates the code that manages the loop variable.</p>
<div class="codebox">
<code>
do{}<br>while()
</code>
</div>
<p class="section-text">It is more like a while statement, except that it tests the condition at the end of the loop body.</p>
</section>
<section id="Input" class="main-section">
<header>Input</header>
<p class="section-text">When we say Input, it means to feed some data into a program. An input can be given in the form of a file or from the command line. C programming provides a set of built-in functions to read the given input and feed it to the program as per requirement.</p>
<p class="section-text">This means we can use defined funtions to get inputs from the user depending on our C libraries and functions.</p>
</section>
</main>
</body>
</html>【问题讨论】：