Растянуть menu и sidebar на всю высоту content

Question

Помогите сделать меню и сайдбар по высоте контента. Обязательно нужно использовать позиционирование и псевдоэлементы before и after, возможно ещё понадобится z-index.

HTML:

<!DOCTYPE html>
<html lang="zxx">
<head>
<meta charset="utf-8" />
<title>Табличная вёрстка</title>
<link href="./style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<main class="main">
<header class="header">
<h1 class="site-title">Это мой первый сайт</h1>
</header>
<nav class="menu">
<ul>
<li><a href="#" class="menu-link">Пункт меню</a></li>
<li><a href="#" class="menu-link">Пункт меню</a></li>
<li><a href="#" class="menu-link">Пункт меню</a></li>
<li><a href="#" class="menu-link">Пункт меню</a></li>
<li><a href="#" class="menu-link">Пункт меню</a></li>
<li><a href="#" class="menu-link">Пункт меню</a></li>
</ul>
</nav>
<aside class="sidebar">1</aside>
<article class="content">
<h2>Статья о чём-то</h2>
<p>
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
</p>
<p>
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
</p>
<p>
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
</p>
</article>
<div class="test">
</div>
</main>
<footer class="footer">
<a href="#" class="copyright" title="На главную страницу">
&copy; 2021 - Первый сайт. Все права защищены!
</a>
</footer>
</body>
</html>

CSS:

