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>
在你的css中嘗試'position：fixed' – ne1410s