Как закрепить мен. чтобы при скролле вниз оно не двигалось?
Не пойму, как сделать, чтобы меню (блок слева, где разделы история, наука и т.д) закрепился и не двигался при скролле вниз. Надо чтобы скроллились только посты(то что справа). При добавлении position:fixed к .menu получается, что , блок с постами смещается налево и меню накладывается на посты...
*{
box-sizing:border-box;
}
body{
margin: 0;
padding: 0;
background-color: #FEFDEF;
}
ul{
list-style: none;
padding: 0;
margin-top: 0;
display: flex;
flex-direction: column;
align-items: center;
}
li{
margin-top: 62px;
}
a{
text-decoration: none;
}
.container,.menu,.plot,.posting{
border:2px solid blue;
}
.appeal{
margin-top: 46px;
}
.container{
width: 1170px;
height: 100%;
margin-top: 0;
margin: 0 auto;
display: flex;
position: static;
display: flex;
}
.menu{
width: 277px;
display: flex;
flex-direction: column;
align-items: center;
}
.plot{
width: 893px;
height: 100vh;
margin-right: 0;
padding-left: 100px;
padding-right: 19px;
}
.quoteline{
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.authorphoto{
width:107px;
height: 108px;
background-color: rgb(179, 62, 62);
}
.rect{
width: 574px;
height: 108px;
background-color: rgb(131, 102, 102);
margin-top: 9px;
}
.posting{
margin-top: 72px;
}
.logo{
width: auto;
margin: 0 auto;
margin-top: 46px;
}
.btn2{
margin-top: 260px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style2.css">
<title>Document</title>
</head>
<body>
<section class="main">
<div class="container">
<div class="menu">
<div class="logo">
<svg width="167" height="33" viewBox="0 0 167 33" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.67 0.499998H12.375L17.505 32H12.555L11.655 25.745V25.835H6.03L5.13 32H0.54L5.67 0.499998ZM11.07 21.56L8.865 5.99H8.775L6.615 21.56H11.07ZM23.5065 0.499998H31.0665C33.5265 0.499998 35.3715 1.16 36.6015 2.48C37.8315 3.8 38.4465 5.735 38.4465 8.285V24.215C38.4465 26.765 37.8315 28.7 36.6015 30.02C35.3715 31.34 33.5265 32 31.0665 32H23.5065V0.499998ZM30.9765 27.5C31.7865 27.5 32.4015 27.26 32.8215 26.78C33.2715 26.3 33.4965 25.52 33.4965 24.44V8.06C33.4965 6.98 33.2715 6.2 32.8215 5.72C32.4015 5.24 31.7865 5 30.9765 5H28.4565V27.5H30.9765ZM43.9949 0.499998H48.9899L52.2299 24.935H52.3199L55.5599 0.499998H60.1049L55.3349 32H48.7649L43.9949 0.499998ZM66.0825 0.499998H71.0325V32H66.0825V0.499998ZM84.7747 32.45C82.3747 32.45 80.5597 31.775 79.3297 30.425C78.0997 29.045 77.4847 27.08 77.4847 24.53V22.73H82.1647V24.89C82.1647 26.93 83.0197 27.95 84.7297 27.95C85.5697 27.95 86.1997 27.71 86.6197 27.23C87.0697 26.72 87.2947 25.91 87.2947 24.8C87.2947 23.48 86.9947 22.325 86.3947 21.335C85.7947 20.315 84.6847 19.1 83.0647 17.69C81.0247 15.89 79.5997 14.27 78.7897 12.83C77.9797 11.36 77.5747 9.71 77.5747 7.88C77.5747 5.39 78.2047 3.47 79.4647 2.12C80.7247 0.739998 82.5547 0.0499983 84.9547 0.0499983C87.3247 0.0499983 89.1097 0.739998 90.3097 2.12C91.5397 3.47 92.1547 5.42 92.1547 7.97V9.275H87.4747V7.655C87.4747 6.575 87.2647 5.795 86.8447 5.315C86.4247 4.805 85.8097 4.55 84.9997 4.55C83.3497 4.55 82.5247 5.555 82.5247 7.565C82.5247 8.705 82.8247 9.77 83.4247 10.76C84.0547 11.75 85.1797 12.95 86.7997 14.36C88.8697 16.16 90.2947 17.795 91.0747 19.265C91.8547 20.735 92.2447 22.46 92.2447 24.44C92.2447 27.02 91.5997 29 90.3097 30.38C89.0497 31.76 87.2047 32.45 84.7747 32.45ZM98.6829 0.499998H112.183V5H103.633V13.325H110.428V17.825H103.633V27.5H112.183V32H98.6829V0.499998ZM118.541 28.58C118.541 26.33 118.901 24.41 119.621 22.82C120.341 21.2 121.631 19.415 123.491 17.465C125.321 15.515 126.581 13.85 127.271 12.47C127.991 11.09 128.351 9.65 128.351 8.15C128.351 6.8 128.126 5.87 127.676 5.36C127.256 4.82 126.626 4.55 125.786 4.55C124.076 4.55 123.221 5.585 123.221 7.655V11.03H118.541V7.97C118.541 5.42 119.171 3.47 120.431 2.12C121.691 0.739998 123.521 0.0499983 125.921 0.0499983C128.321 0.0499983 130.151 0.739998 131.411 2.12C132.671 3.47 133.301 5.42 133.301 7.97C133.301 9.89 132.836 11.765 131.906 13.595C131.006 15.425 129.431 17.525 127.181 19.895C125.711 21.455 124.721 22.73 124.211 23.72C123.701 24.68 123.446 25.715 123.446 26.825V27.5H132.851V32H118.541V28.58ZM140.248 27.23H145.018V32H140.248V27.23ZM159.485 32.45C157.055 32.45 155.195 31.76 153.905 30.38C152.615 29 151.97 27.05 151.97 24.53V7.97C151.97 5.45 152.615 3.5 153.905 2.12C155.195 0.739998 157.055 0.0499983 159.485 0.0499983C161.915 0.0499983 163.775 0.739998 165.065 2.12C166.355 3.5 167 5.45 167 7.97V24.53C167 27.05 166.355 29 165.065 30.38C163.775 31.76 161.915 32.45 159.485 32.45ZM159.485 27.95C161.195 27.95 162.05 26.915 162.05 24.845V7.655C162.05 5.585 161.195 4.55 159.485 4.55C157.775 4.55 156.92 5.585 156.92 7.655V24.845C156.92 26.915 157.775 27.95 159.485 27.95Z" fill="#4C4E67"/>
</svg>
</div>
<ul>
<li>История</li>
<li>Спорт</li>
<li>Наука</li>
<li>Люди</li>
</ul>
<div class="btn2">Добавить Эдвайс</div>
</div>
<div class="plot">
<div class="appeal">Вдохновись опытом других!</div>
<div class="posting">
<div class="whopost">Амин Кипкеев</div>
<div class="quoteline">
<div class="rect">
<div class="quote">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit”
</div>
<div class="author2">ALbert Einstein</div>
</div>
<div class="authorphoto">
<div class="head"></div>
<div class="body"></div>
</div>
</div>
</div>
<div class="posting">
<div class="whopost">Амин Кипкеев</div>
<div class="quoteline">
<div class="rect">
<div class="quote">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit”
</div>
<div class="author2">ALbert Einstein</div>
</div>
<div class="authorphoto">
<div class="head"></div>
<div class="body"></div>
</div>
</div>
</div>
<div class="posting">
<div class="whopost">Амин Кипкеев</div>
<div class="quoteline">
<div class="rect">
<div class="quote">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit”
</div>
<div class="author2">ALbert Einstein</div>
</div>
<div class="authorphoto">
<div class="head"></div>
<div class="body"></div>
</div>
</div>
</div>
<div class="posting">
<div class="whopost">Амин Кипкеев</div>
<div class="quoteline">
<div class="rect">
<div class="quote">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit”
</div>
<div class="author2">ALbert Einstein</div>
</div>
<div class="authorphoto">
<div class="head"></div>
<div class="body"></div>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
Ответы (1 шт):
Автор решения: GulgDev
→ Ссылка
Добавьте в .menu строку position: fixed;, чтобы зафиксировать меню, а в .plot строку margin-left: (ширина меню);, которая будет отвечать за то, чтобы меню не перекрывало страницу.