Question

胶粘物是否有办法考虑页面上的其他粘贴？

例如：

＆＃13;

body {
  display: flex;
  min-height: 2000px;
  flex-direction: column;
}
#header {
  height: 40px;
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  background: yellow;
}
#footer {
  flex: 0 0 auto;
  height: 20px;
}
#main {
  display: flex;
  flex: auto;
  background: blue;
}
#side {
  width: 200px;
  background: red;
}
#side > div {
  position: sticky;
  top: 0px;
}

＆＃13;

<div id="header">header</div>
<div id="main">
  <div id="side">
    <div>side</div>
  </div>
  <div id="content">
    content
  </div>
</div>
<div id="footer">footer</div>

＆＃13;

请注意，如果我向下滚动标题会与侧边栏重叠，因为它们具有相同的top位置。

要修复我必须使侧边栏的顶部位置采用标题高度的值

＆＃13;

body {
  display: flex;
  min-height: 2000px;
  flex-direction: column;
}
#header {
  height: 40px;
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  background: yellow;
}
#footer {
  flex: 0 0 auto;
  height: 20px;
}
#main {
  display: flex;
  flex: auto;
  background: blue;
}
#side {
  width: 200px;
  background: red;
}
#side > div {
  position: sticky;
  top: 40px;
}

＆＃13;

<div id="header">header</div>
<div id="main">
  <div id="side">
    <div>side</div>
  </div>
  <div id="content">
    content
  </div>
</div>
<div id="footer">footer</div>

＆＃13;

但是如果标题有可变高度怎么办？我可以告诉浏览器以某种方式定位胶粘物以使它们不与其他物质重叠吗？

Answer 1

我认为您需要使用javascript。首先获取标题的高度，然后使用该值设置side div的顶部位置。我不知道有任何纯粹的css方式，我担心。

如果您使用的是jQuery，只需使用.height（）方法，否则您可以使用它：

var clientHeight =        document.getElementById('myDiv').clientHeight;

var offsetHeight = document.getElementById('myDiv').offsetHeight;

offset方法获取任何填充和边框的高度。

位置粘自动“顶”位置

1 个答案: