Question

当我在页面上添加更多内容时，我看到我的侧栏和主页未在页面上修复。基本上，无论有多少内容，我都需要侧栏以及页面的其余部分（背景图片）。希望足够清楚。此外，我觉得我的代码中添加了许多无用的东西。如果有人不介意让我知道这是什么，而不改变页面的样子，那就太棒了。

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

Answer 1

将position:fixed;添加到#sideBar以修复侧边栏。

关于移动背景，请将background-attachment: fixed;添加到body - 规则

评论后添加/编辑：

并将margin-left: 50px添加到body，以防止其内容或背景隐藏在固定边栏下。

修复了侧边栏和主页面

1 个答案: