Вот так вот:
Правая часть остается доступной в прокрутке, а левая выпадает из нее.
/*╠═════════════════════════════ HTML ═════════════════════════════╣*/
* {
margin: 0;
padding: 0;
}
html, body {
position: absolute;
height: 100%;
width: 100%;
background-color: #e2e9f5;
}
body { overflow-y: scroll; }
::selection {
color: #fff;
background: #36A172;
}
/*╠════════════════════════════ HEADER ════════════════════════════╣*/
div.header {
position: relative;
height: 94px;
width: calc(1300px - 6px);
margin: 40px 0 0 0;
left: calc((100% - 1300px) / 2);
background-color: #365595;
border-radius: 10px;
border-color: #95aedc;
border-style: solid;
border-width: 3px;
overflow: hidden;
}
div.navigation {
display: inline-block;
float: left;
user-select: none;
}
div.navigation>ul {
font-size: 0;
list-style: none;
}
div.navigation>ul>li {
font-size: 20px;
font-family: 'Orpheus';
display: inline-block;
}
div.navigation>ul>li>a {
color: white;
display: block;
width: 150px;
height: 94px;
line-height: 94px;
text-align: center;
text-decoration: none;
transition: 0.8s linear;
}
div.navigation>ul>li>a:hover {
background-color: #95aedc;
transition: 0.8s linear;
}
div.title {
display: block;
float: right;
font-size: 30px;
color: white;
width: calc(50% - 80px - 3px);
height: 94px;
line-height: 94px;
text-align: center;
font-family: 'Lobster';
user-select: none;
cursor: default;
}
div.logo {
position: absolute;
top: 7px;
left: calc((100% - 160px - 6px) * 0.5);
height: 160px;
width: 160px;
background-color: #365595;
border-radius: 100%;
border-color: #95aedc;
border-style: solid;
border-width: 3px;
z-index: 1;
transition: 0.8s linear;
}
div.logo>img {
height: 140px;
margin: 8px 14px;
user-select: none;
}
/*╠════════════════════════════ FOOTER ════════════════════════════╣*/
div.footer {
position: relative;
height: 147px;
width: calc(1300px - 6px);
left: calc((100% - 1300px) / 2);
background-color: #365595;
border-radius: 10px 10px 0 0;
border-color: #95aedc;
border-style: solid;
border-width: 3px 3px 0px 3px;
}
div.contacts-1>ul, div.contacts-2>ul {
position: absolute;
top: 20px;
list-style: none;
color: white;
font-family: 'Boblic';
font-size: 15px;
line-height: 20px;
}
div.contacts-1>ul { left: 50px; }
div.contacts-2>ul { left: 400px; }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ШПЭ | Home</title>
<link rel="icon" type="image/png" href="pictures/misis-logo_30px.png"/>
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="home.css">
</head>
<body>
<header>
<div class="header">
<nav><div class="navigation">
<ul>
<li><a href="">Главная</a></li>
<li><a href="">О нас</a></li>
<li><a href="C:/Users/Егор/Desktop/site2/timetable.html">Расписание</a></li>
</ul>
</div></nav>
<div class="title">
<p>Школа Программистов</p>
</div>
</div>
<div class="logo">
<img src="pictures/misis2.png">
</div>
</header>
<div class="content">
<div class="left field">
<div class="block">
<h1>Наследование</h1>
<p>Наследование (англ. inheritance) — концепция объектно-ориентированного программирования, согласно которой абстрактный тип данных может наследовать данные и функциональность некоторого существующего типа, способствуя повторному использованию компонентов программного обеспечения.</p>
<h2>Терминология</h2>
<p>В объектно-ориентированном программировании, начиная с «Simula 67», абстрактные типы данных называются классами.</p>
<p>Класс, опредёленный через наследование от другого класса, называется: производным классом, классом потомком (англ. derived class) или подклассом (англ. subclass). Класс, от которого новый класс наследуется, называется: предком (англ. parent), базовым классом (англ. base class) или суперклассом (англ. parent class).</p>
<h2>Применение</h2>
<p>Наследование является механизмом повторного использования кода (англ. code reuse) и способствует независимому расширению программного обеспечения через открытые классы (англ. public classes) и интерфейсы (англ. interfaces). Установка отношения наследования между классами порождает иерархию классов (англ. class hierarchy).</p>
<h2>Наследование и полиморфизм подтипов</h2>
<p>Часто наследование отождествляют с полиморфизмом подтипов (англ. subtyping):
<ul>
<li>Концептуально, полиморфизм подтипов устанавливает отношение: «является» (англ. is-a relationship), — тем самым имитируя семантическое отношение наследования;</li>
<li>В свою очередь наследование в большей степени относится к повторному использованию кода, то есть определяет синтаксическое отношение.</li>
</ul>
</p>
</div>
</div>
<div class="right field">
<div class="block">
<h1>Title</h1>
<p>Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.</p>
</div>
</div>
</div>
<footer>
<div class="footer">
<div class="contacts-1">
<ul>
<li>Приемная директора: (4725) 45-12-22</li>
<li>факс: (4725) 45-12-00, 32-43-61</li>
<li>e-mail: 451222@sf-misis.ru</li>
</ul>
</div>
<div class="contacts-2">
<ul>
<li>Приемная комиссия: (4725) 45-12-12</li>
<li>Деканат ФАИТ: (4725) 45-12-15</li>
<li>Деканат ФММТ: (4725) 45-12-13</li>
<li>Деканат ФИЭ: (4725) 45-12-14</li>
<li>Деканат ГФ: (4725) 45-12-00, доб.359</li>
</ul>
</div>
</div>
</footer>
</body>
</html>
Простой
Простой
