Я наткнулся на видео ниже, как создать фиксированную боковую панель с использованием сетки CSS.
https://www.youtube.com/watch?v=alsxCvrbeko
Я реализовал то, что было в видео до некоторого html и все было круто, пока я не увидел, что он не работает в IE11. Я просмотрел net и узнал, что реализация сетки 1022 * работает по-другому в IE11 и что мне нужно добавить префиксы для IE. Я добавил префиксы, но мой макет сетки все еще не будет работать в IE11.
Пожалуйста, посмотрите мои HTML и CSS ниже
https://codepen.io/KingZim/pen/abvdJKN
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>C# Documentation</title>
</head>
<body>
<nav id="navbar">
<header>
<h1><span class="test">C#</span>Documentation</h1>
</header>
<div>
<label for="toggle">☰</label>
<input type="checkbox" id="toggle" />
<div>
<a href="#introduction" class="nav-link">Introduction</a>
<a href="#visual_studio_community" class="nav-link">Visual Studio Community</a>
<a href="#hello_world" class="nav-link">Hello World</a>
<a href="#hello_world_explained" class="nav-link">Hello world explained</a>
<a href="#variables" class="nav-link">Variables</a>
<a href="#reference" class="nav-link">Reference</a>
</div>
</div>
</nav>
<div class="main-content">
<main id="main-doc">
<section id="introduction" class="main-section">
<header>
<h2>Introduction</h2>
</header>
<article>
<p>
Welcome to this C# tutorial. With the introduction of the .NET framework, Microsoft included a new language called C# (pronounced C Sharp).
C# is designed to be a simple, modern, general-purpose, object-oriented programming language, borrowing key concepts from several other languages, most notably Java.
</p>
<p>
C# is used for
</p>
<ul>
<li>Games</li>
<li>Mobile Applications</li>
<li>Desktop Applications</li>
<li>Web Sites</li>
<li>Web Applications</li>
<li>VR</li>
</ul>
<p>
C# could theoretically be compiled to machine code, but in real life, it's always used in combination with the .NET framework.
Therefore, applications written in C#, requires the .NET framework to be installed on the computer running the application.
While the .NET framework makes it possible to use a wide range of languages, C# is sometimes referred to as THE .NET language, perhaps because it was designed together with the framework.
</p>
<p>
C# is an Object Oriented language and does not offer global variables or functions. Everything is wrapped in classes, even simple types like int and string, which inherit from the System.Object class.
</p>
<p>
In the following chapters, you will be guided through the most basic topics about C#.
</p>
</article>
</section>
<section id="visual_studio_community" class="main-section">
<header>
<h2>Visual Studio Community</h2>
</header>
<article>
<p>
Visual Studio is the professional IDE (Integrated Development Environment) of choice for many .NET developers.
It's created by Microsoft, who also makes the .NET framework as well as the C# programming language, so this makes perfect sense.
Historically, VS (short for Visual Studio) has been expensive to use, but fortunately for you and me, Microsoft has offered a free version for individual developers for many years.
</p>
<p>
Previously, this free version came in separate versions for various tasks, e.g. Visual C# Express, Visual Web Developer and so on.
However, now the name is simply Visual Studio Community and just like the Express versions, it's a lighter version of the professional version of Visual Studio.
This means that you will be missing out on some functionality, but don't worry about it - the Community edition contains all but the most advanced features and it will be more than enough to learn C# through this tutorial.
</p>
<h3>Download Visual Studio Community</h3>
<p>So, to get started with this tutorial, go ahead and download Visual Studio Community from visualstudio.com. Here's a direct link to the download page:</p>
<p>
<a href="https://www.visualstudio.com/downloads/">https://www.visualstudio.com/downloads/</a>
</p>
</article>
</section>
<section id="hello_world" class="main-section">
<header>
<h2>Hello World</h2>
</header>
<article>
<p>
If you have ever learned a programming language, you know that they all start with the "Hello, world!" example, and who are we to break such a fine tradition?
Start Visual Studio Community (introduced in the last chapter), and select <b>File -> New -> Project</b>.
From the project dialog, select the Console App (.NET framework).
This is the most basic application type on a Windows system, but it's great for learning the language.
Once you click Ok, Visual Studio creates a new project for you, including a file called Program.cs.
This is where all the fun is, and it should look something like this:
</p>
<code>
using System;<br />
using System.Collections.Generic;<br />
using System.Linq;<br />
using System.Text;<br />
using System.Threading.Tasks;<br />
<br />
namespace ConsoleApp1<br />
{<br />
    class Program<br />
    {<br />
    static void Main(string[] args)<br />
    {<br />
    }<br />
    }<br />
}<br />
</code>
<p>
Actually, all these lines don't really accomplish anything, or at least it may seem so. Try running the application by pushing F5 on your keyboard.
This will make Visual Studio compile and execute your code, but as you will see, it doesn't do much.
You will likely just see a black window launch and close again. That is because our application doesn't do anything yet.
In the next chapter we will go through these lines to see what they are all about, but for now, we really would like to see some results, so let's pretend that we know all about C# and add a couple of lines to get some output.
Inside the last set of { }, add these lines:
</p>
<code>
Console.WriteLine("Hello, world!");<br />
Console.ReadLine();
</code>
<p>
Once again, hit F5 to run it, and you will see the black window actually staying, and even displaying our greeting to the world.
Okay, so we added two lines of code, but what to they do?
One of the nice things about C# and the .NET framework is the fact that a lot of the code makes sense even to the untrained eye, which this example shows.
</p>
<p>
The first line uses the Console class to output a line of text, and the second one reads a line of text from the console.
Read? Why?
Actually this is a bit of a trick, since without it, the application would just end and close the window with the output before anyone could see it.
</p>
<p>
The ReadLine command tells the application to wait for input from the user, and as you will notice, the console window now allows you to enter text. Press Enter to close it.
Congratulations, you have just created your first C# application!
Read on in the next chapter for even more information about what's actually going on.
</p>
</article>
</section>
<section id="hello_world_explained" class="main-section">
<header>
<h2>Hello world explained</h2>
</header>
<article>
<p>
In the previous chapter, we tried writing a piece of text to the console, in our first C# application.
To see some actual progress, we didn't go into much detail about the lines of code we used, so this chapter is an explanation of the Hello world example code.
As you can probably see from the code, some of the lines look similar, so we will bring them back in groups for an individual explanation. Let's start with the shortest and most common characters in our code: The { and }.
They are often referred to as curly braces, and in C#, they mark the beginning and end of a logical block of code.
The curly braces are used in lots of other languages, including C++, Java, JavaScript and many others. As you can see in the code, they are used to wrap several lines of code which belong together.
In later examples, it will be clearer how they are used.
</p>
<p>
Now let's start from the beginning:
</p>
<code>
using System;<br />
using System.Collections.Generic;<br />
using System.Linq;<br />
using System.Text;<br />
using System.Threading.Tasks;
</code>
<p>
<b>using</b> is a keyword, highlighted with blue by the editor.
The using keyword imports a namespace, and a namespace is a collection of classes.
Classes brings us some sort of functionality, and when working with an advanced IDE like Visual Studio, it will usually create parts of the trivial code for us. In this case, it created a class for us, and imported the namespaces which are required or expected to be used commonly.
In this case, 5 namespaces are imported for us, each containing lots of useful classes. For instance, we use the Console class, which is a part of the System namespace.
</p>
<p>
On the other hand, we don't really use the <i>System.Linq</i> namespace yet (for example), so if you're a purist, you may choose to remove this line, but it won't make much of a difference at this point.
</p>
<p>
As you can see, we even get our own namespace:
</p>
<code>
namespace ConsoleApp1
</code>
<p>
The namespace ConsoleApp1 is now the main namespace for this application, and new classes will be a part of it by default.
Obviously, you can change this, and create classes in another namespace.
In that case, you will have to import this new namespace to use it in your application, with the using statement, like any other namespace.
</p>
<p>
Next, we define our class.
Since C# is truly an Object Oriented language, every line of code that actually does something, is wrapped inside a class.
In this case, the class is simply called Program:
</p>
<code>
class Program
</code>
<p>
We can have more classes, even in the same file. For now, we only need one class.
A class can contain several variables, properties and methods, concepts we will go deeper into later on. For now, all you need to know is that our current class only contains one method and nothing else. It's declared like this:
</p>
<code>
static void Main(string[] args)
</code>
<p>
This line is probably the most complicated one in this example, so let's split it up a bit.
The first word is <b>static</b>.
The static keyword tells us that this method should be accesible without instantiating the class, but more about this in our chapter about classes.
</p>
<p>
The next keyword is <b>void</b>, and tells us what this method should return.
For instance, it could be an integer or a string of text, but in this case, we don't want our method to return anything (C# uses the keyword void to express the concept of nothing).
</p>
<p>
The next word is <b>Main</b>, which is simply the name of our method.
This method is the so-called entry-point of our application, that is, the first piece of code to be executed, and in our example, the only piece to be executed.
</p>
<p>
Now, after the name of a method, a set of arguments can be specified within a set of parentheses.
In our example, our method takes only one argument, called <b>args</b>. The type of the argument is a <b>string</b>, or to be more precise, an array of strings, but more on that later.
If you think about it, this makes perfect sense, since Windows applications can always be called with an optional set of arguments.
These arguments will be passed as text strings to our main method.
</p>
<p>
And that's it.
You should now have a basic understanding of our first C# application, as well as the basic principles of what makes a console application work.
</p>
</article>
</section>
<section id="variables" class="main-section">
<header>
<h2>Variables</h2>
</header>
<article>
<p>
A variable can be compared to a storage room, and is essential for the programmer. In C#, a variable is declared like this
</p>
<p>
<span>
<<span>data</span>
<span>type</span>>
</span>
<span>
<<span>name</span>>
</span>
</p>
<p>
An example could look like this:
</p>
<p>
string name;
</p>
<p>
That's the most basic version, but the variable doesn't yet have a value. You can assign one at a later point or at the same time as declaring it, like this:
</p>
<code>
<span>
<<span>data</span>
<span>type</span>>
</span>
<span>
<<span>type</span>>
</span>
=
<span>
<<span>value</span>>
</span>
</code>
<p>
If this variable is not local to the method you're currently working in (e.g. a class member variable), you might want to assign a visibility to the variable:
</p>
<p>
<span>
<<span>visibility</span>>
</span>
<span>
<<span>data</span>
<span>type</span>>
</span>
<span>
<<span>type</span>>
</span>
=
<span>
<<span>value</span>>
</span>
</p>
<p>
And a complete example:
</p>
<code>
private string name = "John Doe";
</code>
<p>
The visibility part is related to classes, so you can find a more complete explanation of it in the chapter about classes.
</p>
</article>
</section>
<section id="reference" class="main-section">
<header>
<h2>Reference</h2>
</header>
<p>All the documentation in this page is taken from <a href="https://csharp.net-tutorials.com/">C# Tutorial</a></p>
</section>
</main>
</div>
</body>
</html>
Мой вопрос: возможно ли реализовать методику CSS Grid, показанную на видео?