关于html：内容和固定底部导航之间的空间

space between content and fixed bottom navigation

我正在使用Bootstrap 4开发一个主页，其中仅包含固定底部样式的导航栏和位于其上方的转盘。

在桌面/平板电脑视图上的外观还可以，但是在移动设备视图上却是问题。

在移动视图中，轮播和我要摆脱的导航之间有空白。我怎样才能做到这一点？

我已经尝试过了，但是没有用。

1	@media only screen and (max-width: 576px) {body {overflow: hidden;}

这是我的小提琴：
https://jsfiddle.net/wb13o8nv/13/

在这件事上需要您的帮助，谢谢。

相关讨论

像这样吗？

1
2
3
4

Carousel here
<img class="d-block h-100" src="https://images.unsplash.com/flagged/photo-1551706646-9c816bfbff8c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1567&q=80" alt="Second slide">

<footer class="sticky-bottom">Your nav here</footer>

对不起，我无法编写太多完整的代码，我是通过手机编写的。但我希望这是您要寻找的。

我对这个问题的解决方案是将幻灯片中的图像用作每个carousel-item的background image。

CSS

1
2
3
4
5
6
7
8
9
10
11
12

.no-gutters {
margin-right: 0;
margin-left: 0;
}
.sliderCarousel {
width: 100%;
}
.sliderCarousel .carousel-item {
width: 100%;
background-position: center;
background-size: cover;
}

HTML

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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117

<!DOCTYPE html>
<html lang="en">
<head>
Bootstrap 4 Website Example
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
/>
<link rel="stylesheet" href="./style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
Navbar
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#collapsibleNavbar"
>
<span class="navbar-toggler-icon"></span>
</button>

<ul class="navbar-nav">
<li class="nav-item">
Link

</li>

<li class="nav-item">
Link

</li>

<li class="nav-item">
Link

</li>

</ul>

</nav>

<div
id="carouselExampleIndicators"
class="carousel slide sliderCarousel"
data-ride="carousel"
>

<li
data-target="#carouselExampleIndicators"
data-slide-to="0"
class="active"
>
</li>

<li data-target="#carouselExampleIndicators" data-slide-to="1">
</li>

<li data-target="#carouselExampleIndicators" data-slide-to="2">
</li>

<div
class="carousel-item h-100 active"
style="background-image:url('https://images.unsplash.com/flagged/photo-1551706646-9c816bfbff8c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1567&q=80')"
>
<div
class="carousel-item h-100"
style="background-image:url('https://images.unsplash.com/flagged/photo-1551706646-9c816bfbff8c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1567&q=80')"
>
<div
class="carousel-item h-100"
style="background-image:url('https://images.unsplash.com/flagged/photo-1551706646-9c816bfbff8c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1567&q=80')"
>

<a
class="carousel-control-prev"
href="#carouselExampleIndicators"
role="button"
data-slide="prev"
>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>

<a
class="carousel-control-next"
href="#carouselExampleIndicators"
role="button"
data-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde
deserunt dolores cum optio sed exercitationem dolore rerum
consectetur, voluptatibus nemo molestias laudantium ea, soluta ab iste
voluptates veritatis quos dignissimos?

<script src="./script.js">
</body>
</html>

Javascript

1
2
3
4
5
6
7
8
9

$(document).ready(function() {
var setCarouselHeight = function() {
$(".sliderCarousel").height(document.documentElement.clientHeight);
};
setCarouselHeight();
$(window).resize(function() {
setCarouselHeight();
});
});

这里我使用js计算视口的高度并设置轮播的高度。

1
2
3
4
5
6
7
8
9

1
2
3
4
5
6
7
8
9
10
11
12

.no-gutters {
margin-right: 0;
margin-left: 0;
}
.sliderCarousel {
width: 100%;
}
.sliderCarousel .carousel-item {
width: 100%;
background-position: center;
background-size: cover;
}

工作小提琴链接