0
Поскольку я добавляю больше контента ниже на странице, я вижу, что моя боковая панель и главная страница не фиксированы на странице. В принципе, мне нужен боковой бар, чтобы оставаться там, где он находится, а также остальная часть страницы (фоновое изображение) независимо от того, сколько контента там. Надеюсь, это достаточно ясно. Кроме того, я чувствую, что в моем коде есть много бесполезных вещей, добавленных к нему. Если кто-то не возражает, давая понять, что это такое, не меняя способ отображения страницы, это было бы здорово.Исправлена боковая панель и главная страница
html {
height: 100%;
}
body {
margin: 0;
width: 100%;
height: 100%;
background-image: url(images/background2.jpg);
background-size: contain;
background-repeat: no-repeat;
background-size: 100% 100%;
}
#backgroundCover {
width: 100%;
height: 100%;
background-color: black;
opacity: 0.35;
}
#sideBar {
width: 50px;
height: 100%;
position: absolute;
top: 0;
background-color: black;
opacity: 0.7;
}
#navigationToggle {
width: 30px;
height: 30px;
margin: 20px 0 60px 10px;
background-image: url(png/512/navicon-round-white.png);
background-size: contain;
}
#topmenuicon {
width: 30px;
height: 30px;
margin: 160px 0 60px 10px;
background-image: url(png/512/ios7-home-white-outline.png);
background-size: contain;
}
#topmenuicon:hover {
cursor: pointer;
background-color: white;
background-image: url(png/512/ios7-home-outline.png);
transition: 0.2s ease-out;
border-radius: 3px;
}
#menuicon1 {
margin: 60px 0 0 10px;
width: 30px;
height: 30px;
background-image: url(png/512/ios7-person-white-outline.png);
background-size: contain;
}
#menuicon1:hover {
cursor: pointer;
background-color: white;
background-image: url(png/512/ios7-person-outline.png);
transition: 0.2s ease-out;
border-radius: 3px;
}
#menuicon2 {
margin: 60px 0 0 10px;
width: 30px;
height: 30px;
background-image: url(png/512/ios7-people-white-outline.png);
background-size: contain;
}
#menuicon2:hover {
cursor: pointer;
background-color: white;
background-image: url(png/512/ios7-people-outline.png);
transition: 0.2s ease-out;
border-radius: 3px;
}
#menuicon3 {
margin: 60px 0 0 10px;
width: 30px;
height: 30px;
background-image: url(png/512/ios7-world-white-outline.png);
background-size: contain;
}
#menuicon3:hover {
cursor: pointer;
background-color: white;
background-image: url(png/512/ios7-world-outline.png);
transition: 0.2s ease-out;
border-radius: 3px;
}
#menuicon4 {
margin: 60px 0 0 10px;
width: 30px;
height: 30px;
background-image: url(png/512/ios7-gear-white-outline.png);
background-size: contain;
}
#menuicon4:hover {
cursor: pointer;
background-color: white;
background-image: url(png/512/ios7-gear-outline.png);
transition: 0.2s ease-out;
border-radius: 3px;
}<!doctype html>
<html>
<head>
<title>Noam's Website</title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<div id="backgroundCover"></div>
<div id="sideBar">
<div id="navigationToggle"></div>
<div id="topmenuicon"></div>
<div id="menuicon1"></div>
<div id="menuicon2"></div>
<div id="menuicon3"></div>
<div id="menuicon4"></div>
</div>
</body>
</html>
попробуйте 'position: fixed' в вашем css – ne1410s