*{margin:0; padding:0;}
html, body{width:100%; height:100%;}
.main, .header, .menu, .content, .sidebar, .footer
{border-spacing:0;}
.main{width:100%; min-height:100%; min-width:1200px;}
.header{height:100px;}
.footer{height:50px;}
.menu, .sidebar{width:180px; background-color:#ccc; vertical-align:top;}
.header, .footer{background-color:#333;}
.site-title
{
color:#eee;
text-align:center;
font-size:36px;
font-weight:bold;
font-style:italic;
position:relative;
top:50%;
transform:translateY(-50%);
}
.copyright {
color: #eee;
font-size: 16px;
font-weight: bold;
font-style: italic;
text-decoration: none;
display:block;
position: relative;
top:50%;
transform: translateY(-50%);
}
.test{height:50px; width:100%;clear: both;}
.footer{text-align:center; margin-top:-50px;}
.menu-link
{
display:block;
height:20px;
border-bottom:1px solid #eee;
padding:15px;
text-decoration:none;
font-size:16px;
color:#333;
transition:0.25s;
}
.menu-link:hover
{
color:#eee;
background-color:#333;
}
.menu{
    float: left;
}
.sidebar{
    float: right;
}
.content
{
vertical-align:top;
padding:15px 10px;
text-align:justify;
font-size:14px;
line-height:1.5;
overflow: hidden;
}
.content h2
{
font-size:20px;
font-weight:bold;
text-align:center;
}

Answer 1

На помощь идет Flex:

* {
  margin: 0;
  padding: 0;
}

.main {
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

section {
  display: flex;
}

.header {
  height: 100px;
}

.footer {
  height: 50px;
}

.menu,
.sidebar {
  width: 220px;
  background-color: #ccc;
  vertical-align: top;
}

.menu {
  white-space: nowrap;
}

.menu ul {
  list-style: none;
}

.header,
.footer {
  background-color: #333;
}

.site-title {
  color: #eee;
  text-align: center;
  font-size: 36px;
  font-weight: bold;
  font-style: italic;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.copyright {
  color: #eee;
  font-size: 16px;
  font-weight: bold;
  font-style: italic;
  text-decoration: none;
  display: block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.footer {
  text-align: center;
}

.menu-link {
  display: block;
  height: 20px;
  border-bottom: 1px solid #eee;
  padding: 15px;
  text-decoration: none;
  font-size: 16px;
  color: #333;
  transition: 0.25s;
}

.menu-link:hover {
  color: #eee;
  background-color: #333;
}

.content {
  vertical-align: top;
  padding: 15px 10px;
  text-align: justify;
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
  width: 100%;
}

.content h2 {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}

<!DOCTYPE html>
<html lang="zxx">

<head>
  <meta charset="utf-8" />
  <title>Табличная вёрстка</title>
  <link href="./style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <main class="main">
    <header class="header">
      <h1 class="site-title">Это мой первый сайт</h1>
    </header>
    <section>
      <nav class="menu">
        <ul>
          <li><a href="#" class="menu-link">Пункт меню</a></li>
          <li><a href="#" class="menu-link">Пункт меню</a></li>
          <li><a href="#" class="menu-link">Пункт меню</a></li>
          <li><a href="#" class="menu-link">Пункт меню</a></li>
          <li><a href="#" class="menu-link">Пункт меню</a></li>
          <li><a href="#" class="menu-link">Пункт меню</a></li>
        </ul>
      </nav>
      <article class="content">
        <h2>Статья о чём-то</h2>
        <p>
          Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя
          Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum
          в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
        </p>
        <p>
          Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя
          Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum
          в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
        </p>
        <p>
          Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя
          Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum
          в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
        </p>
      </article>
      <aside class="sidebar">1</aside>
    </section>
    <footer class="footer">
      <a href="#" class="copyright" title="На главную страницу">
&copy; 2021 - Первый сайт. Все права защищены!
</a>
    </footer>
  </main>
</body>

</html>

upd:

Обязательно нужно использовать позиционирование и псевдоэлементы before и after, возможно ещё понадобится z-index.

Так точно!

* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
}

.main,
.header,
.menu,
.content,
.sidebar,
.footer {
  border-spacing: 0;
}

.main {
  width: 100%;
  min-height: 100%;
  min-width: 1200px;
  overflow: hidden;
}

.header {
  height: 100px;
  min-width: 1200px;
}

.footer {
  height: 50px;
  min-width: 1200px;
}

.menu,
.sidebar {
  width: 180px;
  background-color: #ccc;
  vertical-align: top;
}

.header,
.footer {
  background-color: #333;
}

.site-title {
  color: #eee;
  text-align: center;
  font-size: 36px;
  font-weight: bold;
  font-style: italic;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.copyright {
  color: #eee;
  font-size: 16px;
  font-weight: bold;
  font-style: italic;
  text-decoration: none;
  display: block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.test {
  height: 50px;
  width: 100%;
  clear: both;
}

.footer {
  text-align: center;
  margin-top: -50px;
}

.menu-link {
  display: block;
  height: 20px;
  border-bottom: 1px solid #eee;
  padding: 15px;
  text-decoration: none;
  font-size: 16px;
  color: #333;
  transition: 0.25s;
}

.menu-link:hover {
  color: #eee;
  background-color: #333;
}

.menu {
  float: left;
  position: relative;
}

.sidebar {
  float: right;
  position: relative;
}

.menu::after,
.sidebar::after {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 1000vh;
  background-color: #ccc;
}

.content {
  vertical-align: top;
  padding: 15px 10px;
  text-align: justify;
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
}

.content h2 {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}

<!DOCTYPE html>
<html lang="zxx">

<head>
  <meta charset="utf-8" />
  <title>Табличная вёрстка</title>
  <link href="./style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <main class="main">
    <header class="header">
      <h1 class="site-title">Это мой первый сайт</h1>
    </header>
    <nav class="menu">
      <ul>
        <li><a href="#" class="menu-link">Пункт меню</a></li>
        <li><a href="#" class="menu-link">Пункт меню</a></li>
        <li><a href="#" class="menu-link">Пункт меню</a></li>
        <li><a href="#" class="menu-link">Пункт меню</a></li>
        <li><a href="#" class="menu-link">Пункт меню</a></li>
        <li><a href="#" class="menu-link">Пункт меню</a></li>
      </ul>
    </nav>
    <aside class="sidebar">1</aside>
    <article class="content">
      <h2>Статья о чём-то</h2>
      <p>
        Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя
        Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в
        60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
      </p>
      <p>
        Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя
        Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в
        60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
      </p>
      <p>
        Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя
        Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в
        60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
      </p>
    </article>
    <div class="test">
    </div>
  </main>
  <footer class="footer">
    <a href="#" class="copyright" title="На главную страницу">
&copy; 2021 - Первый сайт. Все права защищены!
</a>
  </footer>
</body>

</html>

БЛОГ НА HUSL

Растянуть menu и sidebar на всю высоту content

Ответы (1 шт):