代码之家 › 专栏 › 技术社区 › Solo

如何使位置粘性与这种结构的工作?

css html

-2

Solo · 技术社区 · 6 年前

#top , #middle , #bottom . 我需要 .header

我试过各种款式,但都不走运。随意覆盖或添加任何样式。如何使这个工作与HTML结构我有?

#top {
  display: flex;
  position: relative;
  z-index: 0;
  overflow: hidden !important;
  max-height: 300px;
  max-width: 300px;
  border: 2px dashed #ec6161;
}
#middle {
  padding-right: 19px;
  margin-bottom: -34px;
  overflow: scroll;
  overflow-x: hidden !important;
  min-width: 100%! important;
  max-height: inherit !important;
  box-sizing: content-box !important;
}
#bottom {
  padding-bottom: 17px;
  margin-right: -19px;
  overflow: scroll;
  overflow-y: hidden !important;
  box-sizing: border-box !important;
  min-height: 100% !important;
}

.header {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #eee;
  padding: 5px 7px;
  font-weight: bold;
}
.content {
  height: 100px;
  padding: 5px 7px;
}

<div id="top">
  <div id ="middle">
    <div id="bottom">
    
      <div>
      
        <div>  
          <div class="header">Header</div>
          <div class="content">Content</div>
        </div>
        <div>
          <div class="header">Header</div>
          <div class="content">Content</div>
        </div>
        <div>
          <div class="header">Header</div>
          <div class="content">Content</div>
        </div>
        <div>
          <div class="header">Header</div>
          <div class="content">Content</div>
        </div>
        <div>
          <div class="header">Header</div>
          <div class="content">Content</div>
        </div>
        
      </div>
      
    </div>
  </div>
</div>

也: https://jsfiddle.net/bkn0e3gL/2/

1 回复 | 直到 6 年前

ksav 6 年前

设置 overflow: hidden 对任何一个父母来说,离婚似乎都是问题的根源。

this answer :

如果您将overflow设置为hidden on any祖先的粘滞元素,那么这个祖先元素将是粘滞元素的滚动容器。

.header {
  background: #B8C1C8;
  border-bottom: 1px solid #989EA4;
  border-top: 1px solid #717D85;
  color: #FFF;
  position: -webkit-sticky;
  position: sticky;
  top: -1px;
}

.content {
  min-height: 200px;
}

#bottom {
  padding-bottom: 17px;
  margin-right: -19px; //overflow: scroll;
  //overflow-y: hidden !important;
  box-sizing: border-box !important;
  min-height: 100% !important;
}

#middle {
  padding-right: 19px;
  margin-bottom: -34px; //overflow: scroll;
  //overflow-x: hidden !important;
  min-width: 100% ! important;
  max-height: inherit !important;
  box-sizing: content-box !important;
}

#top {
  display: flex;
  position: relative;
  z-index: 0;
  //overflow: hidden !important;
  max-height: 300px;
  max-width: 300px;
  border: 2px dashed #ec6161;
}

<div id="top">
  <div id="middle">
    <div id="bottom">
      <div>
        <div>
          <div class="header">Header</div>
          <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque viverra.</div>
        </div>
        <div>
          <div class="header">Header</div>
          <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque viverra.</div>
        </div>
        <div>
          <div class="header">Header</div>
          <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque viverra.</div>
        </div>
        <div>
          <div class="header">Header</div>
          <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque viverra.</div>
        </div>
      </div>
    </div>
  </div>
</div>