Контент не фиксируется
При уменьшении размеров экрана через media, при нажатии на кнопку меню часть контента прячется под фиксированной шапкой(position: fixed). Если убираю fixed, то тогда все отображается так как надо, но прячется шапка( Пробовал задать id h4 не помогло, margin и padding для body тоже без изменений, пробовал задать фиксированную высоту для меню- тоже не помогло Необходимый контент постоянно прячется под шапкой(
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-size: 20px;
color: #646262;
margin: 10px;
}
#navbar {
height: 100%;
margin-right: 5%;
position: fixed;
top: 0;
left: 0;
border-right: 3px solid #7b6f6f;
border-color: #7b6f6f;
}
.navbar-menu li {
border-top: 1px solid;
list-style-type: none;
padding: 10px;
}
.navbar-menu li a {
text-decoration: none;
color: #646262;
}
#main-doc {
margin-left: 300px;
}
h3,
h4 {
color: black;
}
h3 {
padding: 10px;
}
h4 {
margin-top: 10px;
margin-bottom: 10px;
}
code {
display: block;
margin: 5px;
padding: 10px;
background: #e0e0e0;
white-space: pre-line;
word-break: normal;
word-wrap: normal;
}
p {
padding: 10px;
}
.main-section ul li {
margin-left: 100px;
padding: 10px;
}
@media (max-width: 700px) {
#navbar {
width: 100%;
/* position: static; */
}
h3 {
background: #345;
color: white;
text-align: center;
}
.navbar-menu {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
background: black;
opacity: .4;
}
#navbar ul li {
font-weight: bold;
border-right: 1px solid;
border-top: none;
}
#main-doc {
margin: 200px auto 0 auto;
text-align: left;
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<nav id="navbar">
<header>
<h3>JS-документация</h3>
</header>
<ul class="navbar-menu">
<li><a class="nav-link" href="#introd">Введение</a></li>
<li><a class="nav-link" href="#know">Что вы уже должны знать</a></li>
<li><a class="nav-link" href="#JavaScript_and_Java">JavaScript и Java</a></li>
<li><a class="nav-link" href="#hi_word">Привет, мир</a></li>
<li><a class="nav-link" href="#var">Переменные</a></li>
<li><a class="nav-link" href="#declaring">Объявление переменных</a></li>
<li><a class="nav-link" href="#if_else">Оператор if...else</a></li>
</ul>
</nav>
<main id="main-doc">
<section class="main-section" id="introd">
<header>
<h4>Введение</h4>
</header>
<p>JavaScript — это кроссплатформенный объектно-ориентированный язык сценариев. Это небольшой и легкий язык. Внутри хост-среды (например, веб-браузера) JavaScript может быть подключен к объектам своей среды, чтобы обеспечить программный контроль над
ними.</p>
<p>JavaScript содержит стандартную библиотеку объектов, таких как Array, Date и Math, а также основной набор языковых элементов, таких как операторы, управляющие структуры и операторы. Базовый JavaScript можно расширить для различных целей, дополнив
его дополнительными объектами; Например:</p>
<ul>
<li>Клиентский JavaScript расширяет базовый язык, предоставляя объекты для управления браузером и его объектной моделью документа (DOM). Например, клиентские расширения позволяют приложению размещать элементы в HTML-форме и реагировать на пользовательские
события, такие как щелчки мышью, ввод данных в форму и навигация по страницам.</li>
<li>Серверный JavaScript расширяет базовый язык, предоставляя объекты, относящиеся к запуску JavaScript на сервере. Например, расширения на стороне сервера позволяют приложению взаимодействовать с базой данных, обеспечивать непрерывность информации
от одного вызова приложения к другому или выполнять манипуляции с файлами на сервере.</li>
</ul>
</section>
<section class="main-section" id="know">
<header>
<h4>Что вы уже должны знать</h4>
</header>
<p>В этом руководстве предполагается, что у вас есть следующие базовые знания:</p>
<ul>
<li>Общее представление об Интернете и Всемирной паутине (WWW).</li>
<li>Хорошее знание языка гипертекстовой разметки (HTML).</li>
<li>Некоторый опыт программирования. Если вы новичок в программировании, попробуйте один из руководств, связанных с JavaScript на главной странице.</li>
</ul>
</section>
<section class="main-section" id="JavaScript_and_Java">
<header>
<h4>JavaScript и Java</h4>
</header>
<p>JavaScript и Java в чем-то похожи, но в чем-то принципиально различаются. Язык JavaScript похож на Java, но не имеет статической типизации Java и строгой проверки типов. JavaScript следует большинству синтаксиса выражений Java, соглашениям об именах
и основным конструкциям потока управления, поэтому он был переименован из LiveScript в JavaScript.</p>
<p>В отличие от системы классов времени компиляции Java, созданных объявлениями, JavaScript поддерживает систему времени выполнения, основанную на небольшом количестве типов данных, представляющих числовые, логические и строковые значения. JavaScript
имеет объектную модель на основе прототипов вместо более распространенной объектной модели на основе классов. Модель на основе прототипа обеспечивает динамическое наследование; то есть то, что наследуется, может варьироваться для отдельных объектов.
JavaScript также поддерживает функции без каких-либо особых декларативных требований. Функции могут быть свойствами объектов, выполняемыми как свободно типизированные методы.</p>
<p>JavaScript — язык очень свободной формы по сравнению с Java. Вам не нужно объявлять все переменные, классы и методы. Вам не нужно заботиться о том, являются ли методы открытыми, закрытыми или защищенными, и вам не нужно реализовывать интерфейсы.
Переменные, параметры и типы возвращаемых функций не имеют явного типа.</p>
</section>
<section class="main-section" id="hi_word">
<header>
<h4>Привет, мир</h4>
</header>
<p>Чтобы начать писать JavaScript, откройте блокнот и напишите свой первый код JavaScript «Hello world»:</p>
<code>function greetMe(yourName) { alert("Hello " + yourName); } greetMe("World");</code>
<p>выберите код в блокноте и нажмите Ctrl+R, чтобы посмотреть, как он разворачивается в вашем браузере!</p>
</section>
<section class="main-section" id="var">
<header>
<h4>Переменные</h4>
</header>
<p>Вы используете переменные как символические имена для значений в вашем приложении. Имена переменных, называемых идентификаторами, подчиняются определенным правилам.</p>
<p>Идентификатор JavaScript должен начинаться с буквы, знака подчеркивания (_) или знака доллара ($); последующие символы также могут быть цифрами (0-9). Поскольку JavaScript чувствителен к регистру, буквы включают символы от «A» до «Z» (верхний регистр)
и символы от «a» до «z» (нижний регистр).</p>
<p>В идентификаторах можно использовать буквы ISO 8859-1 или Unicode, такие как å и ü. Вы также можете использовать escape-последовательности Unicode в качестве символов в идентификаторах. Некоторыми примерами допустимых имен являются Number_hits,
temp99 и _name.</p>
</section>
<section class="main-section" id="declaring">
<header>
<h4>Объявление переменных</h4>
</header>
<p>Вы можете объявить переменную тремя способами:</p>
<p>С ключевым словом var. Например,</p>
<code>var x = 42.</code>
<p>этот синтаксис можно использовать для объявления как локальных, так и глобальных переменных.</p>
<p>Просто присвоив ему значение. Например,</p>
<code>x = 42.</code>
<p>это всегда объявляет глобальную переменную. Он генерирует строгое предупреждение JavaScript. Вы не должны использовать этот вариант.</p>
<p>С ключевым словом пусть. Например,</p>
<code>let y = 13.</code>
<p>этот синтаксис можно использовать для объявления локальной переменной области блока. См. Область действия переменной ниже.</p>
</section>
<section class="main-section" id="if_else">
<header>
<h4>Оператор if...else</h4>
</header>
<p>Используйте оператор if для выполнения оператора, если логическое условие истинно. Используйте необязательное предложение else для выполнения оператора, если условие ложно. Оператор if выглядит следующим образом:</p>
<code>if (condition) { statement_1; } else { statement_2; }</code>
<p>условие может быть любым выражением, которое оценивается как истинное или ложное. См. Boolean для объяснения того, что оценивается как истинное и ложное. Если условие оценивается как истинное, выполняется оператор_1; в противном случае выполняется
оператор_2. оператор_1 и оператор_2 могут быть любыми операторами, включая дополнительные вложенные операторы if.</p>
<p>Вы также можете составить операторы, используя else if для последовательной проверки нескольких условий, как показано ниже:</p>
<code>if (condition_1) { statement_1; } else if (condition_2) {
statement_2; } else if (condition_n) { statement_n; } else {
statement_last; }</code>
<p>В случае нескольких условий будет выполнено только первое логическое условие, которое оценивается как истинное. Чтобы выполнить несколько операторов, сгруппируйте их в блочном операторе ({ ... }). В общем, рекомендуется всегда использовать блочные
операторы, особенно при вложенных операторах if:</p>
<code>if (condition) { statement_1_runs_if_condition_is_true;
statement_2_runs_if_condition_is_true; } else {
statement_3_runs_if_condition_is_false;
statement_4_runs_if_condition_is_false; }</code>
<p>рекомендуется не использовать простые присваивания в условном выражении, поскольку при беглом просмотре кода присваивание можно спутать с равенством. Например, не используйте следующий код:</p>
<code>if (x = y) { /* statements here */ }</code>
<p>Если вам нужно использовать присваивание в условном выражении, обычной практикой является заключение присваивания в дополнительные круглые скобки. Например:</p>
<code>if ((x = y)) { /* statements here */ }</code>
</section>
</main>
</body>
</html>