CSS框不滚动

时间:2018-08-10 13:10:55

标签: html css scroll position

我正在为我的兄弟建立一个站点,并且应该在主页上创建几个CSS框,这些CSS框应与其中包含多个相框的图像位于相同的位置。多年来,我没有选择html和CSS,但在将框放置到位时遇到了问题,特别是因为如果滚动,则框不会跟随。这是我到目前为止的内容:

#wrapper {
  height: 100%;
  width: 100%;
  overflow: auto;
  background-repeat: no-repeat;
  background-image: url(images/fundo2.jpg);
  background-size: cover;
  background-position: top;
}

#header-wrapper {
  overflow: hidden;
  width: 100%;
  background: #252525;
  text-align: center;
}

#languageflags {
  position: relative;
  margin-top: 20px;
  margin-left: -20px;
  width: 100%;
  height: 2px;
  text-align: right;
}

#menu {
  overflow: visible;
  background: #252525;
  min-height: 30px;
  max-height: 66px;
  padding: 2px;
}

#page {
  width: 100%;
}

#content {
  overflow: visible;
  width: 100%;
  height: 120%;
}

#linkone {
  position: absolute;
  top: 50%;
  left: 27.2%;
  width: 14%;
  height: 44%;
  padding: 1%;
  background: rgba(239, 64, 53, 0.2);
}

#linktwo {
  position: absolute;
  top: 47.5%;
  left: 52%;
  width: 14.5%;
  height: 30%;
  padding: 1%;
  background: rgba(239, 64, 53, 0.2);
}
<body>
  <div id="wrapper">
    <div id="header-wrapper">
      <div id="languageflags">place for other languages</div>
      <div id="logo">logo on header</div>
      <div id="menu" class="container">
        <ul>
          menu goes here
        </ul>
      </div>
      <!--end menu-->
    </div>
    <!--end header-->
    <div id="page" class="container">
      <div id="content">
        <div id="linkone">my box attempt</div>
        <div id="linktwo">second box attempt</div>
        <img src="images/fundo.jpg" style="width: 100%;" />
      </div>
      <!--end content-->
    </div>
    <!--end page container-->
  </div>
  <!--end wrapper-->
</body>

因此,两个框应该滚动,但它们固定在同一位置。我在这里做错了什么?有人可以帮忙吗?预先非常感谢。

1 个答案:

答案 0 :(得分:2)

sampleData1 <- data.frame(id = 1:10, gender = as.factor(sample(c("Male", "Female"), 10, replace = TRUE)), age = as.character(rnorm(10, 40, 10)), height = as.character(rnorm(10,170,5))) sampleData2 <- data.frame(weight = as.character(rnorm(10,80,5)), gender = sample(c("Male", "Female"), 10, replace = TRUE), id = 11:20, age = rnorm(10, 44, 10)) sampleData3 <- data.frame(id = as.factor(21:30), age = as.character(rnorm(10, 36, 10)), gender = sample(c("Male", "Female"), 10, replace = TRUE), score = as.character(rnorm(10,20,2))) sampleList <- list(sampleData1,sampleData2,sampleData3) refData1 <- data.frame(id = 1:10, # numeric gender1 = as.character(sample(c("Male", "Female"), 10, replace = TRUE)), agen = rnorm(10, 40, 10), # numeric height = rnorm(10,170,5), # numeric weight = rnorm(10,80,5), # numeric other = as.factor(sample(c("a", "b","c"), 10, replace = TRUE))) 选择器添加#wrapper

position: relative