关于html：定义’height’时’position：sticky’不起作用


'position: sticky' not working when 'height' is defined

我正在构建一个着陆页，用户首先会在其中看到一个主要区域，该主要区域下方有页脚。向下滚动可发现页脚是一个粘性页眉，我的目标是使用纯CSS来实现。为了获得主要内容和页脚的全屏外观，我将height属性设置为两个不同的值：92％和8％(使用vh也不起作用)。无论我在CSS中指定的height(不同的单位和全部)，我的页脚div都不会粘住。一旦删除height属性，它就会按预期工作。

这是删除height属性之前的页面截图：

With %, landing

如您所见，它不会粘住：

With %, scrolled

删除height属性值后，它确实会卡住：

Without %, scrolled

在相关代码下面：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
html,
body {
  height: 100%;
  margin: 0;
}

#main {
  height: 92%;
}

#landing {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}

#landingContent {
  width: 20vw;
}

#footerNav {
  height: 8%;
  display: flex;
  align-items: center;
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
      <h1 class="logo">Logo
      <p id="landingParagraph">Lorem ipsum, paragraph content, etc etc.
</p>
      <button>Button</button>
   
 


 
    <h1 class="logo">Logo
 

<p>
Hello
</p>
<p><center>[wp_ad_camp_3]</center></p><p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p><center>[wp_ad_camp_4]</center></p><p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>

我读到使用overflow属性可能会出现问题，尽管它不存在，也没有听说过height对其他人来说是一个问题。我当然是错的。

我已经测试过：

  • Firefox 61(夜间)
  • Safari 53(技术预览版)
  • 铬65

编辑：大发展；从#main中删除height属性会使#footerNav保持粘性。

相关讨论

这里的问题与height有关，但与您考虑的height有关。让我们首先从粘性位置的定义开始：

A stickily positioned element is an element whose computed position
value is sticky. It's treated as relatively positioned until its
containing block crosses a specified threshold (such as setting top to
value other than auto) within its flow root (or the container it
scrolls within), at which point it is treated as"stuck" until meeting
the opposite edge of its containing block.

重要的部分是最后一句话，它解释了当元素到达其包含块的边缘时，sticky位置将结束，在您的情况下，sticky元素的包含块是主体，并且将主体设置为height:100%并且您的内容过多。

因此，当将main的高度设置为92％，将页脚设置为8％时，您已经在其包含块的相反边缘处设置了页脚。这是我为身体添加背景色的插图，因此您可以清楚地看到这一点：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
html,
body {
  height: 100%;
  margin: 0;
}
html {
  background:white;
}
body {
  background:blue;
}

#main {
  height: 92%;
}
#landing {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}
#landingContent {
  width: 20vw;
}
#footerNav {
  height: 8%;
  display: flex;
  align-items: center;
  position: sticky;
  top: 0px;
  background:red;
  color:#fff;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
            <h1 class="logo">Logo
            <p id="landingParagraph">Lorem ipsum, paragraph content, etc etc.
</p>
            <button>Button</button>
       
   


   
        <h1 class="logo">Logo
   

<p>
Hello
</p>
<p>
Hello
</p>
<p><center>[wp_ad_camp_5]</center></p><p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>

如您所见，徽标已经在主体底部，因此没有办法使其像粘性一样移动。您的内容也溢出了。

现在，如果您稍微降低主要内容的高度，您将看到一个小的粘性行为，当页脚到达蓝色部分(body)的底部时，该行为将结束。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
html,
body {
  height: 100%;
  margin: 0;
}
html {
  background:white;
}
body {
  background:blue;
}

#main {
  height: 82%;
}
#landing {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}
#landingContent {
  width: 20vw;
}
#footerNav {
  height: 8%;
  display: flex;
  align-items: center;
  position: sticky;
  top: 0px;
  background:red;
  color:#fff;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
            <h1 class="logo">Logo
            <p id="landingParagraph">Lorem ipsum, paragraph content, etc etc.
</p>
            <button>Button</button>
       
   


   
        <h1 class="logo">Logo
   

<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p><center>[wp_ad_camp_5]</center></p><p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>

为了解决此问题，您只需要避免将height:100%设置为正文。您可以改用min-height或保持其高度为自动。您还可以考虑将vh单位用于main和footer：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
html,
body {
  /*height: 100%;
    no needed
  */
  margin: 0;
}
html {
  background:white;
}
body {
  background:blue;
}

#main {
  height: 92vh;
}
#landing {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}
#landingContent {
  width: 20vw;
}
#footerNav {
  height: 8vh;
  display: flex;
  align-items: center;
  position: sticky;
  top: 0px;
  background:red;
  color:#fff;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
            <h1 class="logo">Logo
            <p id="landingParagraph">Lorem ipsum, paragraph content, etc etc.
</p>
            <button>Button</button>
       
   


   
        <h1 class="logo">Logo
   

<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hello
</p>

有关更多详细信息/示例的相关问题：

为什么带有position：sticky的元素不会粘贴到父对象的底部？

什么是"滚动框"？

如果您将" bottom：0"指定为" sticky"，为什么它会做一些与规范不同的事情？

支持使用职位：粘性似乎有点薄弱。您可以在此页面中进行检查：

https://caniuse.com/#search=position%3A%20sticky

如果您希望页脚具有粘性，则可以使用position：absolute，这是每个浏览器都支持的。我采用了您的代码，并像它的迷你版本一样创建了代码，以说明我的观点：绝对。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!doctype html>
    <html>
        <head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .footerNav {
            background-color: red;
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 100px;
        }
    </style>
</head>
<body>
   
       
           
                <h1 class="logo">Logo
                <p id="landingParagraph">Lorem ipsum, paragraph content, etc etc.
</p>
                <button>Button</button>
           
       
   
   
       
            <h1 class="logo">Logo
       
   
</body>

请注意，我将id =" footerNav"更改为class =" footerNav"。我个人更喜欢使用样式的类。但是，如果您仍然愿意，可以使用id。

如果要显示登录页面，然后用户稍微滚动一下以查看您的页脚，则可以使用高度：100vh，并从页脚中删除绝对位置，因为它将被主要内容向下推到下面div。例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!doctype html>
    <html>
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #main {
            height: 100vh;
        }

        #footerNav {
            background-color: red;
            position: relative;
            bottom: 0;
            width: 100%;
            height: 100px;
        }
    </style>
</head>
<body>
   
       
           
                <h1 class="logo">Logo
                <p id="landingParagraph">Lorem ipsum, paragraph content, etc etc.
</p>
                <button>Button</button>
           
       
   
   
       
            <h1 class="logo">Logo
       
   
</body>

我希望我的回答可以以某种方式对您有所帮助。

相关讨论