时间戳

首页 > 解决方案 > 需要帮助确定如何放置 2 个 div

html - 需要帮助确定如何放置 2 个 div

问题描述

似乎不能在身体旁边放一个盒子并让它粘住（又名跟随滚轮） 概念 我有这个尝试代码，但它不工作

body,
html {
  height: 100%;
}

html {
  background-color: #f2f2f2;
}

body {
  margin: auto;
  background-color: #ffffff;
  width: 60%;
  display: block;
}

#a {
  width: 60%;
  margin: auto;
  display: inline-block;
}

#b {
  display: inline-block;
}
<div id="a">
  AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
</div>
<div id="b">
  BBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
</div>

标签： htmlcss

解决方案

我认为“位置：固定”是您正在寻找的。

body,
html {
    height: 100%;
}

html {
    background-color: #f2f2f2;
}

body {
    width: 60%;
    padding: 30px;
    height: 4000px; /* TEST */
    margin: 0px auto;
    background-color: #ffffff;
}

#site-block {
  position: fixed;
  top: 100px;
  right: 0px;
  max-width: 15%;
  border: 2px solid blue;
  padding: 5px;
}
<body>
  <div>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>

  <div id="site-block">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>

</body>

推荐阅读