CSS粘位置浮动错误

Question

我使用CSS位置的黏性值时，顶部DIV高度不是int值，而是一个浮点值，然后将底部div的顶部一样顶部的高度，这将让他们之间的空间！但使用绝对和固定不存在这个问题。

一个div和b DIV有空间

html,body { 
 
    margin: 0; 
 
} 
 

 
.container { 
 
    height: 1000px; 
 
} 
 

 
.container > div { 
 
    height: 65.9px; 
 
} 
 

 
.a { 
 
    position: sticky; 
 
    /* position: static */ 
 
    /* position: sticky */ 
 
    width: 340px; 
 
    top: 0px; 
 
    background: green; 
 
    z-index: 20; 
 
} 
 

 
.b { 
 
    position: sticky; 
 
    top: 66px; 
 
    /* top: 65.9 */ 
 
    width: 100px; 
 
    z-index: 10; 
 
    background: pink; 
 
    over-flow: hidden; 
 
} 
 

 
.c { 
 
    position: fixed; 
 
    width: 100px; 
 
    left: 120px; 
 
    top: 66px; 
 
    background: red; 
 
} 
 

 
.d { 
 
    position: absolute; 
 
    width: 100px; 
 
    left: 240px; 
 
    top: 66px; 
 
    background: yellow; 
 
}

<!-- position sticky float number bug --> 
 
<div class="container"> 
 
    <div class="a">a: height=65.9px sticky position</div> 
 
    <div class="b">b: top=66px sticky position</div> 
 
    <div class="c">c: top=66px fixed position</div> 
 
    <div class="d">d: top=66px absolute</div> 
 
</div>

有人能帮我看看吗？

Answer 1

看看这个代码！

.container { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
.container > div { 
 
    height: 50%; 
 
} 
 

 
.row { 
 
    float: left; 
 
} 
 

 
.a { 
 
    position: relative; 
 
    background: green; 
 
    height: 50%; 
 
    width: 100%; 
 
} 
 

 
.b { 
 
    position: relative; 
 
    background: pink; 
 
    height: 50%; 
 
    width: 33.33%; 
 
} 
 

 
.c { 
 
    position: relative; 
 
    background: red; 
 
    height: 50%; 
 
    width: 33.33%; 
 
} 
 

 
.d { 
 
    position: relative; 
 
    background: yellow; 
 
    height: 50%; 
 
    width: 33.33%; 
 
}

<!-- position sticky float number bug --> 
 
<div class="container"> 
 
    <div class="row a">a</div> 
 
    <div class="row b">b</div> 
 
    <div class="row c">c</div> 
 
    <div class="row d">d</div> 
 
</div>