设置父级溢出而不破坏孩子的位置粘性 [英] Setting parent overflow without breaking position sticky of child

问题描述

我使用

• 最后但并非最不重要的，如果您使用 display：table 在您的父母中，然后在您的孩子中，而不是浮动使用 display：table-cell
  
  

  阅读 here here关于以表格形式显示的信息
  
  

  编辑：

  
  
  

  因此，从我的测试中使用小提琴并如预期的那样，如果您想继续使用 display：table ， overflow 将在那里过时，正如我上面所解释的。

  
  
  

  我也测试过设置 display：inline-table \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'他们。

  


  I'm using stickyfill to stickify one of my columns in a two column design. I need my parent to fill vertically without declaring a height. stickyfill detects browsers (firefox, safari) that support position:sticky; and lets those browsers take over.

  I'm used to simply setting the parent's overflow to hidden but in this case, it breaks position:sticky; from working.

  My solution is to set the parent's display property to table. This works from what I've tested, but I'm wondering if this is a bad idea or if there's a better way to achieve my goal.

  Example: JSFiddle

  CSS:

  .wrapper {
      overflow: visible;
      display: table;
      width: 400px;
  }
  
  .left {
      float: left;
      width: 60%;
      height: 1280px;
      background-color: #EEE;
  }
  
  .right {
      overflow: hidden;
      position: -webkit-sticky;
      position: sticky;
      top: 0;
  }
  

  HTML:

  <div class="wrapper">
      <div class="left">Content</div>
      <div class="right">Sticky</div>
  </div>
  

  解决方案

  I'm not sure what you are trying to achieve but here are a few couple of things that you should know and/or could improve:

  • You shouldn't use position:sticky since only works on FF35+ and Safari7.1+ with the -webkit prefix(see image below) source.

    Therefore I advise you to use a JS solution for this.

  .

  • overflow:none is invalid, take a look at the possible values for overflow:

  /* Content is not clipped */
  overflow: visible;

  /* Content is clipped, with no scrollbars */
  overflow: hidden;

  /* Content is clipped, with scrollbars */
  overflow: scroll;

  /* Let the browser decide */
  overflow: auto;

  overflow: inherit;

  • But since you are displaying your parent container as table, then overflow won't work:

  The overflow property specifies whether to clip content, render scrollbars or just display content when it overflows its block level container.

  Source

  • last but not least, if you are using display:table in your parent then in your children instead having floats use display:table-cell

  Read here info about displaying as tables

  EDIT:

  So from my tests using your fiddle, and as expected, if you want to keep using display:table, overflow will be obsolete there, as I explained above.

  I tested as well setting display:inline-table\table-cell\inline-block and the all worked.

  So I don't see disadvantages or advantages to use either one of them.

  这篇关于设置父级溢出而不破坏孩子的位置粘性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！