Html 如何使页脚保持在页面底部

我正在把一个粘脚放在我的边栏底部。然而，有一个小问题困扰着我。页脚似乎以左边空白开始，但右边没有空白。我做错了什么？请参见下面的屏幕截图：

*{
字体系列：“Roboto”，无衬线；
}
身体{
背景色：#fff；
}
/*侧边栏的每个CSS规则及其内容*/
.标志{
宽度：180px；
高度：55px；
利润率：14px自动；
背景尺寸：包含；
背景重复：无重复；
背景图像：url（../images/logo.png）；
}
.侧边栏{
高度：100vh；
背景色：#fff；
}
#地图{
高度：100vh；
}
.崩溃{
列表样式类型：无；
}
李先生{
填充：10px；
}
页脚{
利润率：40px0；
字体大小：14px；
宽度：100%；
文本对齐：居中；
位置：绝对位置；
背景色：红色；
}

TripQuest
提交
我的路线

2019年10月29日-罗伊
2019年10月12日-罗伊
2019年5月10日-罗伊

我的帐户
我的帐户
&时代；
用户的“我的帐户”内容将进入此模式窗口。
接近
&抄袭；2019 TripQuest.org
谷歌地图
//初始化并添加映射
函数initMap（）{
//乌卢鲁的位置
var uluru={lat:38.897663，lng:-77.036575}；
//以乌鲁鲁为中心的地图
var map=new google.maps.map(
getElementById（'map'），{zoom:13，center:uluru}）；
//位于乌卢鲁的标记
var marker=new google.maps.marker（{position:uluru，map:map}）；
}

因此，侧边栏上的

col-3

类在创建粘性页脚的节点的左右两侧添加了一个15px的填充。页脚的左上角从填充内部开始，这显然不是您想要的

最简单的解决方案，尽管有点刺耳，是通过在页脚上使用负边距来抵消填充。使用负边距将帮助您以相对方式在绝对定位的元素上定位。这看起来像：

...

footer {
    margin: 40px 0 40px -15px;
    font-size: 14px;
    width: 100%;
    text-align: center;
    position: absolute;
    background-color: red;
}

...

这些类型的布局正是CSS网格设计的目的，因此，如果您能够灵活地探索CSS网格，我会这样做。您可以在此处找到有关CSS网格的文档：